React.js中如何从JSON获取数据并绘制折线图

我看了你现有的代码，已经通过Axios成功获取到了JSON数据并存入组件state，接下来只需要根据数据结构正确提取对应字段，填充到折线图的配置项里就可以了。下面分情况给你具体的修改方案：

第一步：修正基础代码小问题 #

首先，你当前render函数里的const data = this.state会把整个state对象赋值给data，这是不对的，应该改成const { data } = this.state来直接获取state中存储的接口返回数据。另外建议把state初始值改成空对象（因为接口返回的是对象而非数组），并加上请求错误处理，避免请求失败时组件报错。

情况1：接口返回的是结构化对象（键对应数组） #

如果控制台打印的JSON结构是类似这样的（键直接对应各类数据数组）：

{
  "dates": ["2020-01-01", "2020-01-02", "2020-01-03"],
  "infected": [100, 150, 200],
  "recovered": [20, 30, 50],
  "deaths": [5, 7, 9]
}

直接提取对应数组填充到折线图即可，完整组件代码如下：

class WorldLineChart extends Component{
  constructor(props) {
    super(props);
    this.state = { data: {} }; // 初始值改为空对象更合理
  }

  componentDidMount(){
    axios.get(`https://td.fpt.ai/corona/corona-total.json`)
      .then(res => {
        const data = res.data;
        console.log(data); // 这里可以确认实际数据结构
        this.setState({data: data});
      })
      .catch(err => {
        console.error('数据获取失败:', err); // 添加错误处理
      });
  }

  render(){
    const { data } = this.state;
    // 校验数据是否包含必要字段
    const hasValidData = data.dates && data.infected && data.recovered && data.deaths;

    const lineChart = hasValidData ? (
      <Line
        data={{
          labels: data.dates, // X轴标签用日期数组
          datasets: [{
            data: data.infected, // 感染数据数组
            label: 'Infected',
            borderColor: '#3333ff',
            fill: true
          }, {
            data: data.recovered, // 康复数据数组
            label: 'Recovered',
            borderColor: 'green',
            backgroundColor: 'rgba(0,255,0,0.5)', // 修正了背景色对应关系
            fill: true
          },{
            data: data.deaths, // 死亡数据数组
            label: 'Deaths',
            borderColor: 'red',
            backgroundColor: 'rgba(255,0,0,0.5)',
            fill: true
          }],
        }}
      />
    ): null;

    return(
      <div>
        {lineChart}
      </div>
    )
  }
}

情况2：接口返回的是数据数组（每个元素为单条记录） #

如果接口返回的是数组形式，每条记录包含日期和各类数据，比如：

[
  { "date": "2020-01-01", "infected": 100, "recovered":20, "deaths":5 },
  { "date": "2020-01-02", "infected":150, "recovered":30, "deaths":7 },
  ...
]

需要先把数组转换成折线图需要的结构，修改render部分即可：

render(){
  const { data } = this.state;
  const hasValidData = Array.isArray(data) && data.length > 0;

  // 转换数据格式，提取对应字段数组
  const labels = hasValidData ? data.map(item => item.date) : [];
  const infectedData = hasValidData ? data.map(item => item.infected) : [];
  const recoveredData = hasValidData ? data.map(item => item.recovered) : [];
  const deathsData = hasValidData ? data.map(item => item.deaths) : [];

  const lineChart = hasValidData ? (
    <Line
      data={{
        labels: labels,
        datasets: [{
          data: infectedData,
          label: 'Infected',
          borderColor: '#3333ff',
          fill: true
        }, {
          data: recoveredData,
          label: 'Recovered',
          borderColor: 'green',
          backgroundColor: 'rgba(0,255,0,0.5)',
          fill: true
        },{
          data: deathsData,
          label: 'Deaths',
          borderColor: 'red',
          backgroundColor: 'rgba(255,0,0,0.5)',
          fill: true
        }],
      }}
    />
  ): null;

  return(
    <div>
      {lineChart}
    </div>
  )
}

额外提醒 #

• 一定要看控制台打印的data结构，根据实际字段名调整代码（比如如果日期字段叫date而非dates，就要改成data.date）。
• 我帮你修正了之前backgroundColor的对应错误，康复数据用绿色背景、死亡数据用红色背景更符合认知。

内容的提问来源于stack exchange，提问作者chuanpham