ng2-chartsを使ってangular2のjsonオブジェクトからグラフデータを読み込み

Question

私は現在、1つのページに複数のグラフを表示し、別々のjsonファイルから複数のグラフを表示するコンポーネントがあります。私はng2-chartsとangular2を使用しています。グラフデータをjsonデータに基づいてロードする方法や、複数のグラフデータを1つのコンポーネントに設定する最良の方法はわかりません。

dataType: any=[]; 
getData(){ 
    this.dataService.getDataType().subscribe((response) => {this.dataType = response; 
    for(let item of this.dataType){ 
     this.barChartLabels.push(this.dataType.name); 
    } 
    console.log(this.itemNames); 

    }); 
    } 

これは、コンポーネントファイルで私のグラフをロードするための私のコードです：

public barChartOptions: any = { 
    scaleShowVerticalLines: false, 
    responsive: true 
}; 
public barChartLabels: any =[]; //LOAD from dataType.label 
public barChartType: string = 'horizontalBar'; 
public barChartLegend: boolean = true; 

public barChartData: any[] = //LOAD from dataType.data 

サンプルJSONデータ：

ここ

は私のコンポーネントファイル内のオブジェクトを返す私のget呼び出しがあります

[ 
    { 
    "id": 1, 
    "name": "Test 1", 
    "display": "Test 1", 
    "score": 45 
    }, ... 
] 

マイhtml - ng2-chartsを使用：

<canvas baseChart [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend" [chartType]="barChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"> 
        </canvas> 

現在、私はラベルの配列を持っていますが、返されたラベルを使用されたbarChartLabels配列にプッシュしても何らかの理由でグラフに表示されませんhtmlで

Answer 1

RESTfulサービスからデータとラベルをチャートに取り込むときにも同じ問題がありました。チャート上でngOnChanges（）を呼び出すことによってこの問題を解決しました。

import { Component, AfterViewInit, OnInit, ViewChild, SimpleChanges } from '@angular/core'; 
import { BaseChartDirective } from 'ng2-charts'; 

export class DashboardComponent implements OnInit, AfterViewInit { 
    @ViewChild(BaseChartDirective) 
    public chart: BaseChartDirective; 

    ngAfterViewInit() { 
     this.updateCharts(); 
    } 

    public updateCharts(): void { 
     console.log('updateCharts()'); 

     setTimeout(() => { 
      this.chart.ngOnChanges({} as SimpleChanges); 
     }, 100); 
    } 
} 

更新：

上記のアプローチを使用するときに同じコンポーネントwitin第チャートを読み込んで問題がありました。

ngOnChanges（）は、最初のグラフの更新/ロードのみを行います。

代わりに、それぞれのキャンバス内でngIfディレクティブを使用しました。すべてのグラフが読み込まれます。

<canvas baseChart *ngIf="pastChartLabels.length > 0" [colors]="pastChartColors" [datasets]="pastChartData" [labels]="pastChartLabels" [options]="pastChartOptions" 
    [chartType]="pastChartType" [legend]="pastChartLegend" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas> 

<canvas baseChart *ngIf="recentChartLabels.length > 0" [colors]="recentChartColors" [datasets]="recentChartData" [labels]="recentChartLabels" [options]="recentChartOptions" 
    [chartType]="recentChartType" [legend]="recentChartLegend" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas>