3

我正在为我的项目使用 Chartjs。我使用的不同版本是：ChartJS 2.9.3、Chartjs-plugin-streaming 1.8.0、moment.js 2.24.0、chartjs-adapter-moment 0.1.1。我绘制了一个实时图表，每秒都会收到此警告，这会非常快地填充内存。

时间尺度：不推荐使用“time.format”。请改用“time.parser”

我的代码是：

private chartPlotting() {
  this.Linecap.push(new Chart('canvas', {
    type: 'line',
    data: {
      datasets: [{
          label: 'Flow',
          lineTension: 0,
          data: [],
          borderColor: '#3cb371',
          fill: false
        },
        {
          label: 'Height',
          lineTension: 0,
          data: [],
          borderColor: '#FF0000',
          fill: false
        }
      ]
    },
    options: {
      responsive: true,
      scales: {
        xAxes: [{
          type: 'realtime',
          time: {
            parser: 'false'
          },
          display: true
        }],
        yAxes: [{
          display: true,
          ticks: {
            beginAtZero: true,
            maxTicksLimit: 10,
            stepSize: 5,
            max: 500
          }
        }],
      },
      plugins: {
        streaming: {
          duration: 300000,
          refresh: 1000,
          delay: 2000,
          pause: false,
          ttl: undefined,
          frameRate: 48,

          onRefresh: function(Linecap) {
            ///var data = []
            var xhr = new XMLHttpRequest();
            xhr.open('GET', url);
            xhr.onload = function() {
              var data = JSON.parse(xhr.responseText);
              Linecap.data.datasets[0].data.push({
                x: Date.now(),
                y: data[0]["yrData"]
              });
              Linecap.data.datasets[1].data.push({
                x: Date.now(),
                y: data[0]["Height"]
              });
            };
          }
        }
      }
    }
  }));
}

我试图找出原因并知道可能在下一个版本的 chartJS 即 3.0.0 中这个问题将被删除。有什么办法可以解决 2.9.3 中的这个错误吗？

4

3 回答 3

2

问题是由于您使用的不同库的版本不兼容。

例如， chartjs-plugin-streaming的文档说明如下：

1.8 版需要 Chart.js 2.7.x 或 2.8.x。

要摆脱这个问题，你有两个选择。

  1. 摆脱 chartjs-plugin-streaming
  2. 将 Chart.js 2.9.3 降级到 2.8.0

更新

对于 Angular 8，我建议使用ng2-charts基于Chart.js. 此外，您应该自己摆脱chartjs-plugin-streaming并实现相关功能。

请看下面的StackBlitz

于 2020-04-19T05:20:12.407 回答
0

此问题已在 chartjs-plugin-streaming 1.9.0 中修复。此外，最新版本2.0.0-beta.3支持Chart.js 3.x。

于 2021-05-27T07:41:03.147 回答
0

6 个月后，它仍然是他们回购的公开请求。您可以在此处查看讨论和长期未决的修复。

如果您不想降级或更改库，您可以自己在本地使用修复程序，或者使用厌倦了等待的贡献者上传的 npm 包之一。我正在使用@taeuk-gang/chartjs-plugin-streaming.

于 2020-11-13T14:13:10.093 回答