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

Question

我想显示心电图信号。我的数据数组：[ [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: Cannot read property 'push' of undefined' 因为无法访问数据数组。 但是，如果我将 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 is not a function。 那么如何更新我的系列？ 这是我的完整代码：https://stackblitz.com/edit/highcharts-ecg

Answer 1

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

例子：

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

---

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