使用Reactjs Chartjs和axios创建Chart

Question

嗨，我正在将Reactjs与Chartjs一起使用来创建动态图表

当我从api响应中绘制json数据时，我收到一个错误。当我添加诸如标签[“ a”，“ b”，“ c”]和数据[3424,34324,34234]的硬编码数据时，Chart组件将呈现，但是当我使用从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;

Answer 1

您需要在代码中进行两次调整。

1。将数据加载到componentDidMount

更改此行

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

到

componentDidMount() {
  this.getChartData();
}

将组件安装到DOM后，您需要加载数据。

2。仅在拥有图表数据时渲染

有条件地渲染Chart组件。

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

仅在从API响应中填充Chart后，才应渲染chartData。

Answer 2

这是工作 我在json enter code here

中的错误

 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)"
                ],
              }
            ]
          }
        });
      });
    }