React chartjs 中的数据更改后图表未更新
Chart not updating after data change in react chartjs
我用react chartjs做了一个折线图。该图表运行良好,但当我尝试更新图表时,它没有得到更新。尽管我能够更改图表的数据。请帮忙。
我尝试在点击图例时更新图表。我浏览了一些教程,发现更新功能对我有帮助。但是当我用我的行尝试更新功能时,它显示 'undefined update function'.
错误
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;
当您的组件将获得新道具或更新状态时,您的图表将 update/re-render。由于您正在更新的图表数据不在组件的状态下,因此组件不知道更改并且它不会重新呈现您的图表。您需要告诉组件发生了一些变化,现在是重新渲染的时候了。这可以通过以下方式实现:
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() });
}
我用react chartjs做了一个折线图。该图表运行良好,但当我尝试更新图表时,它没有得到更新。尽管我能够更改图表的数据。请帮忙。 我尝试在点击图例时更新图表。我浏览了一些教程,发现更新功能对我有帮助。但是当我用我的行尝试更新功能时,它显示 'undefined update function'.
错误
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;
当您的组件将获得新道具或更新状态时,您的图表将 update/re-render。由于您正在更新的图表数据不在组件的状态下,因此组件不知道更改并且它不会重新呈现您的图表。您需要告诉组件发生了一些变化,现在是重新渲染的时候了。这可以通过以下方式实现: 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() });
}