如何在Highcharts饼图图例中添加带百分比的y值

嗨，我来帮你搞定饼图图例显示百分比的问题～

要实现图例里显示「扇区名称-百分比」的格式，只需要在Highcharts的配置里自定义图例标签的格式化函数就行，下面是修改后的完整代码，我标了关键部分：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px; width: 600px;"></div>

<script>
Highcharts.chart('container', {
    chart: {
        type: 'pie'
    },
    title: {
        text: '你的饼图标题'
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer'
        }
    },
    // 关键配置：自定义图例显示格式
    legend: {
        labelFormatter: function() {
            // this指向当前图例对应的饼图数据点
            // Highcharts会自动计算好百分比，用numberFormat处理成整数格式
            return `${this.name} - ${Highcharts.numberFormat(this.percentage, 0)}%`;
        }
    },
    series: [{
        name: '数值',
        colorByPoint: true,
        data: [
            { name: '黄色扇区', y: 12 },
            { name: '红色扇区', y: 10 },
            { name: '蓝色扇区', y: 33 }
            // 可以继续添加其他扇区数据
        ]
    }]
});
</script>

关键说明： #

• legend.labelFormatter是Highcharts提供的图例文本自定义钩子，函数里的this对应每个饼图数据点。
• this.percentage是Highcharts自动计算的该数据点占总和的百分比数值，不用你手动计算～
• Highcharts.numberFormat(this.percentage, 0)用来把百分比格式化为整数（如果需要保留1位小数，把第二个参数改成1即可）。

这样修改后，图例就会显示成你想要的「黄色扇区-12%」「红色扇区-10%」的样式啦！

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