Streaming实时数据与react和chartjs-plugin-streaming暂停

Question

像这样传递

错误:"realtime"不是已注册的刻度

刷新功能:

onRefresh=(chart) =>{
var now = Date.now();
chart.data.datasets[0].data.push({
x: now,
y: this.state.realdata.sitting
});
}

组件:

<Line
data={{
datasets: [
{
label: "Customers",
borderColor: "rgb(54,162, 235)",
backgroundColor: "rgba(54,162, 235, 0.5)",
lineTension: 0,
borderDash: [8, 4],
data: this.state.livePeopleSitting,
},
],
}}
options={{
scales: {
x: {
type: "realtime",
realtime: {
onRefresh: this.onRefresh,
delay: 4000,
duration: 160000,
refresh: 3000,
},
},
y: {
title: {
display: true,
text: "people seated",
},
},
},
}}
/>

传入尺度后为

x: [{
...
}]

不是

x: {
...
}

I不再得到错误，但它根本不显示x轴，虽然object form是最新的chart.js 3.0.0

Answer 1

chart.js不再抛出数组错误的原因是chart.js忽略了这些选项。

正如这里的文档中所述，您需要导入和注册您使用的所有内容。默认情况下，react chartjs会从chart.js中导入和注册所有内容，但它不能自动注册任何插件内容，因为它不知道你正在使用它们。

所以要解决这个问题，你还需要像这样注册秤:import { StreamingPlugin, RealtimeScale } from 'chartjs-plugin-streaming';。之后，您可以像这样注册它:Chart.register(StreamingPlugin, RealtimeScale);