Highcharts饼图过滤异常求助：过滤后剩余区块占满整个饼图

问题出在Highcharts默认的图例点击行为：点击图例时会直接隐藏对应饼块，剩余饼块自动重新计算占比填满整个饼图。要实现点击图例后置灰对应区块并保留原比例，需要修改图例点击事件的处理逻辑，通过禁用（而非隐藏）饼块来实现效果。

修改步骤 #

在饼图的plotOptions.pie配置中添加legendItemClick事件处理函数，替换默认行为：

plotOptions: {
    pie: {
        size: 270,
        innerSize:70,
        allowPointSelect: true,
        cursor: 'pointer',
        dataLabels: {
            enabled: true,
            distance: 30,
            padding: 1,
            style: {
                fontSize: "12px"
            },
            format: '{point.y:.1f}%'
        },
        showInLegend: true,
        // 新增：自定义图例点击事件
        legendItemClick: function () {
            // 切换当前饼块的禁用状态
            this.update({
                disabled: !this.disabled
            });
            // 阻止默认的隐藏/显示行为
            return false;
        }
    }
}

原理说明 #

• disabled: true会将饼块置灰，且不会参与饼图的比例计算，保留原有的大小占比
• return false阻止了Highcharts默认的隐藏饼块逻辑
• 再次点击图例可以恢复饼块的正常状态

完整修改后的initializeChart函数片段 #

// Create chart
const chart = Highcharts.chart(chartId, {
    chart: {
        type: 'pie',
        styledMode: false
    },
    title: {
        text: chartTitle
    },
    colors: ['#1a4480', '#e52207', '#e66f0e', '#ffbe2e', '#fee685', '#538200', '#04c585', '#97d4ea', '#009ec1', '#0076d6', '#adadad', '#8168b3', '#d72d79', '#f2938c' ],
    tooltip: {
        pointFormat: '</b> {point.y:.1f}%'
    },
    series: [
        {
            data: chartData(table)
        }
    ],
    credits: {
        enabled: false
    },
    plotOptions: {
        pie: {
            size: 270,
            innerSize:70,
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                distance: 30,
                padding: 1,
                style: {
                    fontSize: "12px"
                },
                format: '{point.y:.1f}%'
            },
            showInLegend: true,
            // 自定义图例点击行为
            legendItemClick: function () {
                this.update({ disabled: !this.disabled });
                return false;
            }
        }
    }
});

修改后，点击图例时对应饼块会置灰并保留原比例，剩余饼块不会重新计算占比填满整个饼图，符合需求。

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