React Highcharts饼图数据标签切片顶部居中实现求助

方案一：使用Highcharts内置配置（推荐） #

无需自定义redraw函数，直接通过plotOptions.pie.dataLabels的配置即可实现标签居中：

plotOptions: {
  pie: {
    dataLabels: {
      enabled: true,
      align: 'center',
      verticalAlign: 'middle',
      // 自定义位置计算，确保标签在切片外侧中心
      positioner: function(labelWidth, labelHeight) {
        const sliceCenter = this.point.shapeArgs;
        const angle = (sliceCenter.start + sliceCenter.end) / 2;
        const radius = sliceCenter.r;
        const centerX = this.series.center[0];
        const centerY = this.series.center[1];
        
        // 计算标签中心位置（切片外侧中心）
        const x = centerX + (radius * Math.cos(angle));
        const y = centerY + (radius * Math.sin(angle));
        
        // 返回标签左上角坐标，让标签中心与计算点重合
        return {
          x: x - labelWidth / 2,
          y: y - labelHeight / 2
        };
      }
    }
  }
}

方案二：修复自定义redraw函数 #

你的现有代码中判断labelPosition.alignment的逻辑可能导致偏移，调整后如下：

function redrawDatalabels() {
  const chart = this;
  const [cX, cY] = chart.series[0].center;
  
  Highcharts.each(chart.series[0].data, function(point) {
    if (point.dataLabel) {
      const bBox = point.dataLabel.getBBox();
      const shapeArgs = point.shapeArgs;
      // 计算切片的中间角度
      const ang = (shapeArgs.start + shapeArgs.end) / 2;
      // 计算切片外侧中心的坐标
      const posX = cX + shapeArgs.r * Math.cos(ang);
      const posY = cY + shapeArgs.r * Math.sin(ang);
      
      // 调整标签左上角坐标，让标签居中
      point.dataLabel._pos.x = posX - bBox.width / 2;
      point.dataLabel._pos.y = posY - bBox.height / 2;
    }
  });
  
  chart.series[0].placeDataLabels();
}

// 在chart配置中挂载redraw事件
chart: {
  events: {
    redraw: redrawDatalabels,
    load: redrawDatalabels // 初始化时也执行一次
  }
}

说明：

• 两种方案都是先计算出切片外侧的中心坐标，再将标签的左上角偏移自身宽高的一半，实现标签居中对齐。
• 方案一利用Highcharts内置的positioner函数，更符合官方推荐的配置方式，无需手动处理redraw和load事件。

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