ng2-highcharts chart update nach dem laden

Question

Ich benutze angular 2, firebase und ng2-highcharts.

ich zuweisen Daten, nachdem ich sie von Feuerbasis erhalten wie folgt:

this.items = af.database.list('/items'); 
this.optionsAsync = this.items.map(data => { 
    this.options.series[0].data = data.map(item => ([item.x, item.y])); 
    return this.options; 
}); 

Dann meiner Ansicht nach Vorlage ich habe:

<div [ng2-highcharts]="optionsAsync | async"></div> 

Dies ist auf den ersten Last adaequat. Aber leider, wenn neue Daten empfangen werden, wird das Diagramm nicht aktualisiert. Irgendeine Idee ?

Answer 1

fand ich eine Lösung, die durch Referenzierung highcharts Komponente mit @ViewChild wie so:

in Komponentenklasse:

import { ViewChild, Component } from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: 'app.component.html', 
    styleUrls: ['app.component.css'], 
    directives: [Ng2Highcharts] 
}) 
export class AppComponent { 
    @ViewChild(Ng2Highcharts) 
    chartElement: Ng2Highcharts; 

    private chartData = { 
     chart: { 
      zoomType: 'x' 
     }, 
     colors: ['rgba(255,0,255,1)'], 
     title: { 
      text: 'Items' 
     }, 
     credits: '', 
     series: [{ 
      type: 'area', 
      name: 'Items', 
      data: [] 
     }] 
    }; 
    chartData$ = new Subject(); 

    ngOnInit() { 
     this.items.subscribe((data: any) => { 
     this.chartData.series[0].data = data.map(item => ([item.x, parseFloat(item.y)])); 
     this.chartData$.next(this.chartData); 
     if(this.chartElement && this.chartElement.chart) { 
      var serieRef = this.chartElement.chart.series[0]; 
      serieRef.setData(this.chartData.series[0].data); 
     } 
    }); 
    } 
}