Angular设置canvas动态ID后Chart.js无法获取上下文如何解决

你收到的报错Failed to create chart: can't acquire context from the given item中文含义是：创建图表失败：无法从给定的项获取渲染上下文。

根本原因 #

你在ngOnInit生命周期钩子中执行图表初始化逻辑时，Angular还没完成模板DOM的渲染挂载，绑定了动态ID的canvas元素还不存在，ChartJS无法匹配到对应ID的DOM节点，因此无法获取绘图上下文触发报错。

解决方案 #

有两种修复方式，更推荐第二种避免ID冲突问题：

方式1：仅调整执行时机（保留动态ID写法） #

将图表初始化方法的调用从ngOnInit迁移到ngAfterViewInit钩子中，该钩子会在模板所有DOM渲染完成后触发，可保证动态ID已经绑定到canvas元素上：

1. 组件类实现AfterViewInit接口
2. 移除ngOnInit中的this.Grafico2()调用，改为在ngAfterViewInit中调用
   修改后的TS核心代码示例：

// 先导入对应接口
import { Component, OnInit, AfterViewInit } from '@angular/core';

export class CardKPIReporteComponent implements OnInit, AfterViewInit {
  // 原有属性保留不变

  ngOnInit() {
    this.tituloreporte = this.datos_kpi_reporte.servicio_nombre
    this.id = this.datos_kpi_reporte.cont
    // 移除这里的Grafico2调用
  }

  ngAfterViewInit() {
    // 模板渲染完成后再初始化图表
    this.Grafico2();
  }

  // 原有Grafico2方法保留不变
}

方式2：使用模板引用变量（更稳妥，避免ID冲突） #

无需依赖动态ID匹配DOM，直接通过Angular的模板引用变量获取canvas元素，不会出现时序或多实例ID重复问题：

1. HTML模板中给canvas加引用标识，删除动态ID绑定：

<mat-card-content>
    <div class="row">
        <canvas #chartCanvas></canvas>
    </div>
</mat-card-content>

2. 组件TS中通过@ViewChild获取canvas元素，修改图表初始化逻辑：

import { Component, OnInit, AfterViewInit, ViewChild, ElementRef } from '@angular/core';

export class CardKPIReporteComponent implements OnInit, AfterViewInit {
  @BlockUI() blockUI: NgBlockUI;
  @Input() datos_kpi_reporte: any
  fetcher: any
  arrayListaKpis: any
  tituloreporte: any
  chartBienesUbicacion: any;
  // 获取模板中的canvas引用
  @ViewChild('chartCanvas') chartCanvas: ElementRef<HTMLCanvasElement>;

  constructor(private procesoOperacionService: ProcesoOperacionesService) {
  }

  ngOnInit() {
    this.tituloreporte = this.datos_kpi_reporte.servicio_nombre
  }

  ngAfterViewInit() {
    this.Grafico2();
  }

  Grafico2() {
    var nombrechart = "Reporte" + this.datos_kpi_reporte.cont
    // 直接传入canvas原生元素初始化Chart，不需要传ID
    this.chartBienesUbicacion = new Chart(this.chartCanvas.nativeElement, {
      // 原有图表配置全部保留不变
      type: 'pie',
      data: {
        labels: ['ENTREGADO', 'NO ENTREGADO', '1', '1'],
        datasets: [
          {
            label: 'Cantidad',
            data: ['1', '1', '1', '1'],
            backgroundColor: 'rgba(54, 162, 235, 0.2)',
            borderColor: 'rgba(54, 162, 235, 1)',
            borderWidth: 1
          }
        ]
      },
      options: {
        title: {
          text: nombrechart,
          display: true
        },
        scales: {
          yAxes: [
            {
              ticks: {
                beginAtZero: true
              }
            }
          ]
        }
      }
    });
  }
}

内容的提问来源于stack exchange，提问作者Henrry José Portilla Paredes