Angular中同时使用Chart JS Zoom与ChartDatalabels插件报错咨询

问题根源 #

chartjs-plugin-zoom@2.0.0与chartjs-plugin-datalabels的类型定义和chart.js@4.1.1的PluginOptionsByType泛型参数不匹配，触发TypeScript类型检查报错。

解决步骤 #

1. 升级插件至Chart.js 4.x兼容版本 #

• 升级chartjs-plugin-zoom到支持Chart.js 4.x的版本（最低需2.0.1+）：

  npm install chartjs-plugin-zoom@latest --save
  

• 确保chartjs-plugin-datalabels使用兼容Chart.js 4.x的版本（最低需2.2.0+）：

  npm install chartjs-plugin-datalabels@latest --save
  

2. 自定义类型声明修复（临时方案） #

若升级后仍报错，可通过自定义类型文件统一类型参数：

• 在项目src目录下创建typings/chartjs.d.ts文件，添加内容：

  declare module 'chart.js' {
    interface PluginOptionsByType<TType extends ChartType> {
      zoom?: import('chartjs-plugin-zoom').ZoomPluginOptions;
      datalabels?: import('chartjs-plugin-datalabels').DatalabelsPluginOptions;
    }
  }
  

• 修改tsconfig.json的typeRoots配置，确保自定义类型被识别：

  {
    "compilerOptions": {
      "typeRoots": ["./src/typings", "./node_modules/@types"]
    }
  }
  

3. 规范组件内插件注册与配置 #

在组件代码中明确插件注册方式，避免类型歧义：

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

// 注册基础组件及插件
Chart.register(...registerables, zoomPlugin, datalabelsPlugin);

// 配置图表时指定插件选项类型
const chartOptions = {
  plugins: {
    zoom: {
      pan: { enabled: true, mode: 'xy' },
      zoom: { enabled: true, mode: 'xy' }
    },
    datalabels: {
      color: '#333',
      font: { weight: 'bold' }
    }
  }
} as const;

4. 清除缓存重新构建 #

执行命令清理依赖缓存并重新构建项目：

npm cache clean --force
rm -rf node_modules package-lock.json
npm install
ng build --clean

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