如何先显示圆环图而不是单击标签？答案

【问题标题】：How can i show doughnut chart first instead of clicking the labels?如何先显示圆环图而不是单击标签？
【发布时间】：2020-01-27 18:59:06
【问题描述】：

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

}

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

【问题讨论】：

看起来像第一次显示的页面 - 您没有要显示的数据（这就是为什么只看到垂直线的原因）。但这真的有问题吗？如果您没有数据 - 为什么不向用户显示？
我已经在 ng init 中调用了函数所以有数据，当我点击任何标签时，只会显示图表。？所以我想在页面打开时获取图表
数据在哪里，但我猜 - 数据是 []（空数组）
不，数组不是空的，我得到的输出是带有值的数组，但我不知道为什么打开页面时标签会被击中

标签： angular charts

【解决方案1】：

检查一下，

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

您可以为 donutChartData 附加多个值

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

Stackblitz 工作 Example

【讨论】：