1

ng2-charts を使用しています - https://github.com/valor-software/ng2-charts

円グラフが表示される例のように、component.ts ファイルの先頭で変数を宣言するときにデータをハードコーディングすると、円グラフが表示されます。

しかし、私は明らかに円グラフのデータを動的にしたいと考えています。サービス (数値) を介してデータを呼び出し、その数値をデータ配列に追加しても、円グラフが機能しません。しかし、コンソールログを実行すると、アレイに追加した新しいデータ/番号が出力されます。

どういうわけかテーブルを再描画する必要があります。方法がわかりません。

 public pieChartLabels:string[] = ['Red Flags','Green Flags'];
 public pieChartData: number[] = [200, 400];
 public chartType:string = 'pie';
 public redFlagsTotal: any;
 public greenFlagsTotal: any;

constructor(private dataService:flagService) {
    let component = this;
    this.redFlagsTotal =    this.dataService.getRedFlags().then(function(result){
        component.redFlagsTotal = result.length;
        console.log(component.redFlagsTotal);
        component.pieChartData.push(component.redFlagsTotal);
        console.log(component.pieChartData);
    });

    this.greenFlagsTotal =     this.dataService.getGreenFlags().then(function(result){
        component.greenFlagsTotal = result.length;
        console.log(component.greenFlagsTotal);
        component.pieChartData.push(component.greenFlagsTotal);
        console.log(component.pieChartData);
    });
}
4

4 に答える 4