setData ist keine Funktion + Angular2-Highcharts

Question

I wurde folgende einfache Beispiel Daten Highcharts einzustellen unter Verwendung dieses Moduls Angular2-Highcharts

Wie in der folgenden example gezeigt, haben i klein gemacht zwicken Daten dynamisch zu Highcharts eingestellt. Im Folgenden finden Sie den Code-Schnipsel:

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 für das gleiche.

Fehler:

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

Meine Beobachtung:

Was ist mit diesem Fehler offensichtlich ist, ist es keine setData Funktion im series Array in dem ersten Element. Alternate Ansatz dieses Problem zu beheben ist, this.options mit leerem Objekt mit data Eigenschaft Initialisierung:

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

Dies ist sehr grobe Art und Weise, wie ich das gleiche für 50 Elemente in this.options.series tun müssen, wenn ich sie kommen sehe dynamisch

Gibt es einen effizienten und besseren Ansatz, um diesen Fehler zu beheben?

PS: Bin neu zu Highcharts, also bitte ertragen Sie mit mir, wenn ich etwas völlig falsches auf Grundlevel tue.

Answer 1

setData modifiziert eine Serie, die bereits existiert - wenn Sie die Serie nicht haben, können Sie sie nicht ändern.

Wenn Sie eine neue Serie hinzufügen möchten, sollten Sie chart.addSeries() Methode wie folgt verwenden:

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

Beispiel: http://plnkr.co/edit/61IgH8t3YKjtIOgzpUPB?p=preview