使用React在Chart.js中从Node.js显示Json

Question

我正在使用Node.js从mysql数据库获取JSON对象。比起我想通过Chart.js和React实时显示它，但首先要注意。为了获取json，这是我的代码：（script.js）

const mysql=require('mysql')
const express=require('express')
var app=express();

var mysqlConnection=mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password:'',
    database:'sampledb'
});

mysqlConnection.connect((err)=>{

    if(!err){
        console.log('DB Connection sucessful');
    }else{
        console.log('DB Connection failed \n Error:' +JSON.stringify(err,undefined,2));

    }
});


app.listen(3001,()=>console.log('Express server is running at port: 3001'));


//Get all
app.get('/', (req, res) => {
    mysqlConnection.query('SELECT * FROM mysampletable', (err, rows, fields) => {
        if (!err){
            res.send(rows);//this gives me my JSON
            console.log(rows);
        }

        else
            console.log(err);
    })
});

所以我不明白如何实时获取json对象，我无法通过chart.js和React显示它。例如，我得到了一个小的代码段，用于按以下方式显示数据（App.js）：

import React, {Component} from 'react';
import './App.css';
import Chart from './components/Chart'


class App extends Component{

    constructor() {
        super();
        this.state={
            chartData:{

            }
        }
    }


    componentDidMount() {
        this.getchartData();
    }


    getchartData = () => {
        // Make request to the node backend. You might need to enable CORS in the express app.
        fetch("http://localhost:3001/")
            .then(res => res.json())
            .then((jsonarray) => {
                var labels = jsonarray.map(function(e) {
                    return e.Name;
                });
                var data = jsonarray.map(function(e) {
                    return e.Value;
                });

                console.log(labels,data);

                this.setState({
                    chartData:{
                        labels:labels,
                        datasets:[
                            {
                                label:'Popuplation',

                                data:data
                            }
                        ]
                    }
                });
            });
    };   

    render(){
        return(
            <div className="App">
                <header className="App-header">

                    <Chart chartData={this.state.chartData} location="Test" legendPosition="bottom"/>
                </header>
            </div>

        );
    }
}

export default App;

此行console.log(labels,data);在webbrowser（Firefox控制台）中提供以下输出：

Array(4) [ "Test", "Testtwo", "Test", "Testtwo" ]
 Array(4) [ 5, 10, 5, 10 ]

在Microsoft Edge上，我收到以下响应：

Test,Testtwo,Test,Testtwo 5,10,5,10

为了完整起见，我正在工作的Chart.js女巫显示了图表：

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


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

    static defaultProps={
        displayTitle:true,
        displayLegend:true,
        legendPosition:'right',
        location:'City'


    }

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

                <Line
                    data={this.state.chartData}
                    options={{
                        title:{
                            display:this.props.displayTitle,
                            text: 'Largest Cities in ' + this.props.location,
                            fontsize:25
                        },
                        legend:{
                            display:this.props.displayLegend,
                            position:this.props.legendPosition
                        }

                    }}
                />
            </div>
        );
    }

}

export default Chart;

感谢您的帮助

Answer 1

您需要使用fetch对后端进行api调用。

getchartData = () => {
    // Make request to the node backend. You might need to enable CORS in the express app.
    fetch("http://localhost:3000/") 
    .then(res => res.json())
    .then((jsonarray) => {
        var labels = jsonarray.map(function(e) {
            return e.Name;
        });
        var data = jsonarray.map(function(e) {
            return e.Value;
        });

        this.setState({
            chartData:{
                labels:labels,
                datasets:[
                    {
                        label:'Popuplation',

                        data:data
                    }
                ]
            }
        });
    });
}

也可以在不需要的情况下删除Chart.js中的状态并直接使用道具。

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

                <Line
                    data={this.props.chartData}


                ...

工作Stackblitz示例