Angular 中的 Highcharts 加载系列数据问题

Question

我想显示 ECG 信号。我的数据数组：[ [time,value], [time2, value2] etc... ]，但这不是必需的数组。问题是我无法在 setInterval 中访问我的数据数组，所以我的图表选项：

   this.chartOptions = {
      series: [
        {
          type: 'line',
          data: this.data,
        },
      ],
      chart: {
        events: {
          load: function () {
            var series = this.series[0];
            setInterval(function () {
              this.data.push(this.addMoreData()); //push new [time,value]
              const time = this.data[this.data.length - 1][0]; // get new time
              const value = this.data[this.data.length - 1][1]; // get new value
              var x = time,
                y = value;
              series.addPoint([x, y], true, true);
            }, 1000);
          },
        },
      }
    };

我收到此错误：“类型错误：无法读取未定义的属性 'push'”，因为无法访问数据数组。但是如果我将 function () {} 更改为 () => {} 并且在这种情况下也将 this.series[0] 更改为 this.chartOptions.series[0]:

chart: {
        events: {
          load:  () => { // change
            var series = this.chartOptions.series[0]; // change
            setInterval( () => { // change
              this.data.push(this.addMoreData()); //push new [time,value]
              const time = this.data[this.data.length - 1][0]; // get new time
              const value = this.data[this.data.length - 1][1]; // get new value
              var x = time,
                y = value;
              series.addPoint([x, y], true, true);
            }, 1000);
          },
        },
      }

在这种情况下，我访问了数组但出现错误：TypeError: series.addPoint 不是函数。那么我该如何更新我的系列呢？这是我的完整代码：https://stackblitz.com/edit/highcharts-ecg

Answer 1

您可以使用 IIFE 在更高范围内存储对组件的引用，并在返回的函数中使用 'double' 上下文。

示例：

    events: {
      load: (function(component){
        return function(){
          console.log(this, component); // chart, component
        }
      })(this)
    }

现场演示： https://stackblitz.com/edit/highcharts-ecg-pqkkb9

Angular 中的 Highcharts 加载系列数据问题

Highcharts load series data problem in Angular

highcharts

highcharts-ng

angular