时，您可以调用
上午使用ng2-charts-https：//github.com/valor-software/ng2-charts
我有一个饼图，如果我在component.ts文件的顶部声明变量时将数据进行编码，例如我的饼图显示。
。，但我显然想使Pie Char数据动态。我可以通过服务（数字）调用数据，将数字添加到数据阵列中，并且饼图不起作用。但是，如果我执行控制台日志，则该数组将用我添加的新数据/编号打印出来。
我需要以某种方式重新绘制桌子。无法弄清楚如何。
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);
});
}
您可以隐藏并显示这样的毫秒的图表：
refreshChart(){
this.mychart.show = false;
setTimeout(()=>{
this.mychart.show = true;
},1);
}
在模板中，与mychart.show相比，使用*ngIf这样：
<div style="display: block">
<canvas baseChart
*ngIf="mychart.show"
[data]="pieChartData"
[labels]="pieChartLabels"
[chartType]="pieChartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
</div>
在您的功能中，当您想刷新图表时使用refreshChart()功能。
编辑：
如果您重新初始化数组，则应自动更新，而不是：
component.pieChartData.push(component.greenFlagsTotal);
这样做：
let temp = [...component.pieChartData, ...component.greenFlagsTotal];
component.pieChartData = [...temp];
解决！隐藏画布，直到加载数据为止。
<div *ngIf="pieChartData.length > 1" style="display: block">
<canvas baseChart
[data]="pieChartData"
[labels]="flagPieChartLabels"
[chartType]="chartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
</div>
使图表数据动态的另一种方法是通过ViveChild绑定图表指令：
...
export class HomeComponent {
@ViewChild(BaseChartDirective)
public chart: BaseChartDirective;
void updateChart() {
this.chart.chart.update(); // This re-renders the canvas element.
}
现在，您可以每次更改数据集以使图表保持最新！
updateChart用 *ngif重新加载整个组件。
看来，如果您按数据并标记，然后在1 ms之后删除它们，它将重新加载正确的图表数据。
reloadChart(){
this.pieChartLabels.push('reload');
this.pieChartData.push(1);
setTimeout(() => {
this.pieChartData.pop();
this.pieChartLabels.pop();
},1);
}