Angular使用Chart.js渲染面积图报TS2345类型错误如何解决

你的代码一共存在3个会导致报错/渲染失败的问题，逐个修复即可：

• 类型断言错误：Chart.js 3.x+版本的构造函数要求传入的上下文必须是HTMLCanvasElement|CanvasRenderingContext2D类型，你将获取到的元素断言为通用HTMLElement类型，TS静态校验时会检测到该类型缺少canvas元素独有的height、width、getContext等属性，直接抛出类型不匹配错误
• 模板id书写错误：你的canvas标签写的是id="myChart "，id值尾部多了一个空格，和TS代码里查询的"myChart"不匹配，运行时根本获取不到canvas节点
• Chart配置缺失必填项：你仅配置了datasets的fill规则，缺少图表类型type、x轴labels、数据集data等必填配置，就算类型问题解决，图表也无法正常渲染

修复步骤 #

1. 修正模板代码 #

推荐使用Angular官方推荐的@ViewChild方式获取DOM节点，替代原生getElementById，避免id匹配、DOM时序问题，模板代码修改为：

<div>
  <div style="display: block">
    <canvas #myChart></canvas>
  </div>
</div>

2. 修正组件TS代码 #

通过@ViewChild获取canvas元素，指定元素泛型为HTMLCanvasElement，补全Chart必填配置：

import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
import { Chart } from 'chart.js';

@Component({
  selector: 'app-widget-area',
  templateUrl: './area.component.html',
  styleUrls: ['./area.component.scss']
})
export class AreaComponent implements AfterViewInit {
  @ViewChild('myChart') myChartCanvas!: ElementRef<HTMLCanvasElement>;

  ngAfterViewInit(): void {
    const ctx = this.myChartCanvas.nativeElement;
    new Chart(ctx, {
      type: 'line', // 面积图基于折线图开启fill实现
      data: {
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
        datasets: [
          { label: 'Origin fill', data: [65, 59, 80, 81, 56, 55], fill: 'origin', borderColor: '#ff6384', backgroundColor: 'rgba(255,99,132,0.2)' },
          { label: 'Fill to dataset 3', data: [28, 48, 40, 19, 86, 27], fill: '+2', borderColor: '#36a2eb', backgroundColor: 'rgba(54,162,235,0.2)' },
          { label: 'Fill to dataset 1', data: [35, 25, 50, 32, 68, 72], fill: 1, borderColor: '#ffce56', backgroundColor: 'rgba(255,206,86,0.2)' },
          { label: 'No fill', data: [18, 42, 33, 58, 22, 45], fill: false, borderColor: '#4bc0c0' },
          { label: 'Fill to dataset 2', data: [45, 22, 63, 38, 71, 30], fill: '-2', borderColor: '#9966ff', backgroundColor: 'rgba(153,102,255,0.2)' },
          { label: 'Fill to value 25', data: [22, 33, 27, 41, 19, 36], fill: { value: 25 }, borderColor: '#ff9f40', backgroundColor: 'rgba(255,159,64,0.2)' }
        ]
      },
      options: { responsive: true }
    });
  }
}

如果你一定要用原生DOM查询方式，只需要把类型断言改为HTMLCanvasElement即可，即const ctx = document.getElementById("myChart") as HTMLCanvasElement;，注意必须先把模板里id的尾部空格删掉，否则运行时会拿到null。

之前网上查到的方案无效，基本都是只提到了修改类型断言，没有覆盖到id拼写错误、配置缺失这两个问题，导致编译过了但运行还是异常。

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