React Chart.js 中数据更改后图表未更新

Question

我用 React Chart.js 制作了一个折线图。该图表工作得很好，但是当我尝试更新图表时，它没有更新。虽然我可以更改图表的数据。

我尝试更新图例上的图表。我浏览了一些教程，看看更新功能是否对我有帮助。但是当我尝试使用我的线路更新功能时，它显示“未定义更新功能”的错误。

import React from 'react';

import {Line} from 'react-chartjs-2';


const checkinsData={
    labels:['4 P.M','5 P.M','6 P.M','7 P.M','8 P.M','9 P.M','10 P.M','11 P.M','12 A.M','1 A.M','2 A.M','3 A.M','4 A.M'],
    datasets:[
        {
        label:"Day",
        backgroundColor:"blue",
        borderColor:'#333',
        borderWidth:2,
        lineTension:0.1,
        fill:true,
        data:[4,5,6,7,8,9,10,11,12,1,2,3,4]

        }


    ]
}



class CheckinGraph extends React.Component{
    constructor(props)
    {
        super(props)
        this.state={

        }
    }
    
    legendClick=function() {
        console.log("Legend click"+ checkinsData.labels);
        checkinsData.datasets.data=[100,120,200,25,56,78,80,90,70,100];
    }
    render()
    {
        return(
            <div className="col-md-12  default-shadow bg-white pd-30-0 border-radius-10 align-center">
            <Line
            redraw
        data={checkinsData}
        options={
            {
                title:{
                    text:'Total Check-ins',
                    fontSize:20,
                    display:true
                },
                legend:{
                    display:true,
                    position:'top',
                    onClick:this.legendClick
                }
            }
        }
        />
            </div>

        )
    }
}

export default CheckinGraph;

Answer 1

当您的组件获得新的道具或状态将更新时，您的图表将更新/重新渲染。由于您要更新的图表数据不处于组件的状态，因此组件不知道更改，并且不会重新渲染您的图表。您需要告诉组件某些内容已发生变化，现在需要重新渲染。这可以通过以下方式实现： 1. 在状态中添加数据，然后单击以正确的方式更新数据（不改变状态） 2.在状态中添加随机密钥，并在更新非状态数据后更新状态密钥

state = { key: Date.now() }


legendClick=function() {
        console.log("Legend click"+ checkinsData.labels);
        checkinsData.datasets[0].data=[100,120,200,25,56,78,80,90,70,100];
        this.setState({ key: Date.now() });
    }