Chart.js环形图添加百分比提示无效，该如何解决？

问题原因 #

你当前的代码是Chart.js v2版本的写法，若使用的是v3及以上版本，配置结构已变更——tooltips需嵌套在plugins对象下，且回调参数的结构也有调整，导致原有代码不生效。

修复方案 #

针对Chart.js v3+版本 #

调整配置结构，使用plugins.tooltip替代原tooltips，并适配新的回调参数：

const accessChart = new Chart(document.getElementById('access-chart'), {
  type: 'doughnut', // 环形图对应doughnut类型
  data: {
    labels: ['首页', '作品集列表', '详情页', '关于页'],
    datasets: [{
      data: [350, 280, 190, 120],
      backgroundColor: ['#2ecc71', '#3498db', '#9b59b6', '#f1c40f']
    }]
  },
  options: {
    plugins: {
      tooltip: {
        callbacks: {
          label: (context) => {
            const label = context.label || '';
            const currentValue = context.parsed;
            const total = context.dataset.data.reduce((prev, curr) => prev + curr, 0);
            const percentage = ((currentValue / total) * 100).toFixed(2);
            return `${label}: ${percentage}% (${currentValue}次访问)`;
          }
        }
      }
    }
  }
});

针对Chart.js v2版本 #

若你确实在使用v2，原有代码理论上有效，可排查以下问题：

• 确认Chart.js引入正确，无版本冲突
• 检查data.datasets[0].data是否为纯数值数组，无字符串或空值
• 确认图表类型设置为doughnut或pie（环形图/饼图）

关于chartjs-plugin-datalabels插件 #

不需要使用该插件实现Tooltip的百分比显示——Tooltip的回调功能完全满足需求。该插件的作用是在环形图的扇区上直接显示文本标签（比如百分比），如果有这个需求，可参考以下配置：

// 先注册插件（需提前安装引入）
Chart.register(ChartDataLabels);

// 图表配置中添加datalabels设置
options: {
  plugins: {
    datalabels: {
      formatter: (value, context) => {
        const total = context.dataset.data.reduce((prev, curr) => prev + curr, 0);
        return `${((value / total) * 100).toFixed(1)}%`;
      },
      color: '#ffffff',
      font: { weight: 'bold', size: 12 }
    }
  }
}

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