ChartJS使用chartjs-plugin-labels显示饼图百分比标签不生效求助

你遇到的配置不生效有三个核心原因：

1. 你引入的chartjs-plugin-labels插件仅支持Chart.js 2.x版本，和你使用的3.5.1版本不兼容，这是最主要的原因。
2. 配置位置错误：你把标签渲染的相关配置写在了legend.labels节点下，该插件的配置需要放在plugins.labels独立节点下，和legend配置平级。
3. 脚本加载顺序错误：插件需要在Chart.js加载完成后、你的业务代码（script.js）加载前引入，你当前把插件放在script.js之后，业务代码执行时插件还未加载，自然不会生效。

以下是两种可行的修复方案：

方案1：使用兼容Chart.js 3.x的datalabels插件（推荐） #

第一步调整CDN引入顺序：

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<!-- 先加载插件，再加载你的业务代码 -->
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0/dist/chartjs-plugin-datalabels.min.js"></script>
<script src="script.js"></script>

第二步修改图表配置，注册插件并添加百分比标签规则：

let outterChart = new Chart(chart, {
    type: 'pie',
    data: data,
    // 注册datalabels插件
    plugins: [ChartDataLabels],
    options: {
    responsive: true,
    plugins: {
      // 原有legend、tooltip配置全部保留无需修改
      legend: {
        labels: {
          generateLabels: function(chart) {
            // 你原有逻辑保持不变
            const original = Chart.overrides.pie.plugins.legend.labels.generateLabels;
            const labelsOriginal = original.call(this, chart);
            var datasetColors = chart.data.datasets.map(function(e) {
              return e.backgroundColor;
            });
            datasetColors = datasetColors.flat();
            labelsOriginal.forEach(label => {
              label.fillStyle = datasetColors[label.index];
            });
            return labelsOriginal;
          }
        },
        onClick: function(mouseEvent, legendItem, legend) {
          // 你原有逻辑保持不变
          legend.chart.getDatasetMeta(
            legendItem.datasetIndex
          ).hidden = legend.chart.isDatasetVisible(legendItem.datasetIndex);
          legend.chart.update();
        }
      },
      tooltip: {
        callbacks: {
          label: function(context) {
            // 你原有逻辑保持不变
            const labelIndex = (context.datasetIndex * 2) + context.dataIndex;
            return context.chart.data.labels[labelIndex] + ': ' + context.formattedValue;
          }
        }
      },
      // 新增datalabels配置，控制饼图区块上的百分比显示
      datalabels: {
        color: '#fff',
        formatter: (value, ctx) => {
          const sum = ctx.dataset.data.reduce((a,b) => a + b, 0);
          return (value * 100 / sum).toFixed(2) + "%";
        },
        font: {
          size: 14
        }
      }
    }
  },
});

方案2：坚持使用原chartjs-plugin-labels插件 #

如果不想更换插件，需要将Chart.js降级到2.x版本，同时调整加载顺序和配置位置：

1. 替换CDN引入：

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js"></script>
<script src="script.js"></script>

2. 调整配置位置，把你之前错放在legend.labels下的render、fontColor、precision配置移到独立的plugins.labels节点下：

options: {
  plugins: {
    legend: {
      // 原有legend配置保留，移除错放的标签渲染配置
    },
    // 新增独立的labels配置节点
    labels: {
      render: 'percentage',
      fontColor: ['green', 'white'],
      precision: 2
    }
  }
}

注意Chart.js 2.x和3.x的部分API存在差异，降级后你现有的其他配置可能需要对应调整，更推荐使用方案1。

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