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

我正在尝试使用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>

问题是，我事先不知道要在从数据库接收的数据集上创建和使用多少图表

我怎么做？问题主要在于： @ViewChild（'doughnutCanvas'）doughnutCanvas； 指挥部

---

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

我建议您将此逻辑提取到一个可重用的图表组件中，这样您就可以使用它了。我创建了一个plunkr来创建

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

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

---

然后，您可以将上面显示的所有逻辑放在

图表画布

组件中。

谢谢！如何运行planker以查看结果？（我在上角按了run，什么也没发生）如果不使用库在SVG中呈现图表，就没有任何东西可以显示。如果使用Chrome Inspector（或浏览器中的等效工具），您将看到四个

标记，每个标记都有自己的

标记。如果在控制台中查看，还将看到每个画布的数据和DOM引用。我更新了plunker，将传递给它的数据呈现在画布上，这样你就可以看到画布元素的位置了。我按照你说的做了，我成功地创建了多个图表组件，但是图表本身没有呈现，你知道为什么吗？你必须发布代码才能提供帮助。你能在你问题的底部更新一下你现在拥有的和你正在经历的吗？谢谢你的帮助，我找到了一个角度分量，它完全符合你的建议，所以现在，问题已经解决了。