使用 react 和 chartjs-plugin-streaming 暂停流式传输实时数据

如何解决使用 react 和 chartjs-plugin-streaming 暂停流式传输实时数据

当这样过去时 错误：“实时”不是注册比例

刷新功能

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

组件

                    <Line
                      data={{
                        datasets: [
                          {
                            label: "Costumers",borderColor: "rgb(54,162,235)",backgroundColor: "rgba(54,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: {
...
}

它停止给出错误但根本不显示 x 轴， 虽然对象形式是最新的 chart.js 3.0.0

解决方法

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

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

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