チャートデータが同時に更新されたときにng-chartsのラベルが更新されない

Question

ngOnChanges()でグラフデータを同時に更新すると、ng2-chartsコンポーネントのラベルが更新されません。

もし私がngOnChanges()のデータvar更新をコメントアウトすると、ラベルはUIで正常に更新されます。データとラベルの両方を更新するにはどうすればよいですか？

私は自分のHTMLと呼び出し元のクラスを含みますが、明白な問題はありません。リクエストすると、ここに投稿されます。

私は私のデータ更新をアンコメントしたときに、なぜラベルが更新されません...データの更新がうまく（他のチャートVARSと一緒に）

import { Component, Input, OnInit, NgZone, OnChanges } from '@angular/core'; 
@Component({ 
    selector: 'app-bar-chart-demo', 
    templateUrl: './bar-chart-demo.component.html', 
    styleUrls: ['./bar-chart-demo.component.css'], 
    inputs:['chartLabel', 'chartData'] 
}) 
export class BarChartDemoComponent{ 
    public barChartOptions:any = { 
    scaleShowVerticalLines:false, 
    responsive:true 
    }; 
    //Labels 
    public barChartLabel:string[]; 
    @Input() chartLabel:string[]; 

    //Data 
    public barChartData:any[]; 
    @Input() chartData:string[]; 

    ngOnChanges(){ 
    // this.barChartData=this.chartData; 
    this.barChartLabel=this.chartLabel; 
    } 

    ngOnInit(){ 
    this.barChartLabel=this.chartLabel; 

    console.log("in onInit "+this.chartData); 
    this.barChartData=this.chartData; 
    } 
    } 
} 

マイpackage.jsonは以下の図表にLIBS

を示し

"chart.js"： "^ 2.4.0"、 "NG2-チャート"： "^ 1.5.0"、

Answer 1

私はチャートを更新する正しい方法だと思う、との特別な折れ線グラフ複数の行はコンポーネントのViewChildとElementRefをインポートすることですBaseChartDirectiveを使用してチャートのインスタンスを作成すると、チャートのデータとラベルを更新できます。

ので最初に、あなたが、私はデータセットがないデータ属性データをバインドするために属性を使用しています気付いた場合、HTML

<div class="chart"> 
      <canvas baseChart [datasets]="barChartData" [labels]="barChartLabel" [options]="barChartOptions"> 
      </canvas> 
     </div> 

にチャートのクラス=「チャート」を与えなければなりません。

import { Component, Input, OnInit, NgZone, OnChanges, ViewChild, ElementRef } from '@angular/core'; 
import { BaseChartDirective } from 'ng2-charts/ng2-charts'; 
    @Component({ 
     selector: 'app-bar-chart-demo', 
     templateUrl: './bar-chart-demo.component.html', 
     styleUrls: ['./bar-chart-demo.component.css'], 
     inputs:['chartLabel', 'chartData'] 
    }) 
    export class BarChartDemoComponent{ 
@ViewChild(BaseChartDirective) chart: BaseChartDirective; 
     public barChartOptions :any = { 
     scaleShowVerticalLines:false, 
     responsive:true 
     }; 
     //Labels 
     public barChartLabel :string[]; 

     //Data 
     public barChartData: { label: string, data: Array<any> }[]=[]; 

     ngOnChanges(){ 
// do your changes here 
setTimeout(() => { 
     this.barChartData=this.chartData; 
     this.barChartLabel=this.chartLabel; 
      //console.log(this.barChartData); 
      if (this.chart && this.chart.chart && this.chart.chart.config) { 
       this.chart.chart.config.data.labels = this.barChartLabel; 
       this.chart.chart.config.data.datasets = this.barChartData; 
       this.chart.chart.config.data.options = this.barChartOptions; 
       this.chart.chart.update(); 
      } 
     }); 
     } 

     ngOnInit(){ 
     this.barChartLabel=['23 mei', '24 mei', '25 mei', '26 mei', '27 mei', '28 mei', '29 mei']; 

     this.barChartData=[ 
     { data: [15, 29, 24, 21, 26, 15, 10], label: 'Opening/Time' }, 
     { data: [11, 20, 27, 26, 22, 17, 11], label: 'Closing/Time' } 
    ]; 
     } 
     } 
    } 

注：完全なコードは次のようなものである必要があり、今

private datasets_lines: { label: string, data: Array<any> }[] 

：今コンポーネントのために、あなたが与えているデータの構造を尊重しなければならないかをチェックする必要がありますデータの数がラベル

の数 と等しいことを、あなたは、このリンク上で私の他のexempleを確認することができますng2-charts update labels and data