Question

我正在使用带有ApexCharts和Axios的Reactjs来填充折线图中的数据。

当我从API响应中绘制JSON数据时，我收到一个错误。当我手动添加数据时，Chart组件会呈现，但是当我用于从API响应中加载数据时，Chart组件不会呈现。抱歉代码中的错误或冗余，我是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;

使用Reactjs，ApexChart和axios创建图表

0 个答案: