Ошибка загрузки данных Api при использовании chartjs - PullRequest
Новая
       10

Ошибка загрузки данных Api при использовании chartjs

0 голосов
/ 24 февраля 2019

У меня есть вопрос, связанный с данными Извлечение API, в котором я должен представлять данные в диаграмме или в формате визуализации данных.Я пытаюсь использовать этот API-интерфейс в качестве источника для представления данных в формате диаграмм, чтобы подготовить свою панель инструментов, готовую к анализу данных.Пожалуйста, помогите мне, я знаю, что я немного отстаю.

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

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

1 Ответ

0 голосов
/ 25 февраля 2019
  1. Если вы хотите наследовать новый пользовательский метод для экземпляров объекта, вам нужно определить их в прототипе, поэтому вместо Date.formatMMDDYYYY = () => {...} используйте это Date.prototype.formatMMDDYYYY = function{...}, мы не можем использовать функции стрелокпотому что тогда мы не получим правильные значения для this.Также вы могли бы вместо этого использовать обычную функцию, которая получала бы Date и вызывал ее всякий раз, когда вам это нужно, этот способ был более простым и безопасным.
  2. Небольшая ошибка порядка в строке формата, которую возвращает метод, вместо этогоиз this.getDate() + 1 + "/" + this.getMonth() +... это должно быть this.getMonth() + 1 + "/" + this.getDate() +...
  3. Вы пытаетесь получить данные из results, но данных там нет, это results.data, поэтому цикл должен быть results.data.forEach(packet => {...}

Фиксированный код здесь: https://codesandbox.io/s/p3q2pz2l8x

...