Chart.js插件在Angular中未被识别为Options属性

pkln4tw6  于 2023-03-23  发布在  Chart.js
关注(0)|答案(1)|浏览(384)

在Angular中使用Chart.js 2.9.3时遇到问题:https://github.com/chrispahm/chartjs-plugin-dragdata
导入的插件:chartjs-plugin-dragdata。将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)
    },
    //Set Formatting

  },

但是,“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.1.13,以兼容Chart.js 2.9.3。2.扩展chartOptions接口。添加缺少的属性后:dragdata,ondragstart,ondrag,ondragend,插件开始使用上面的选项代码。

2cmtqfgy

2cmtqfgy1#

2件事,插件选项必须在options对象的plugins部分定义,如下所示:

new Chart(ctx, {
  type: 'line',
  data: data,
  options: {
    plugins: {
      dragData: {
        onDragStart: function () {},
        onDragEnd: function () {},
      }
    }
  }
});

第二部分是,由于您使用的是chart.js版本2,您可能需要降级您的拖动插件,因为最新版本是V3,您可以使用的最新拖动版本是版本:1.1.13,您可以通过在package.json中直接更改它并再次运行npm install来获得此版本

相关问题