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

Question

当这样通过时

Error: "realtime" is not a registered scale

刷新功能：

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: {
...
}

我不再收到错误消息，但它根本不显示 x 轴，虽然对象形式是最新的chart.js 3.0.0

Answer 1

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

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

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

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

Streaming Real-time data with react and chartjs-plugin-streaming paused

reactjs

graph

chart.js

react-chartjs-2