javascript 如何在 react-chartjs-2 中更新图表？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46053257/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to Update chart in react-chartjs-2?
提问by
I call the update() function, but it does not work.
我调用了 update() 函数，但它不起作用。
TypeError: line.update is not a function.
类型错误：line.update 不是函数。
Why is update() not a function?
为什么 update() 不是函数？
I have seen this example on http://jsfiddle.net/zpnx8ppb/26/where the update function does work
我在http://jsfiddle.net/zpnx8ppb/26/上看到了这个例子，其中更新功能确实有效
Here is my code:
这是我的代码：
import React, { Component } from 'react';
import { Line } from 'react-chartjs-2';
import Chart from 'chart.js';
const line = {
labels: [],
datasets: [
{
label: 'My First dataset',
fill: false,
data: []
}
]
};
setInterval(function(){
line.labels.push(Math.floor(Math.random() * 100));
line.datasets[0].data.push(Math.floor(Math.random() * 100));
line.update();
}, 5000);
class LineChart extends Component {
render() {
return (
<div className="chart">
<Line
data={this.state}
height={5}
width={20}
/>
</div>
)
}
}
export default LineChart;
采纳答案by DarkMukke
You need to update the chart, line is just a config setting on the chart, this update needs to flow back to the handler
你需要更新图表，线只是图表上的一个配置设置，这个更新需要流回处理程序
To set you on the right path, here is an example of what I mean
为了让你走上正确的道路，这是我的意思的一个例子
var config = {};
class Chart extends Component {
constructor() {
super();
this.ctx = document.getElementById(this._rootNodeID).getContext("2d");
this.chart = new Chart(ctx, config);
}
changeHandler(value) {
this.chart.update();
}
render() {
return (
<canvas id={this._rootNodeID}>
<LineChart value={this.state.value}
config={this.config}
onChange={this.changeHandler}/>
</canvas>
);
}
}
const line = {
labels: [],
datasets: [
{
label: 'My First dataset',
fill: false,
data: []
}
]
};
class LineChart extends Component {
constructor(props) {
super(props);
this.props.config = line;
setInterval(function(){
this.props.config.labels.push(Math.floor(Math.random() * 100));
this.props.config.datasets[0].data.push(Math.floor(Math.random() * 100));
this.props.changeHandler();
}, 5000);
}
render() {
return (
<div className="chart">
<Line
data={this.state}
height={5}
width={20}
/>
</div>
)
}
}
export default Chart;
export default LineChart;
回答by Dhruv Verma
So according to https://www.npmjs.com/package/react-chartjs-2
所以根据https://www.npmjs.com/package/react-chartjs-2
One can access the chart reference using a ref such as
可以使用 ref 访问图表参考，例如
chartReference = {};
componentDidMount() {
console.log(this.chartReference); // returns a Chart.js instance reference
}
render() {
return (<Doughnut ref={(reference) => this.chartReference = reference } data={data} />)
}
So what you could do is put a ref in your Chart and access it wherever you like.
所以你可以做的是在你的 Chart 中放置一个 ref 并在你喜欢的任何地方访问它。
<Line
data={this.state}
height={5}
width={20}
ref = {(reference) => this.reference = reference}
/>
In the method you wish to cause the update you could access this reference and it's chartInstance and call the update function on this instance.
在您希望引起更新的方法中，您可以访问此引用及其 chartInstance 并在此实例上调用更新函数。
let lineChart = this.reference.chartInstance
lineChart.update();
回答by dmitri
I recommend do not use setInterval, try to pas instance of chart to the dispatcher etc, and update it when request is done
我建议不要使用 setInterval，尝试将图表实例传递给调度程序等，并在请求完成时更新它
ChartJS.data = response.data;
ChartJS.update();
