0

我正在按照简单的示例使用这个Angular2-Highcharts模块将数据设置为 Highcharts

如以下示例所示，我做了一些小调整以将数据动态设置为 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 链接。

错误 ： 

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 的新手，所以如果我在基本级别上做错了什么，请多多包涵。

4

1 回答 1

3

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

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

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

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

于 2017-07-12T08:55:13.720 回答