Angular中用Chart.js v3.9.1报错：找不到ChartOptions

错误原因分析 #

你遇到的Cannot find name 'ChartOptions'和from类型错误，主要源于以下两点：

• Chart.js 3.x自带类型定义，若同时安装了旧版@types/chart.js会引发类型冲突
• 使用了与Chart.js 3.x不兼容的chartjs-plugin-datalabels版本

解决方案 #

1. 清理冲突依赖 #

卸载可能存在的旧类型包，重新安装指定版本的Chart.js：

npm uninstall @types/chart.js --save-dev
npm install chart.js@^3.9.1 --save

2. 安装兼容的datalabels插件 #

Chart.js 3.x需搭配chartjs-plugin-datalabels@2.x版本，执行安装命令：

npm install chartjs-plugin-datalabels@^2.2.0 --save

3. 修正导入与插件注册 #

替换原导入方式，明确注册Chart组件和datalabels插件：

import { Chart, registerables } from 'chart.js';
import ChartDataLabels from 'chartjs-plugin-datalabels';

// 注册所有必要组件及datalabels插件
Chart.register(...registerables, ChartDataLabels);

4. 修正图表配置错误 #

你的配置中存在两处问题：Chart.js 3.x的x轴键应为x而非xaxis；同时完善datalabels的启用配置：

let myChart = new Chart(this.ctx, {
  type: 'bar',
  data: {
    labels: number, // 建议修改为有意义的变量名，比如callDates
    datasets: [
      {
        categoryPercentage: 1,
        label: "IncomingCalls",
        data: callsReceived,
        borderColor: '#4c8ffb',
        backgroundColor: '#4c8ffb',
        borderWidth: 2,
        barThickness: 50
      },
      {
        categoryPercentage: 1,
        label: "OutgoingCalls",
        data: callmade,
        borderColor: '#58e395',
        backgroundColor: '#58e395',
        borderWidth: 2,
        barThickness: 50
      }
    ]
  },
  options: {
    scales: {
      x: { // 修正为x而非xaxis
        stacked: true,
      },
      y: { // 建议添加y轴基础配置
        beginAtZero: true
      }
    },
    plugins: {
      datalabels: { // 启用并配置datalabels
        formatter: (value, ctx) => {
          console.log(ctx.chart.data);
          return value; // 需返回要显示的内容
        },
        color: '#fff' // 可自定义文本样式
      },
      title: {
        display: true,
        text: this.graphTitle
      }
    }
  }
});

5. 优化TypeScript配置 #

确保tsconfig.json的compilerOptions包含以下设置，保障类型解析正常：

{
  "compilerOptions": {
    "moduleResolution": "node",
    "esModuleInterop": true,
    "skipLibCheck": true // 可选，跳过第三方库类型检查以规避类似错误
  }
}

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