如何在 angular 5/6 中刷新或重新加载 highchart 中的数据

Question

我在 angular6 中使用 highcharts。我想使用 setinterval 重新加载数据。我找不到合适的解决方案。

Chartcomponent.ts

import { Chart, Highcharts } from 'angular-highcharts';

ngOnInit() {
  this.loaded = false;
  this.rowData = [[0, 2], [1, 2], [2, 3], [4, 4], [4, 5]];
  this.loadChart(this.data.data);
}

loadChart(data): any {
  this.highChartsOptions = {
    chart: { type: this.graphType },
    title: { text: '' },
    legend: { enabled: false },
    plotOptions: { series: { dataLabels: { enabled: true } } },
    series: [{ name: 'random series', data: data }]
  };
  this.handleIntervals();
}

handleIntervals(): void {
  setInterval(() => {
      console.log(this.rowData[this.rowData.length - 1]);
      let rowY = this.rowData[this.rowData.length - 1];
      let y = rowY[0];
      this.rowData.push([parseInt(y) + 1, 10]);
      // this.highChartsOptions.series[0].data = this.rowData;
      // this.loadChart( this.rowData);
  }, 5000);
  // const subscribe = source.subscribe(this.loadChart());
}

Answer 1

您需要从您在 setInterval 中获得 this.data.data 的位置调用服务。

Angular-当 this.highChartsOptions.series 中的数据更新时，highcharts 会自动刷新。

Answer 2

如果要添加新系列，请使用

 this.chart.addSerie({})

如果要更新数据

 this.chart.series[0].setData(rowData);

检查文档：https://www.npmjs.com/package/angular-highcharts 示例：https://stackblitz.com/edit/angular-9nkrgd

Answer 3

最后我解决了这个问题。我认为这不是正确的解决方案，但它工作正常。 https://stackblitz.com/edit/highchart-angular-reload-data

如何在 angular 5/6 中刷新或重新加载 highchart 中的数据

How can refresh or reload data in highchart in angular 5/6

angular

angular2-highcharts