Создать диаграмму, используя Reactjs, ApexChart и axios - PullRequest
Новая
       11

Создать диаграмму, используя Reactjs, ApexChart и axios

0 голосов
/ 17 апреля 2020

Я использую Reactjs с ApexCharts и Ax ios для заполнения данных в линейном графике.

Я получаю ошибку, когда строю данные JSON из ответа API. Компонент диаграммы отображается при ручном добавлении данных, но не при загрузке данных из ответа API. Извините за ошибки или избыточность в коде, я новичок в мире программирования javascript.

Ошибка: диаграмма не отображается изображение 

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

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

    componentDidMount(){
        this.getChartData();
    }


    getChartData(){

        var data_axios;

        //capturing the data from route
        // JSON data in route: [{"_id":"5e99c761f70bd25cccd6b3a8","Date":"21/04/2020 07:15:20","y1":"2100","y2":"2100","__v":0},{"_id":"5e8c865fcf1a8a4cf45d4a13","Date":"07/04/2020 14:20:59","y1":"1000","y2":"550","__v":0},{"_id":"5e8c865fcf1a8a4ce90d4a25","Date":"02/04/2020 09:00:02","y1":"300","y2":"550","__v":0}]
       axios.get("http://localhost:3000/person").then(res => {

            const value = res.data;
            let new_array = [];

           value.map(function(i){
                new_array.push({
                    "Date": i.Date,
                    "y1": i.y1,
                });
            })

            let y_array_1 = new_array.map(a => a.y1);
            let x_array_1 = new_array.map(a => a.Date);


            let y_array_2 = y_array_1.map(Number);

            this.setState({
                chartData:{
                    labels: x_array_2,
                    datasets: [
                        {
                            label: "Data Y1",
                            data: y_array_2,
                        }
                    ]
                }
            });
        });
    }



    render(){
        return(
            <div className = "chart">

                <Line
                    data = {this.state.chartData}
                    width = {1200}
                    height = {600}
                    options={{
                        title:{
                            display: true,
                            text: 'Data Y1',
                            fontSize: 10
                        },
                        legend:{
                            display:true,
                            position: 'top'
                        }
                    }}
                 />

            </div>
        )
    }
}

export default Chart;
...