Angular用*ngFor绑定canvas id时Chart.js不渲染图表如何解决

你遇到的Failed to create chart: can't acquire context from the given item报错，核心有三个问题：

• 生命周期时机错误：ngOnInit阶段Angular仅完成了组件初始化，还未渲染*ngFor对应的canvas DOM节点，此时通过id查找元素返回为空，Chart.js无法获取canvas的2d上下文
• 字段拼写错误：你定义的数组中标签字段为lables，但图表配置中读取的是labels，字段不匹配会导致图表标签显示异常
• Chart.js未完成注册：Chart.js v3及以上版本需要手动注册所需组件才能正常工作，你仅导入了registerables未执行注册逻辑

首先修正上述三个问题，调整后代码如下：

修正后HTML代码 #

<div *ngFor="let chartConfig of data">
  <canvas [id]="chartConfig.id"></canvas>
</div>

修正后TS代码 #

import { Component, AfterViewInit } from '@angular/core';
import { Chart, registerables } from 'chart.js';
// 注册Chart.js所有内置组件
Chart.register(...registerables);

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements AfterViewInit {
  // 修正标签字段拼写：lables → labels
  data = [
    {
      id: 'chartOne',
      title: 'Chart One',
      type: 'bar',
      labels: ['Villas By Taru', 'Watch Tower'],
      data: [18, 12],
    },
    {
      id: 'chartTwo',
      title: 'Chart Two',
      type: 'bar',
      labels: ['Tea Avenue', 'The Grill Bar'],
      data: [18, 12, 2, 7],
    },
  ];

  // 改用ngAfterViewInit生命周期，此时DOM已完成渲染
  ngAfterViewInit() {
    this.data.forEach(element => {
      this.generateChart(element);
    });
  }

  generateChart(chartConfig: any) {
    new Chart(chartConfig.id, {
      type: chartConfig.type, // 动态读取配置的图表类型
      data: {
        labels: chartConfig.labels,
        datasets: [
          {
            label: '# of Votes',
            data: chartConfig.data,
            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)',
            ],
            borderColor: [
              'rgba(255, 99, 132, 1)',
              'rgba(54, 162, 235, 1)',
              'rgba(255, 206, 86, 1)',
              'rgba(75, 192, 192, 1)',
              'rgba(153, 102, 255, 1)',
              'rgba(255, 159, 64, 1)',
            ],
            borderWidth: 1
          }
        ]
      },
      options: {
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });
  }
}

可选优化 #

如果要避免id冲突问题，可以使用Angular的ViewChildren直接获取canvas节点：

• 给canvas添加模板引用：<canvas #chartCanvas></canvas>
• 在TS中用@ViewChildren('chartCanvas') chartCanvases: QueryList<ElementRef<HTMLCanvasElement>>;获取所有canvas实例
• 遍历chartCanvases和配置数组一一对应初始化图表，稳定性更高

内容的提问来源于stack exchange，提问作者Shafkhan