Angular 2 und PrimeNG Diagramm nicht Rendering feine

Question

Im für die Charts Wrapper chart.js bereitgestellt durch http://www.primefaces.org/primeng/#/chart

Dies funktioniert gut, wenn ich die Daten geben jedoch ein statisches Array von Zahlen Attribut wenn ich eine Funktion verwenden, die zurückgibt ein Wert (auch Array von Zahlen) seine Rendering nicht dafür ist, dass deren Umsetzung dar, die sie automatisch in der Tat in ihrer docs auf Veränderungen hören nicht, dass refresh sollte

update(chart: UIChart) { 
    this.data = //reload 
    chart.refresh(); 
} 

meine Frage manuell sein, wie zu referenzieren die c Hirsch: UIChart von der Steuerung so i seine Refresh-Methode aufrufen kann, wenn ich zu brauchen hier ist meine aktuelle Implementierung (nicht zeichnen, da die Daten leer ist)

constructor(private stationService : StationComplianceService) { } 

    ngOnInit() { 
    this.getStationTypes(); 
    } 

    // ngAfterViewInit(chart: UIChart) { 
    // this.drawGraph(this.processStationType(this.graphData)); not working 
    // } 


    update(chart: UIChart) { 
     chart.refresh(); 
    } 

drawGraph(graphData){ 
    this.data = { 
    labels: ['Up Devices', 'Down Devices'], 
    datasets: [ 
     { 
      data: graphData, 
      backgroundColor: [ 
       "#4dd0e1", 
       "#4fc3f7" 
      ], 
      hoverBackgroundColor: [ 
       "#00acc1", 
       "#039be5" 
      ] 
     }] 
    }; 
} 



    getStationTypes(){ 
    this.stationService.subscribeToComplianceService() 
     .subscribe(
     graphData => { 
      this.graphData = graphData; 
      this.drawGraph(this.processStationType(graphData)); etc etc 

UPDATE ich es geschafft, einen Verweis des Diagramms zu erhalten, indem mit

@ViewChild 
('upDownChart') chart: UIChart; 

So gehofft, ich wurde, dass this.chart.refresh() am Ende der DrawGraph Funktion durch Aufruf würde es funktionieren, aber es ist nicht seltsam habe ich das Update Refactoring (durch einen Klick auf den ui aufgerufen)

update() { 
     this.chart.refresh(); 
    } 

und es funktioniert

Answer 1

die Lösung war es eine kleine Auszeit geben

setTimeout(() => this.chart.refresh(), 100); 

https://github.com/primefaces/primeng/issues/1422

Answer 2

Wenn Sie 4.0.0-rc.1 primeng aktualisieren, können Sie behandeln Datenauffrischung viel einfacher, besonders wenn es asychnronous ist. Hier ein Beispiel:

changeData() { 
      this.changedData = { 
       labels: ['X','Y','Z'], 
       datasets: [ 
        { 
         data: [200, 200, 50], 
         backgroundColor: [ 
          "#50f442", 
          "#f441c4", 
          "#4195f4" 
         ], 
         hoverBackgroundColor: [ 
          "#50f442", 
          "#f441c4", 
          "#4195f4" 
         ] 
        }] 
      } 
      this.data = Object.assign({}, this.changedData); 

} 

How do you get Angular 2 (or 4) PrimeNg Charts to refresh asynchronously?

https://github.com/primefaces/primeng/issues/2235