Highcharts饼图：如何将数据标签及连接线显示在图表右侧？

要实现饼图数据标签和连接线都显示在右侧，你可以通过自定义connectorShape函数配合调整数据标签位置来完成，具体配置如下：

核心配置说明 #

1. 固定数据标签位置：给dataLabels设置固定的x偏移量，同时将align设为left，让标签统一靠左对齐在图表右侧区域。
2. 重写连接线形状：自定义connectorShape函数，生成从饼图切片边缘水平向右延伸，再垂直连接到对应标签的路径。

完整示例代码 #

Highcharts.chart('container', {
    chart: {
        type: 'pie',
        width: 600
    },
    title: {
        text: '数据标签与连接线居右示例'
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            dataLabels: {
                enabled: true,
                // 固定标签到右侧，x值可根据图表宽度调整
                x: 320,
                align: 'left',
                connectorWidth: 2,
                connectorColor: '#000'
            },
            // 重写connectorShape函数
            connectorShape: function (options, point) {
                var sliceCenter = point.series.center,
                    sliceRadius = point.shapeArgs.r,
                    sliceAngle = point.shapeArgs.start + point.shapeArgs.angle / 2,
                    // 计算切片边缘的出口点（饼图外侧）
                    sliceX = sliceCenter[0] + sliceRadius * Math.cos(sliceAngle),
                    sliceY = sliceCenter[1] + sliceRadius * Math.sin(sliceAngle),
                    // 连接线水平段的终点（标签左侧位置）
                    connectorEndX = options.label.x - 10,
                    connectorEndY = options.label.y;

                // 返回SVG路径：从切片出口点水平到标签左侧，再垂直到标签位置
                return [
                    'M', sliceX, sliceY,
                    'L', connectorEndX, sliceY,
                    'L', connectorEndX, connectorEndY
                ];
            }
        }
    },
    series: [{
        name: '分类',
        data: [
            ['分类A', 30],
            ['分类B', 20],
            ['分类C', 50]
        ]
    }]
});

关键细节解释 #

• sliceAngle：计算切片的中心角度，用来确定连接线从切片的哪个位置出发。
• 连接线路径采用三段式：从切片边缘出发→水平向右到标签左侧→垂直连接到标签的y坐标，保证线条整齐统一。
• x值可以根据你的图表实际宽度调整，确保标签显示在合适的右侧区域。

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