Javascript 使用Reactjs Chartjs和axios创建图表

嗨，我正在使用Reactjs和Chartjs创建一个动态图表

当我从api响应中绘制json数据时，我收到一个错误。当我添加硬编码数据（如标签[“a”、“b”、“c”]和数据[34243434234]）时，图表组件会呈现，但当我使用从api响应加载数据时，不会呈现

import React, { Component } from 'react';
import './App.css';
import axios from 'axios'
import Chart from './components/Chart';

class App extends Component {
  constructor(){
    super();
    this.state = {
      chartData:{}
    }
  }

  componentDidMount() {
    this.getChartData();
  }

  getChartData() {
    axios.get("http://www.json-generator.com/api/json/get/coXIyroYAy?indent=2").then(res => {
        const coin = res.data;
        let labels = [];
        let data = [];
        coin.forEach(element => {
        labels.push(element.labels);
        data.push(element.data);

          });

       console.log(coin)
        this.setState({
          chartData: {
            labels:labels,
            datasets: [
              {
                label: "Population",
                data: data,
                backgroundColor: [
                  "rgba(255, 99, 132, 0.6)",
                  "rgba(54, 162, 235, 0.6)",
                  "rgba(255, 99, 132, 0.6)"
                ],
              }
            ]
          }
        });
      });
    }

  render(){

        return (
          <div className="App">
          {Object.keys(this.state.chartData).length &&
            <Chart
              chartData={this.state.chartData}
              location="Massachusetts"
              legendPosition="bottom"
            />
          }
          </div>
        );

    }     
}

export default App;

import React，{Component}来自'React'；
导入“/App.css”；
从“axios”导入axios
从“./components/Chart”导入图表；
类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
图表数据：{}
}
}
componentDidMount（）{
这是.getChartData（）；
}
getChartData（）{
axios.get（“http://www.json-generator.com/api/json/get/coXIyroYAy?indent=2）然后（res=>{
const coin=res.data；
让标签=[]；
让数据=[]；
coin.forEach（元素=>{
标签。推送（元素。标签）；
数据推送（element.data）；
});
控制台日志（硬币）
这是我的国家({
图表数据：{
标签：标签，
数据集：[
{
标签：“人口”，
数据：数据，
背景颜色：[
"rgba(255,99,132,0.6),，
“rgba（54162235,0.6）”，
rgba（255、99、132、0.6）
],
}
]
}
});
});
}
render（）{
返回(
{Object.keys（this.state.chartData）.length&&
}
);
}     
}
导出默认应用程序；

您需要对代码进行两次调整

1.在组件安装中加载数据 换行

componentWillMount = () => this.getChartData();

到

一旦组件装载到DOM上，就需要加载数据

2.仅当有图表数据时渲染 有条件地呈现

图表

组件

render() {
  return (
    <div className="App">
      {Object.keys(this.state.chartData).length &&
        <Chart
          chartData={this.state.chartData}
          location="Massachusetts"
          legendPosition="bottom"
        />
       }
    </div>
  );
}

render（）{
返回(
{Object.keys（this.state.chartData）.length&&
}
);
}

只有在从API响应填充了

chartData

之后，才应该呈现

图表。
这就是工作
import React, { Component } from 'react';
import './App.css';
import axios from 'axios'
import Chart from './components/Chart';

class App extends Component {
  constructor(){
    super();
    this.state = {
      chartData:{}
    }
  }

  componentDidMount() {
    this.getChartData();
  }

  getChartData() {
    axios.get("http://www.json-generator.com/api/json/get/coXIyroYAy?indent=2").then(res => {
        const coin = res.data;
        let labels = [];
        let data = [];
        coin.forEach(element => {
        labels.push(element.labels);
        data.push(element.data);

          });

       console.log(coin)
        this.setState({
          chartData: {
            labels:labels,
            datasets: [
              {
                label: "Population",
                data: data,
                backgroundColor: [
                  "rgba(255, 99, 132, 0.6)",
                  "rgba(54, 162, 235, 0.6)",
                  "rgba(255, 99, 132, 0.6)"
                ],
              }
            ]
          }
        });
      });
    }

  render(){

        return (
          <div className="App">
          {Object.keys(this.state.chartData).length &&
            <Chart
              chartData={this.state.chartData}
              location="Massachusetts"
              legendPosition="bottom"
            />
          }
          </div>
        );

    }     
}

export default App;

我在json中的错误
在此处输入代码

 getChartData() {
    axios.get("http://www.json-generator.com/api/json/get/cghIWRNGEO?indent=2").then(res => {
        const coin = res.data;
        let labels = coin.chartData.labels;
        let data = coin.chartData.datasets.data;
        // console.log(data.Object.values(data)[0])
        // data.forEach(element => {
        // data.push(element.data);
        //   });

        this.setState({
          chartData: {
            labels:labels,
            datasets: [
              {
                label: "Population",
                data: data,
                backgroundColor: [
                  "rgba(255, 99, 132, 0.6)",
                  "rgba(54, 162, 235, 0.6)",
                  "rgba(255, 99, 132, 0.6)"
                ],
              }
            ]
          }
        });
      });
    }

可能这与
backgroundColor
只有3个条目，而api提供了5个条目有关。不，我有数组到数组中如何修复“喜欢它不工作”标签：数组（1）0:数组（5）0:a“1:”a“2:”a“3:”a“4:”a“和喜欢它工作”标签：数组（6）0:a“1:”a“2:”a“3:”a“4:”a”