如何在Vue版Chartkick中通过chartjs-plugin-datalabels显示饼图百分比标签

1. 确认依赖版本匹配 #

• Chart.js 3.x 对应 chartjs-plugin-datalabels@2.x
• Chart.js 2.x 对应 chartjs-plugin-datalabels@1.x

如果还未安装插件，执行对应版本的安装命令，以3.x组合为例：
npm install chartjs-plugin-datalabels@2

2. 全局注册插件（核心步骤） #

在项目入口文件（如main.js）中按正确顺序注册插件，必须在初始化VueChartkick之前把datalabels插件注册到Chart.js中：

// 引入依赖
import Chart from 'chart.js/auto'
import ChartDataLabels from 'chartjs-plugin-datalabels'
import VueChartkick from 'vue-chartkick'

// 先注册datalabels插件到Chart.js
Chart.register(ChartDataLabels)

// 再初始化VueChartkick
// Vue2 写法
Vue.use(VueChartkick, { adapter: Chart })
// Vue3 写法
app.use(VueChartkick, { adapter: Chart })

如果是Chart.js 2.x版本，注册语句替换为Chart.plugins.register(ChartDataLabels)即可

3. 饼图组件添加显示配置 #

在pie-chart组件的library属性中配置百分比显示规则：

<pie-chart
  :data="yourPieData"
  :library="{
    plugins: {
      datalabels: {
        // 标签字体颜色
        color: '#ffffff',
        // 计算百分比逻辑
        formatter: (val, ctx) => {
          const total = ctx.dataset.data.reduce((prev, curr) => prev + curr, 0)
          return `${(val * 100 / total).toFixed(1)}%`
        },
        // 字体样式可自定义
        font: {
          size: 14,
          weight: 'bold'
        }
      }
    }
  }"
/>

常见无效原因排查 #

• 注册顺序错误：先注册VueChartkick再注册插件会导致插件不生效
• 版本不兼容：插件版本和Chart.js版本不匹配会出现加载报错
• 重复注册：不要在单个组件内重复引入注册插件，避免冲突

内容的提问来源于stack exchange，提问作者Juan José Campis