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);
});
}