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

问题描述

我想显示心电图信号。我的数据数组:[[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);
          },}
    };

我收到此错误:'TypeError: 无法读取未定义的属性 '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,}

在这种情况下,我访问了数组但错误:TypeError: series.addPoint is not a function。 那么如何更新我的系列呢? 这是我的完整代码https://stackblitz.com/edit/highcharts-ecg

解决方法

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

示例:

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

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