setData 不是函数 + Angular2-Highcharts

Question

我按照简单的示例使用此 Angular2-Highcharts 模块将数据设置到 Highcharts

如下面的 example 所示，我做了一些小调整以动态设置数据到 Highcharts。以下是代码片段：

constructor() {
    this.options = {
      chart: { type: 'spline' },
      title: { text : 'dynamic data example'},
      series: [{ data: [2,3,5,8,13] }]
    };

    setTimeout(() => {
      this.chart.series[0].setData([21,31,51,81,13]);
    }, 3000);

    setTimeout(() => {
      this.chart.series.push({data:[]});
      this.chart.series[1].setData([100,200,300]);
    }, 5000);
}

Plunker link 相同.

错误：

ERROR TypeError: _this.chart.series[1].setData is not a function
    at eval (run.plnkr.co/QZBbWi3BVy3DeOzT/app/main.ts!transpiled:28)

我的观察：

该错误的明显之处在于第一个元素的 series 数组中没有 setData 函数。解决这个问题的另一种方法是，用空对象初始化 this.options data 属性 :

constructor() {
        this.options = {
          chart: { type: 'spline' },
          title: { text : 'dynamic data example'},
          series: [{ data: [2,3,5,8,13] },
                   { data: [] },
                  ]
        };
}

这是非常粗略的方法，因为如果我看到它们动态地出现，我需要对 this.options.series 中的 50 个元素执行相同的操作

是否有任何有效且更好的方法来解决此错误？

PS : 我是 Highcharts 的新手，所以如果我在基本层面上做错了什么，请多多包涵。

Answer 1

setData 修改已经存在的系列 - 如果您没有该系列，则无法修改它。

如果你想添加一个新的系列，你应该使用这样的chart.addSeries()方法：

   setTimeout(() => {
      this.chart.addSeries({
          data: [21,31,51,81,13]
      });
    }, 5000);

示例：http://plnkr.co/edit/61IgH8t3YKjtIOgzpUPB?p=preview

setData 不是函数 + Angular2-Highcharts

setData is not a function + Angular2-Highcharts

javascript

angular

highcharts

angular2-highcharts