如何在 Typescript 中使用 Chart.js 动态填充多个图表

Question

我想要使用 Chart.js、Typescript 和 [=30 在一页上动态生成多个图表=]Angular

在页面上：

<canvas *ngFor="let d of data" 
style="position:relative, width: 15vh, height: 40vw" #canvases></canvas>

for 循环仅创建可用数据的图表数量。

打字稿文件中：

我想过使用多个 ViewChild 语句，但这需要知道应该创建多少个图形，我不知道。我也尝试使用 QueryLists 但未能使它们工作，因为我调用的任何函数（toArray、foreach 等）似乎都没有定义。

@ViewChildren('canvases') canvases:QueryList<HTMLCanvasElement>

一个人 canvas 应该循环传递给正常的 Chart.js 函数，然后用正确的数据填充

let newChart = new Chart(individualCanvas, {
    type: 'line',
    ...
})

有没有人知道如何从 HTML 页面上生成的 canvases 进入一个循环，在这个循环中我可以将单独的 canvases 用于 Chart.js实例？

Answer 1

我还没有弄清楚如何使用 QueryList 进行处理。但是我找到了避免它们的方法。为此，我在 HTML 页面上引入了一个额外的 div，具有唯一 ID。

<div #canvases>
    <canvas *ngFor="let d of data" 
    style="position:relative, width: 15vh, height: 40vw"></canvas>
</div>

然后我再次使用了 ViewChild 但这次绑定了 div

@ViewChild('canvases') canvases: ElementRef<HTMLElement>

填充图表时，我使用了一个循环并访问了 div 的子项，它们是 dividual 画布。

let index = 0
for(let d of this.data){
    let individualCanvas = this.canvases.nativeElement.children.item(index)

    let newChart = new Chart(individualCanvas, {
        type: 'line',
        ...
    })

    index++
}

如何在 Typescript 中使用 Chart.js 动态填充多个图表

How to populate multiple charts dynamically with Chart.js in Typescript

charts

typescript

chart.js

angular