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>

组件类

image comes when page opens

              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

检查此

Variable Should Exist

您可以为oughnutChartData附加多个值

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

Stackblitz工作Example

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

1 个答案: