Javascript 使用chartjs时Rest Api数据获取错误

我有一个问题与api的数据获取有关，在这个api中，我必须以chartjs或数据可视化的格式表示数据。 我正试图使用这个api作为源，以图表格式表示数据，为我的仪表板做好准备，仪表板正在为数据分析透视图做好准备。请帮帮我，我知道我有点落后了

App.js

import React, { Component } from "react";
import axios from "axios";

import Chart from "./chart";

class App extends Component {
 constructor() {
 super();

 this.state = {
   labels: [],
   data: []
  };
}

 componentDidMount() {
  this.getChartData();
}

getChartData() {
 Date.formatMMDDYYYY = () => {
   return (
     this.getDate() + 1 + "/" + this.getMonth() + "/" + 
        this.getFullYear()
   );
 };

 axios
   .get("https://cors-anywhere.herokuapp.com/https://api.myjson.com/bins/chnmi"
  )
  .then(results => {
    // Split timestamp and data into separate arrays
     const labels = [];
     const data = [];
     results.forEach(packet => {
       labels.push(new Date(packet.updated).formatMMDDYYYY());
       data.push(parseFloat(packet.users));
     });

     this.setState({ data, labels });
     })
     .catch(error => {
      console.log(error);
     });
  }

  render() {
    return (
      <div>
       <Chart labels={this.state.labels} data={this.state.data} />
      </div>
    );
  }
 }

 export default App;

import React，{Component}来自“React”；
从“axios”导入axios；
从“/Chart”导入图表；
类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
标签：[]，
数据：[]
};
}
componentDidMount（）{
这是.getChartData（）；
}
getChartData（）{
Date.formatMMDDYYYY=（）=>{
返回(
this.getDate（）+1+“/”+this.getMonth（）+“/”+
这个。getFullYear（）
);
};
axios
.get（“https://cors-anywhere.herokuapp.com/https://api.myjson.com/bins/chnmi"
)
。然后（结果=>{
//将时间戳和数据拆分为单独的数组
常量标签=[]；
常量数据=[]；
results.forEach（数据包=>{
labels.push（新日期（packet.updated）.formatMMDDYYYY（））；
data.push（parseFloat（packet.users））；
});
this.setState（{data，labels}）；
})
.catch（错误=>{
console.log（错误）；
});
}
render（）{
返回(
);
}
}
导出默认应用程序；

chart.js

 import React, { Component } from 'react';
 import {Bar} from 'react-chartjs-2';

 class Chart extends Component {
   render() {
     const chartData = {
        labels: this.props.labels,
        datasets: [
                    {
                      data: this.props.data,
                      backgroundColor: 'rgba(255, 99, 132, 0.6)',
                     }
                  ]
               }
        return (
           <div className="chart">
             <Bar 
                data={chartData}
                options={{
                    title: {
                        display: true,
                        text: 'Largest cities in Delhi',
                        fontSize: 25
                    },
                    legend: {
                        display: true,
                        position: 'right'
                     }
                   }}
                />
            </div>
          );
        }
      }

      export default Chart;

import React，{Component}来自'React'；
从'react-chartjs-2'导入{Bar}；
类图扩展组件{
render（）{
常量图表数据={
标签：this.props.labels，
数据集：[
{
数据：this.props.data，
背景颜色：“rgba（255,99,132,0.6）”，
}
]
}
返回(
);
}
}
导出默认图表；

如果要将新的自定义方法继承到对象的实例，则需要在原型中定义它们，因此，不要使用此

Date.formatMMDDYYYY=（）=>{…}

而使用此

Date.prototype.formatmmddyyyyy=函数{…}

，我们不能使用箭头函数，因为这样我们将无法获得此的正确值。此外，您还可以使用一个普通函数来接收日期并在需要时调用它，这种方法更简单、更安全

关于方法返回的格式字符串中的顺序的小错误，而不是

this.getDate（）+1+“/”+this.getMonth（）+…

它应该是

this.getMonth（）+1+“/”+this.getDate（）+…

您正试图从

结果

中获取数据，但数据不在那里，它位于

结果.data

中，因此循环应为

结果.data.forEach（数据包=>{…}

---

修复了此处的代码：

您遇到了什么错误？我无法以chartjs格式显示数据。我想表示数据。您可以查看此链接了解更多信息：不客气，如果您没有更多疑问，您可以将答案标记为已接受吗？谢谢：）