Question

使用chartjs“实时”绘制图形时遇到了一些问题。

上下文如下： 我通过与websocket的连接实时接收数据。频率约为每200ms。这样的想法是能够“实时”在图表上显示这些数据。

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

问题： 通过遵循这个sample（版本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' }]，此代码将起作用

Angular6 Chart.js插件流onRefresh（）不起作用

1 个答案: