chartjs-plugin-datalabels 不适用于 Vue-chartjs答案

【问题标题】：chartjs-plugin-datalabels not working with Vue-chartjschartjs-plugin-datalabels 不适用于 Vue-chartjs
【发布时间】：2022-08-10 20:31:45
【问题描述】：

我正在尝试为 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 依赖项 sn-p

 \"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\"
  },

标签： plugins vuejs2 vue-chartjs

【解决方案1】：

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

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

【讨论】：