如何在Highcharts中将占比不足5%的饼图数据标签移至饼块外？

我帮你搞定这个小切片数据标签放不下的问题！核心思路就是根据切片的占比动态调整数据标签的位置和样式——当占比低于5%时，把标签移到饼块外面，同时调整颜色保证可读性。

关键修改点 #

• 把dataLabels.distance从固定的-15改成判断函数，根据切片的percentage值决定标签位置：占比≥5%时留在内部（distance=-15），<5%时移到外部（distance=20）
• 动态设置标签颜色：内部用白色，外部用深色（比如#333）避免和背景融合
• 保持文本描边的适配性，外部标签不需要白色描边

修改后的完整代码 #

$('#chart01').highcharts({
    chart: {
        height: 290,
        plotBackgroundColor: null,
        plotBorderWidth: 0,
        plotShadow: false,
        style: { fontFamily: 'OpenSansRegular' }
    },
    title: {
        text: '70',
        align: 'center',
        verticalAlign: 'middle',
        y: -25,
        style: { fontSize: "40" }
    },
    tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
        pie: {
            dataLabels: {
                enabled: true,
                // 动态调整标签位置
                distance: function() {
                    return this.point.percentage < 5 ? 20 : -15;
                },
                formatter: function () {
                    return this.point.y + "%";
                },
                style: {
                    color: function() {
                        // 动态调整标签颜色
                        return this.point.percentage < 5 ? '#333' : 'white';
                    },
                    textOutline: false
                }
            },
            showInLegend: true
        }
    },
    legend: {
        width: 345,
        height: 150,
        itemWidth: 172,
        itemMarginBottom: 5,
        labelFormatter: function () {
            var words = this.name.split(/[\s]+/);
            var numWordsPerLine = 3;
            var str = [];
            for (var word in words) {
                if (word > 0 && word % numWordsPerLine == 0) str.push('<br>');
                str.push(words[word]);
            }
            return str.join(' ');
        }
    },
    series: [{
        colors: ['#04a15c', '#c038f3', '#5e9bfc', '#f39938', '#7c4ce9', '#e94c6b'],
        type: 'pie',
        name: 'Vendor invoices',
        innerSize: '65%',
        data: [
            ['19 Draft', 20],
            ['10 Paid', 35],
            ['11 Submitted', 4],
            ['25 In review', 15],
            ['40 Approved', 10],
            ['15 Rejected', 1]
        ]
    }],
    responsive: {
        rules: [{
            condition: { maxWidth: 300 },
            chartOptions: {
                legend: {
                    width: 255,
                    itemWidth: 125,
                    align: 'center',
                    verticalAlign: 'bottom',
                    layout: 'horizontal'
                }
            }
        }]
    }
});

效果说明 #

修改后，占比1%的"15 Rejected"和4%的"11 Submitted"切片的标签会自动移到饼块外部，同时颜色变为深色，既解决了标签溢出的问题，又保证了可读性。你可以根据需求调整distance的数值（比如改成15或25）来控制标签和饼块的距离。

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