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

Question

当这样通过时

错误：“实时”不是注册比例

刷新功能：

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);