无需距离技巧在Highcharts饼图切片内添加额外标签的方案

嘿，我之前刚好处理过类似的Highcharts饼图标签需求，给你几个实用的解决方案，应该能解决你的问题：

Annotations是Highcharts专门用来添加自定义注释、标签的功能，它会自动处理图表重绘（比如窗口 resize、数据更新），比手动用Renderer省心太多，不用自己处理各种边界情况。

配置示例如下：

Highcharts.chart('container', {
  chart: {
    type: 'pie',
    events: {
      load: function() {
        const chart = this;
        // 动态生成每个切片的额外标签
        const sliceLabels = chart.series[0].points.map(point => {
          // 计算标签的绝对坐标：切片中心坐标 + 绘图区域偏移量
          const absX = chart.plotLeft + point.shapeArgs.x;
          const absY = chart.plotTop + point.shapeArgs.y;
          return {
            point: { x: absX, y: absY },
            text: point.name, // 替换成你要显示的额外标签文本
            align: 'center',
            verticalAlign: 'middle',
            style: {
              fontSize: '12px',
              color: '#fff' // 可根据切片背景色调整文本颜色
            }
          };
        });
        // 更新注释标签
        chart.annotations[0].update({ labels: sliceLabels });
      },
      redraw: function() {
        // 图表重绘时重新生成标签，确保位置始终正确
        this.events.load.call(this);
      }
    }
  },
  series: [{
    name: 'Brands',
    data: [
      { name: 'Chrome', y: 61.41 },
      { name: 'Internet Explorer', y: 11.84 },
      { name: 'Firefox', y: 10.85 }
    ],
    dataLabels: {
      enabled: true,
      format: '{y}%' // 你原本用来展示数值的标签
    }
  }],
  annotations: [{ labels: [] }] // 初始化注释容器
});

你之前用Renderer时文本跑到图表下方，核心原因是没加绘图区域的偏移量。Renderer的坐标是相对整个图表容器的，而切片的shapeArgs.x/y是相对绘图区域的，必须加上plotLeft和plotTop才能准确定位到切片上。

修复后的Renderer示例：

Highcharts.chart('container', {
  chart: {
    type: 'pie',
    events: {
      load: function() {
        const chart = this;
        // 先清除旧标签，避免重复创建
        if (chart.customLabels) {
          chart.customLabels.forEach(label => label.destroy());
        }
        chart.customLabels = [];

        chart.series[0].points.forEach(point => {
          // 计算绝对坐标
          const x = chart.plotLeft + point.shapeArgs.x;
          const y = chart.plotTop + point.shapeArgs.y;
          // 创建并定位标签
          const label = chart.renderer.text(
            point.name, // 你的额外标签文本
            x,
            y
          )
          .attr({
            align: 'center',
            verticalAlign: 'middle',
            fill: '#ffffff'
          })
          .add();

          chart.customLabels.push(label);
        });
      },
      redraw: function() {
        // 重绘时重新生成标签
        this.events.load.call(this);
      }
    }
  },
  series: [{
    name: 'Brands',
    data: [
      { name: 'Chrome', y: 61.41 },
      { name: 'Internet Explorer', y: 11.84 }
    ],
    dataLabels: {
      enabled: true,
      format: '{y}%'
    }
  }]
});

如果你的额外标签不需要完全独立的位置，能和原有数值共用一个标签区域（比如分行显示），那直接修改dataLabels.formatter就搞定了，不用额外渲染逻辑：

series: [{
  // ...其他配置
  dataLabels: {
    enabled: true,
    useHTML: true, // 允许HTML格式实现分行
    formatter: function() {
      // 第一行显示原有数值，第二行显示额外标签
      return `<div style="text-align:center">${this.y}%</div><div style="font-size:10px">${this.point.name}</div>`;
    }
  }
}]

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