Как мне сначала показать кольцевую диаграмму вместо того, чтобы нажимать на ярлыки?

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
  ];

Вы можете добавить несколько значений для doughnutChartData

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

Работает с помощью Stackblitz Пример