Chart.js 2如何实现自定义提示框/标签？需同时显示全部提示

阿华AIGC实验室

2026-5-29

嘿，我来帮你拆解下这两个问题的解决思路！

一、先解决 `datalabels` 被截断的问题

从你贴的代码和效果图来看，标签被截断主要是因为你设置了 anchor: 'end' 和 align: 'end'，标签会贴在扇形末端，一旦扇形靠近画布边缘就容易被裁切。可以通过几个参数调整快速解决：

增加偏移量+允许标签超出画布
修改你的 datalabels 配置，新增 offset 和 clamp 参数：

plugins: {
  datalabels: {
    backgroundColor: function(context) {
      return context.dataset.backgroundColor;
    },
    borderColor: 'white',
    borderRadius: 50,
    borderWidth: 1,
    anchor: 'end',
    align: 'end',
    color: 'white',
    padding: 10,
    font: {
      weight: 'normal',
      size: '10'
    },
    offset: 25, // 让标签远离饼图一段距离
    clamp: false, // 允许标签超出canvas范围（默认true会强制裁切）
    formatter: function(value, context) {
      var percentageNum = context.chart.data.datasets[0].data[context.dataIndex]
      return percentageNum + '\n %';
    }
  }
}

给图表容器加内边距
如果还是有截断，给图表的父容器加 padding: 20px 之类的样式，给标签留出足够的显示空间。

二、实现「同时显示全部Tooltip」的需求

Chart.js 默认只显示 hover 项的 tooltip，showAllTooltips: true 不是官方配置项，所以不会生效。这里有两个方案：

方案1：用自定义插件强制渲染所有Tooltip

注册一个Chart.js插件，在绘制完成后把所有数据项设为「激活状态」，让tooltip全部显示：

// 注册自定义插件
Chart.plugins.register({
  afterDraw: function(chart) {
    if (chart.config.options.showAllTooltips) {
      // 清空原有激活状态
      chart.tooltip._active = [];
      // 把所有数据项加入激活列表
      chart.data.datasets.forEach((dataset, datasetIndex) => {
        dataset.data.forEach((_, dataIndex) => {
          chart.tooltip._active.push({
            datasetIndex,
            index: dataIndex
          });
        });
      });
      // 更新tooltip显示
      chart.tooltip.update(true);
    }
  }
});

// 你的options里要保留这个开关，同时开启默认tooltip
options: {
  // ...其他配置
  showAllTooltips: true,
  tooltips: {
    enabled: true, // 这里要改成true，让插件能触发默认tooltip
    // 可以继续自定义tooltip样式，比如 backgroundColor、titleFont等
  },
  // ...其他配置
}

方案2：用HTML自定义全局Tooltip（更灵活）

如果默认tooltip的样式满足不了需求，完全可以自己写HTML来展示所有数据的提示：

页面上先加一个隐藏的容器：

<div id="custom-tooltip" style="display: none; position: absolute; background: #333; color: white; padding: 10px; border-radius: 4px;"></div>

在Chart.js的afterDraw钩子中生成所有数据的提示内容，插入到容器并显示：

options: {
  // ...其他配置
  tooltips: { enabled: false }, // 禁用默认tooltip
  plugins: {
    afterDraw: function(chart) {
      const tooltipEl = document.getElementById('custom-tooltip');
      let tooltipContent = '';
      // 遍历所有数据，生成提示内容
      chart.data.datasets[0].data.forEach((value, index) => {
        const label = chart.data.labels[index];
        tooltipContent += `<p>${label}: ${value}%</p>`;
      });
      tooltipEl.innerHTML = tooltipContent;
      // 把tooltip定位到图表旁边（可以自己调整位置）
      const chartRect = chart.canvas.getBoundingClientRect();
      tooltipEl.style.display = 'block';
      tooltipEl.style.left = `${chartRect.right + 10}px`;
      tooltipEl.style.top = `${chartRect.top}px`;
    }
  }
}