Question

我正在尝试使用chart.js根据我从数据库中获取的数据创建多个图表。

文档说要使用以下代码来创建图表：

 @ViewChild('doughnutCanvas') doughnutCanvas;
  doughnutChart: any;



createChart(){
      this.doughnutChart = new Chart(this.doughnutCanvas.nativeElement, {
        type: 'doughnut',
        data: {
            labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
            datasets: [{
                label: '# of Votes',
                data: [12, 19, 3, 5, 2, 3],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ]
            }]
        }
    });
  }

并在html文件中：

  <ion-card-content>
        <canvas #doughnutCanvas></canvas>
  </ion-card-content>

问题在于，我事先并不知道我想创建多少个图表，并希望在从数据库中收到的数据集中使用ngFor。

我该怎么办？问题主要是： @ViewChild（＆＃39; doughnutCanvas＆＃39;）doughnutCanvas; 命令。

**我使用离子3，但不认为它是相关的

Answer 1

我建议您将此逻辑转换为可重复使用的图表组件，并将为您处理。我为show you an example of doing so创建了一个plunkr。

本质上，这允许您通过渲染图表组件的新版本并传递它所需的必要数据来循环它们，如下所示：

<chart-canvas *ngFor="let chart of charts" [data]="chart"></chart-canvas>

然后，您可以将上面显示的所有逻辑放在chart-canvas组件中。

使用angular使用chart.js创建动态数量的图表

1 个答案: