如何先显示甜甜圈图而不是单击标签?

Question

html

<div class="m-widget14">
<div class="m-widget14__header">
<h3 class="m-widget14__title">
Insurance details
</h3>
<span class="m-widget14__desc">
</span>
</div>
<div class="chart-container" style="position: relative; height:40vh; width:50vw; displablock">
<canvas 
baseChart
[data]="doughnutChartData1"
[labels]="doughnutChartLabels"
[chartType]="doughnutChartType"
(chartHover)="chartHovered($event)"
[colors]="chartColors"
(chartClick)="chartClicked($event)"
></canvas>

组件类

页面打开时出现图像

ngOnInit() {
this.insuranceDashSer.getTotalInsurance().subscribe(res=>
{
this.body=res;
this.body.forEach(element => {
this.doughnutChartData.push(element);
console.log(" Array values"+JSON.stringify(this.doughnutChartData));
});
// this.doughnutChartData.slice(0);
this.doughnutChartData1[0]=this.doughnutChartData[1];
this.doughnutChartData1[1]=this.doughnutChartData[2];
this.doughnutChartData1[2]=this.doughnutChartData[3];
this.doughnutChartData1[3]=this.doughnutChartData[4];
console.log(this.doughnutChartData1);
});

}

我尝试了很多次，我不知道为什么在页面加载时得到这个输出，但是当我单击标签时，将显示图表

Answer 1

检查这个，

public doughnutChartData: MultiDataSet = [
[550, 450, 100],
[50, 220, 120],
[250, 130, 70],//Can add multiple data points here
];

您可以附加甜甜圈图表数据的多个值

<div style="display: block;">
<canvas baseChart 
[data]="doughnutChartData"
[labels]="doughnutChartLabels"
[chartType]="doughnutChartType">
</canvas>
</div>

堆栈闪电战工作示例