如何在Highcharts 3D饼图切片内正确放置百分比标签？

我正在使用Highcharts v9.2.2，普通饼图中标签放置在切片上方可正常显示，但切换为3D饼图后标签位置错乱。尝试调整series[0].dataLabels中的distance参数，效果不理想，请问如何在3D饼图中正确实现该效果？

普通饼图代码 #

JavaScript #

$(function() {
  $('#container').highcharts({
    chart: {
      type: 'pie',
      backgroundColor: 'rgba(0,0,0,0)',
      y: 100,
      options3d: {
        enabled: true,
        alpha: 65,
        fitToPlot: false,
        beta: 0
      }
    },
    title: {
      text: '普通饼图'
    },
    plotOptions: {
      pie: {
        y: 1,
        shadow: true,
        center: ['50%', '50%'],
        borderWidth: 0,
        showInLegend: false,
        size: '80%',
        data: [{
            "name": "第一块",
            "y": 100,
            "sliced": true
          },
          {
            "name": "第二块",
            "y": 100,
            "sliced": true
          },
          {
            "name": "第三块",
            "y": 70,
            "sliced": true
          },
          {
            "name": "第四块",
            "y": 100,
            "sliced": true
          },
          {
            "name": "第五块",
            "y": 100,
            "sliced": true
          }
        ]
      }
    },
    tooltip: {
      valueSuffix: '%'
    },
    series: [{
        type: 'pie',
        name: '占比',
        dataLabels: {
          color: 'white',
          distance: -20,
          formatter: function() {
            if (this.percentage != 0) return Math.round(this.percentage) + '%';
          }
        }
      },
      {
        type: 'pie',
        name: '名称',
        dataLabels: {
          connectorColor: 'grey',
          color: 'black',
          y: -10,
          softConnector: false,
          connectorWidth: 1,
          verticalAlign: 'top',
          distance: 20,
          formatter: function() {
            if (this.percentage != 0) return this.point.name;
          }
        }
      }
    ]
  });
});

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

3D饼图代码 #

JavaScript #

$(function() {
  $('#container').highcharts({
    chart: {
      type: 'pie',
      backgroundColor: 'rgba(0,0,0,0)',
      y: 100,
      options3d: {
        enabled: true,
        alpha: 65,
        fitToPlot: false,
        beta: 0
      }
    },
    title: {
      text: '3D饼图'
    },
    plotOptions: {
      pie: {
        y: 1,
        shadow: true,
        center: ['50%', '50%'],
        borderWidth: 0,
        showInLegend: false,
        depth: 35,
        size: '80%',
        data: [{
            "name": "第一块",
            "y": 100,
            "sliced": true
          },
          {
            "name": "第二块",
            "y": 100,
            "sliced": true
          },
          {
            "name": "第三块",
            "y": 70,
            "sliced": true
          },
          {
            "name": "第四块",
            "y": 100,
            "sliced": true
          },
          {
            "name": "第五块",
            "y": 100,
            "sliced": true
          }
        ]
      }
    },
    tooltip: {
      valueSuffix: '%'
    },
    series: [{
        type: 'pie',
        name: '占比',
        dataLabels: {
          color: 'white',
          distance: -20,
          formatter: function() {
            if (this.percentage != 0) return Math.round(this.percentage) + '%';
          }
        }
      },
      {
        type: 'pie',
        name: '名称',
        dataLabels: {
          connectorColor: 'grey',
          color: 'black',
          y: -10,
          softConnector: false,
          connectorWidth: 1,
          verticalAlign: 'top',
          distance: 20,
          formatter: function() {
            if (this.percentage != 0) return this.point.name;
          }
        }
      }
    ]
  });
});

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

解决方案 #

3D饼图标签位置错乱的核心原因是透视效果改变了标签的坐标计算逻辑，仅调整distance无法适配透视角度，可通过以下方式修复：

1. 自定义标签定位函数 #

针对外部名称标签，使用positioner函数根据3D角度和切片位置动态计算坐标，确保标签始终在切片上方：

dataLabels: {
  connectorColor: 'grey',
  color: 'black',
  softConnector: false,
  connectorWidth: 1,
  formatter: function() {
    if (this.percentage != 0) return this.point.name;
  },
  positioner: function(labelWidth, labelHeight) {
    var angle = this.point.angle;
    var alpha = this.chart.options.chart.options3d.alpha;
    // 根据透视角度调整垂直偏移
    var offsetY = -15 - (alpha / 2);
    return {
      x: Math.cos(angle) * (this.point.shapeArgs.r + 30),
      y: Math.sin(angle) * (this.point.shapeArgs.r + 30) + offsetY
    };
  }
}

2. 适配3D深度调整参数 #

3D饼图的depth参数会影响distance的实际效果，需增大外部标签的distance并调整垂直偏移：

dataLabels: {
  // 保留原有配置
  distance: 30, // 比普通饼图增大10
  y: -15 // 根据alpha角度调整垂直偏移
}

3. 优化3D透视参数 #

降低alpha角度可减少透视带来的标签偏移，同时保留3D效果：

chart: {
  options3d: {
    enabled: true,
    alpha: 45, // 从65调整为45
    fitToPlot: false,
    beta: 0
  }
}

4. 合并系列避免叠加干扰 #

当前使用两个饼图系列实现双标签，3D环境下叠加会导致计算混乱，可合并为单个系列并配置多组dataLabels：

series: [{
  type: 'pie',
  name: '占比',
  dataLabels: [{
    // 内部百分比标签
    color: 'white',
    distance: -20,
    formatter: function() {
      return Math.round(this.percentage) + '%';
    }
  }, {
    // 外部名称标签
    connectorColor: 'grey',
    color: 'black',
    positioner: function(labelWidth, labelHeight) {
      var angle = this.point.angle;
      var alpha = this.chart.options.chart.options3d.alpha;
      return {
        x: Math.cos(angle) * (this.point.shapeArgs.r + 30),
        y: Math.sin(angle) * (this.point.shapeArgs.r + 30) - 15 - (alpha/2)
      };
    },
    formatter: function() {
      return this.point.name;
    }
  }]
}]

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