Question

我对与数据 api的获取有关，在其中我必须以chartjs或数据可视化的格式表示数据。我正在尝试使用此api作为以图表格式表示数据的源，以准备好我的仪表板，该仪表板已为数据分析提供了准备。请帮助我，我知道我会落后一小部分。

App.js

<?xml version="1.0" encoding="UTF-8"?>
<map
      xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
            http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
<!-- created with Free Online Sitemap Generator www.xml-sitemaps.com -->

    <ahmed><mohamed>stackover flow</mohamed></ahmed>
    <ahmed><mohamed>stackover flow</mohamed></ahmed>
    <ahmed><mohamed>stackover flow</mohamed></ahmed>

    </map>

chart.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;

Answer 1

如果您想将新的自定义方法继承给对象的实例，则需要在原型中对其进行定义，因此我们不能使用箭头来代替Date.formatMMDDYYYY = () => {...}使用此Date.prototype.formatMMDDYYYY = function{...}函数，因为这样我们将无法获得this的正确值。同样，您也可以使用一个普通的函数来接收Date并在需要时调用它，这样更加简便和安全。
关于方法返回的格式字符串中顺序的小错误，而不是this.getDate() + 1 + "/" + this.getMonth() +...，它应该是this.getMonth() + 1 + "/" + this.getDate() +...
您正在尝试从results获取数据，但是results.data中没有数据，因此循环应为results.data.forEach(packet => {...}

此处固定代码：https://codesandbox.io/s/p3q2pz2l8x

使用ChartJS时休息Api数据获取错误

1 个答案: