Chartjs-plugin-datalabels 不适用于 Vue-chartjs

Question

我正在尝试为 ChartJS 配置和使用 datalabels 插件，但没有成功。我使用 npm 作为项目管理工具，因此使用 ' 添加了插件

npm install --save Chartjs-plugin-datalabels

将其导入到我的组件中

import ChartJSPluginDatalabels from "chartjs-plugin-datalabels";

添加到组件依赖中

components: {
    ChartJSPluginDatalabels,
    ... }

添加到选项中

  data: () => ({
    options: {
      responsive: true,
      maintainAspectRatio: false,
      tooltips:{
          enabled : true
      },
      plugins: {
        datalabels: {
            formatter: (value, ctx) => {
                
                let sum = 0;
                let dataArr = ctx.chart.data.datasets[0].data;
                dataArr.map(data => {
                    sum += data;
                });
                let percentage = (value*100 / sum).toFixed(2)+"%";
                return percentage;
            },
            color: '#fff',
        }
     }   
    }

与 Chartjs 组件绑定选项

 <service-demand :width="300" :height="300"  :chartData="topServices" :options="options">/service-demand>

但它不起作用。

有什么建议吗？我正在使用 vuejs 2，下面是我的 package.json 依赖项片段

 "dependencies": {
    "axios": "^0.21.1",
    "chart.js": "^2.9.4",
    "core-js": "^2.6.12",
    "echarts": "^5.0.0",
    "express": "^4.17.1",
    "moment": "^2.29.1",
    "serve-static": "^1.14.1",
    "vue": "^2.6.12",
    "vue-chartjs": "^3.5.1",
    "vue-echarts": "^5.0.0-beta.0",
    "vue-i18n": "^8.22.2",
    "vue-peity": "^0.5.0",
    "vue-router": "^3.4.9",
    "vue2-google-maps": "^0.10.7",
    "vuetify": "^2.3.21",
    "vuex": "^3.6.0",
    "chartjs-plugin-datalabels": "^1.0.0"
  },

Answer 1

在 vuejs 2 上，不要忘记使用register

import ChartJSPluginDatalabels from 'chartjs-plugin-datalabels'
  
ChartJS.register(ChartJSPluginDatalabels, ...)