Angular6 chartjs-plugin-streaming onRefresh() 不起作用

Question

我在使用 chartjs "实时"绘制图形时遇到了一些问题。

上下文如下：我通过连接到 websocket 实时接收数据。频率大约为每200ms一次。 然后的想法是能够"实时"在图形上显示这些数据。

为此，我决定将chartjs与一个名为chartjs-streaming的插件一起使用，我可以将其与Angular一起使用。

问题：通过遵循此示例(版本 angular2 +(，我设法显示空图形，但函数 onRefresh (( 没有执行，因此我的图形始终为空......

我的组件 html

<div style="display: block">
  <canvas baseChart [chartType]="'line'" [datasets]="datasets" [options]="options">
  </canvas>
</div>

我的组件 ts

  ...
  import 'chartjs-plugin-streaming';
  ...
  datasets: any[] = [{ data: [] }, { data: [] }];
  options: any = {
    scales: {
      xAxes: [{ type: 'time' }]
    },
    plugins: {
      streaming: {
        onRefresh: function (chart: any) {
          alert("REFRESH");
          console.log("test");
          chart.data.datasets.forEach(function (dataset: any) {
            dataset.data.push({
              x: Date.now(),
              y: Math.random()
            });
          });
        },
      }
    }

Package.json

"@types/chart.js": "^2.7.42",
"angular-chart.js": "^1.1.1",
"chart.js": "^2.7.3",
"chartjs-plugin-streaming": "^1.7.1",
"moment": "^2.24.0",
"ng2-charts": "^1.6.0",

Answer 1

在我的环境中，如果将xAxes: [{ type: 'time' }]替换为xAxes: [{ type: 'realtime' }]，则此代码有效