vue-chartjs引入chartjs-plugin-datalabels后图表报错问题咨询

报错核心为版本不匹配，对应适配规则如下：

• chartjs-plugin-datalabels版本和Chart.js强绑定：3.x版本仅适配chart.js@4.x，2.x版本适配chart.js@3.x，1.x版本适配chart.js@2.x。直接执行默认安装命令会安装最新3.x版本，和你当前的chart.js@3.8.0完全不兼容，会直接导致所有图表渲染崩溃。
• 额外提示：你当前使用的vue-chartjs@3.5.1原生适配chart.js@2.x，虽然手动安装chart.js@3.8.0能运行基础图表，但存在隐性兼容风险，长期使用建议升级vue-chartjs到4.1.2版本（适配Vue2.6 + chart.js3.x）。

如果要继续使用chartjs-plugin-datalabels，按以下步骤调整：

1. 卸载不兼容版本，安装适配chart.js3的版本

npm uninstall chartjs-plugin-datalabels
npm install chartjs-plugin-datalabels@2.2.0

2. 调整组件内插件注册逻辑，避免全局注册污染所有图表实例，改为单图表内注册：

<script>
import { Bar, mixins } from "vue-chartjs";
import ChartDataLabels from 'chartjs-plugin-datalabels';
export default {
  extends: Bar,
  props: ["options"],
  mixins: [mixins.reactiveProp],
  mounted() {
    // 插件传入renderChart第三个配置项，仅当前图表生效
    this.renderChart(this.chartData, this.options, {
      plugins: [ChartDataLabels]
    })
  },
};
</script>

实现双标签环形图时，只需在两个dataset中分别配置datalabels的显示规则、偏移位置、样式，即可分别渲染数值和百分比标签。

如果要完全规避第三方插件的兼容问题，可以直接使用Chart.js自带的Canvas绘制能力实现标签，无任何额外依赖，灵活度更高。
核心实现逻辑是利用animation.onComplete回调，在图表渲染完成后获取每个弧段的坐标，通过Canvas原生API手动绘制文本标签，核心配置示例如下：

const chartOptions = {
  cutout: "60%", // 环形图内圈半径
  responsive: true,
  maintainAspectRatio: false,
  animation: {
    onComplete: function () {
      const chartInstance = this;
      const ctx = chartInstance.ctx;
      // 计算百分比总和
      const percentDataset = chartInstance.data.datasets[1];
      const total = percentDataset.data.reduce((sum, val) => sum + val, 0);

      // 绘制第一个数据集的数值标签
      ctx.font = "bold 14px sans-serif";
      ctx.fillStyle = "#333";
      ctx.textAlign = "center";
      ctx.textBaseline = "middle";
      chartInstance.data.datasets[0].data.forEach((val, idx) => {
        const arcMeta = chartInstance.getDatasetMeta(0).data[idx];
        const pos = arcMeta.tooltipPosition();
        // 向左偏移避免和百分比标签重叠
        ctx.fillText(val, pos.x - 22, pos.y);
      });

      // 绘制第二个数据集的百分比标签
      ctx.font = "12px sans-serif";
      ctx.fillStyle = "#666";
      percentDataset.data.forEach((val, idx) => {
        const arcMeta = chartInstance.getDatasetMeta(1).data[idx];
        const pos = arcMeta.tooltipPosition();
        const percentText = `${((val / total) * 100).toFixed(1)}%`;
        // 向右偏移和数值标签错开
        ctx.fillText(percentText, pos.x + 22, pos.y);
      });
    }
  }
}

你可以根据实际视觉需求调整字体、偏移量、颜色、精度，完全可以达到预期的双标签环形图效果。

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