如何配置Highcharts饼图显示所有扇区的dataLabels（含小扇区）

使用Highcharts绘制饼图时，仅大扇区的dataLabels会显示，小扇区的dataLabels无法展示。如何通过配置让所有扇区（包括小扇区）都显示dataLabels？

示例代码：

function generatePieData(numPieces) {
    let data = [];
    for (let i = 1; i <= numPieces; i++) {
        let piece = {
            y: i
        };
        data.push(piece);
    }
    return data;
}

Highcharts.chart('container', {
    chart: {
        type: 'pie'
    },
    title: {
        text: ''
    },
    series: [{
         dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b>: {point.percentage:.1f} %'
            },
        borderWidth: 0,
        borderRadius: 0,
        data: generatePieData(100)
    }]
});

可以通过调整dataLabels的核心配置实现所有扇区显示标签，具体修改如下：

在series.dataLabels中添加以下属性：

• crop: false：禁用Highcharts对超出绘图区标签的裁剪行为
• overflow: "allow"：允许标签溢出绘图区域
• allowOverlap: true：允许不同扇区的标签互相重叠（小扇区密集时必须开启）
• 可选：distance: 10（可自定义数值）：缩小标签与扇区的距离，避免标签过于分散

修改后的完整代码：

function generatePieData(numPieces) {
    let data = [];
    for (let i = 1; i <= numPieces; i++) {
        let piece = {
            y: i
        };
        data.push(piece);
    }
    return data;
}

Highcharts.chart('container', {
    chart: {
        type: 'pie'
    },
    title: {
        text: ''
    },
    series: [{
         dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                crop: false,
                overflow: "allow",
                allowOverlap: true,
                distance: 10
            },
        borderWidth: 0,
        borderRadius: 0,
        data: generatePieData(100)
    }]
});

如果小扇区标签仍然难以辨认，还可以补充以下优化：

• 添加style: {fontSize: "8px"}缩小标签文字，提升密集区域的可读性
• 调整connectorWidth: 1和connectorColor: "#ccc"优化标签连接线样式

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