如何配置Highcharts饼图的格式化值并调整数值显示位置

别担心，我帮你调整配置就能搞定这个需求！核心是正确配置饼图的dataLabels选项，既要关闭外部的原始数值显示，又要在扇区上方（或内部）展示格式化后的百分比。

完整修正代码示例 #

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="width: 600px; height: 400px;"></div>
<script>
Highcharts.chart('container', {
    chart: {
        type: 'pie'
    },
    title: {
        text: '饼图百分比展示示例'
    },
    plotOptions: {
        pie: {
            // 关键配置：调整数据标签的行为
            dataLabels: {
                enabled: true,
                // 把标签移到扇区上方/内部（负数是向中心靠近，可根据饼图大小调整数值）
                distance: -30,
                // 格式化标签内容，只显示百分比（保留1位小数）
                formatter: function() {
                    return this.percentage.toFixed(1) + '%';
                },
                // 可选：设置标签样式，提升可读性
                style: {
                    fontWeight: 'bold',
                    color: '#333'
                }
            },
            // 移除外部标签的连接线（不需要可开启）
            connectorWidth: 0
        }
    },
    series: [{
        name: '占比',
        data: [
            ['分类1', 26],
            ['分类2', 78],
            ['分类3', 15],
            ['分类4', 32]
        ]
    }]
});
</script>

关键配置说明 #

• dataLabels.distance: -30：控制标签与饼图中心的距离，负数会让标签向扇区内部/上方移动，你可以根据饼图尺寸调整数值（比如-20、-40），找到最合适的位置。
• formatter函数：通过this.percentage获取当前扇区的百分比，用toFixed(1)保留1位小数并拼接%符号，确保只显示百分比内容。
• connectorWidth: 0：如果原来的外部标签带有连接线，设置为0可以直接移除，让界面更简洁。
• 自动隐藏原始数值：因为我们在formatter里只返回了百分比，原始的数值会被自动替换，不会再显示在外部。

如果之前你的formatter没生效，大概率是配置层级不对——一定要确保formatter写在plotOptions.pie.dataLabels下面，别放错位置哦！

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