Angular 12 集成 Chart.js 无法渲染 doughnut 环形图 报nativeElement未定义错误

问题产生原因 #

1. Cannot read property 'nativeElement' of undefined报错原因
   • Angular 8及以上版本中，@ViewChild装饰器默认static属性为false，如果canvas元素被*ngIf等条件渲染逻辑包裹，或者没有显式声明静态查询规则，ngAfterViewInit执行时元素可能还未完成挂载，导致donutCanvas未被正常赋值。
2. 解决元素获取报错后仍无法渲染环形图/饼图的原因
   • Chart.js的饼图、环形图属于无坐标轴类图表，你的配置中额外添加了scales下的xAxes、yAxes坐标轴配置，这部分配置不被饼/环形图支持，会导致图表初始化逻辑异常，无法完成渲染。

修复方案 #

1. 修复元素获取失败问题
   若canvas不存在条件渲染逻辑，可显式声明static: true让视图查询在变更检测前返回结果，修改@ViewChild声明如下：

   @ViewChild('theDonutCanvas', { static: true }) private donutCanvas: ElementRef;
   

   如果canvas确实存在条件渲染逻辑，可以将图表初始化逻辑放到条件生效后的时机执行，或移除条件渲染规则。
2. 删除不兼容的坐标轴配置
   把options中的scales配置项整体删除，修改后的图表初始化代码如下：

   doTheDonut() {
       // 可选添加非空判断，避免偶现元素未加载导致的报错
       if (!this.donutCanvas?.nativeElement) return
       
       this.donutChart = new Chart(this.donutCanvas.nativeElement, {
         type: 'doughnut',
         data: {
           labels: ['Solicitado', 'Entregado', 'Faltante'],
           datasets: [
             {
               label: 'test',
               data: [100, 200, 300],
               backgroundColor: ['#0074D9', '#2ECC40', '#FF4136']
             }
           ]
         },
         options: {
           title: {
             display: false,
             text: 'Color test'
           },
           legend: {
             position: 'left',
             display: true,
             fullWidth: true,
             labels: {
               fontSize: 11
             }
           }
         }
       });
     }
   

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