Question

我有时会生成多个甜甜圈图，根据要显示甜甜圈图的计数，它会是5个，有时会是20个，我尝试了一些级别，我能够在ngFor中显示引导卡循环，但无法将画布ID动态传递到ts文件。

HTML：

       <div class="row">
          <div *ngFor="let dev_data of devices  let i = index" class="col-md-3">
           <div class="card card-body">
             <h6>{{dev_data.device_name}}</h6>
             <canvas  id="canvas{{i}} #yourId" ></canvas>
          </div><br>
         </div>
       </div>

打字稿：

          import { Component, OnInit, ViewChild, ViewChildren } from '@angular/core';
          import { Chart } from 'chart.js'
          import {ElementRef} from '@angular/core';

          @Component({
            selector: 'app-dev',
            styleUrls: ['./dev.component.scss'],
            templateUrl: './dev.component.html'
          })

         export class DevComponent implements OnInit {

          constructor(private elementRef: ElementRef) { }

              ngOnInit() {
                this.createChartsData()
               }

           @ViewChildren('yourId') myCharts: any;

          charts = [];

          createChartsData() {
          var array=[];
           for(var i =0; i<this.NumberOfSystems;i++)
           {
          var pie ={
          type: 'doughnut',
          data: {
          labels: ["Disks", "Mgmt", "Hardware", "FC", "Vols&Pols"],
          datasets: [
            {
              backgroundColor:["#008000","#008000","#008000","#008000","#008000"],
              data: [20,20,20,20,20]
           }
           ]
          },
         options: {
             title: {
             display: false
            },
        animations: true,
        tooltips: {
        enabled: true
         },
        legend: {
        display: true
        }
        }
      };
      array.push(pie);
      }
     this.createCharts(array);
      }
      createCharts(pieData){
      for(var j = 0; j<this.NumberOfSystems;j++)
     {

   console.log(this.myCharts)

   let htmlRef = this.elementRef.nativeElement.select(`#yourId`+j);
   var tempChart = new Chart(htmlRef,pieData[j]);
   this.charts.push(tempChart);
  }
 }

         }

我认为当console.log（htmlRef）没有打印任何内容时，错误是在** htmlRef **变量上。

然后我打印了console.log（this.myCharts），在那里我得到了以下数据：

enter image description here

我现在不在哪里，如果有任何帮助，将不胜感激。

Answer 1

 export class DevComponent implements AfterViewInit{
    ngAfterViewInit()
    {
      this.createChartsData()
    }
 }

如何显示多级甜甜圈图

1 个答案: