Angular6 chartjs-plugin-streaming onRefresh () не работает - PullRequest
Новая
       8

Angular6 chartjs-plugin-streaming onRefresh () не работает

0 голосов
/ 07 февраля 2019

У меня возникла проблема с построением графика в «реальном времени» с помощью chartjs.

Контекст выглядит следующим образом: Я получаю данные в режиме реального времени через соединение с websocket.Частота примерно каждые 200 мс.идея состоит в том, чтобы иметь возможность отображать эти данные на графике в «реальном времени».

Для этого я решил использовать chartjs с плагином под названием chartjs-streaming , который я могу использовать сAngular.

Проблема: Следуя этому 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",

1 Ответ

0 голосов
/ 10 апреля 2019

В моей среде этот код работал, если xAxes: [{ type: 'time' }] был заменен на xAxes: [{ type: 'realtime' }]

...