Angular中Chart.js 2.9.3的dragData插件不被识别为options属性如何解决？

问题描述 #

我在Angular项目中使用Chart.js 2.9.3版本的dragData插件时遇到类型错误问题。
我已经导入chartjs-plugin-dragdata插件，并且在图表配置的options中添加了dragData相关配置，代码如下：

this.comboChart1 = new Chart("bar1", {
  type: "bar",
  options: {
    dragData: true,
    onDragStart: function (e) {
    },
    onDrag: function (e, datasetIndex, index, value) {
      // console.log(datasetIndex, index, value)
    },
    onDragEnd: function (e, datasetIndex, index, value) {
      // console.log(datasetIndex, index, value)
    },
    // 其他格式化配置
  },
  // 其余图表配置
})

运行代码时TypeScript提示dragData不是合法的图表配置选项，具体报错信息如下：

Type '{ plugins: { zoom: { pan: { enabled: true; mode: string; sensitivity: number; }; zoom: { enabled: true; mode: string; sensitivity: number; }; }; }; responsive: true; title: { display: true; text: any; position: "top"; fontSize: number; }; ... 6 more ...; onDragEnd: (e: any, datasetIndex: any, index: any, value: any)...' is not assignable to type 'ChartOptions'.
  Object literal may only specify known properties, and 'dragData' does not exist in type 'ChartOptions'.ts(2322)
index.d.ts(278, 9): The expected type comes from property 'options' which is declared here on type 'ChartConfiguration'

Receiving the following error:
index.d.ts(278, 9): The expected type comes from property 'options' which is declared here on type 'ChartConfiguration'

解决方法 #

完成以下两步即可修复该问题：

• 插件版本降级到1.1.13，该版本可适配Chart.js 2.9.3版本
• 扩展TypeScript声明中的ChartOptions接口，补充缺失的dragData、onDragStart、onDrag、onDragEnd属性，调整完成后原配置代码即可正常运行

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