Chart.js饼图始终显示数据值（tooltip）问题求助

你提到之前尝试旧方法无效，这大概率是因为Chart.js版本迭代后API发生了变化——旧方案大多针对v2版本，而现在主流的v3/v4版本配置逻辑已经不同。下面根据你的需求给出两种可行方案：

方案1：让Tooltip始终保持显示状态 #

如果你的需求是让Tooltip不需要hover触发，一直显示所有数据的提示框，可以通过自定义插件来实现：

// 自定义插件：强制Tooltip始终显示所有元素
const alwaysShowTooltip = {
  id: 'alwaysShowTooltip',
  afterDraw(chart) {
    // 如果当前没有激活的Tooltip元素，手动激活所有扇形
    if (!chart.tooltip._active || chart.tooltip._active.length === 0) {
      const activeElements = chart.data.datasets[0].data.map((_, idx) => ({
        datasetIndex: 0,
        index: idx
      }));
      chart.tooltip.setActiveElements(activeElements);
      chart.update();
    }
  }
};

// 初始化饼图时注册这个插件
const pieChart = new Chart(document.getElementById('yourChartContainer'), {
  type: 'pie',
  data: PieData,
  options: pieOptions,
  plugins: [alwaysShowTooltip]
});

方案2：直接在扇形上显示数据标签（更推荐） #

如果你的核心需求是让数据值一直可见，其实更适合用数据标签替代Tooltip——把数值直接标注在每个扇形上，这是Chart.js官方推荐的方式，需要用到chartjs-plugin-datalabels插件：

1. 先引入插件（CDN方式：在Chart.js之后添加）
2. 配置图表选项：

// 完善你的pieOptions配置
var pieOptions = {
  segmentShowStroke: true,
  segmentStrokeColor: "#fff",
  // 新增数据标签配置
  plugins: {
    datalabels: {
      display: true,
      // 自定义显示内容，比如显示数值+百分比
      formatter: (value, ctx) => {
        const total = ctx.dataset.data.reduce((a, b) => a + b, 0);
        const percentage = Math.round((value / total) * 100);
        return `${value} (${percentage}%)`;
      },
      color: '#ffffff', // 标签文字颜色
      font: {
        size: 12,
        weight: 'bold'
      }
    }
  }
};

// 初始化图表
const pieChart = new Chart(document.getElementById('yourChartContainer'), {
  type: 'pie',
  data: PieData,
  options: pieOptions,
  plugins: [ChartDataLabels] // 全局引入插件的话可省略这行
});

关键提醒 #

• 如果你用的是Chart.js v3+版本，注意配置结构和v2完全不同：比如插件配置要放在options.plugins下，Tooltip的API也有更新，旧的v2方案自然无法生效。
• 检查你的现有配置是否有冲突，比如如果之前设置了tooltip.enabled: false，需要移除该配置才能让方案1生效。

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