如何在Highcharts中按组控制图例项的禁用与启用

核心思路 #

给每个系列添加自定义分组标记，在图例点击事件中，根据当前点击系列的分组，统一控制同组系列显示、异组系列隐藏，同时禁用默认的单系列切换行为。

实现代码 #

Highcharts.chart('container', {
    series: [
        { name: 'Movie1', data: [1, 2, 3], custom: { group: 'movie' } },
        { name: 'Movie2', data: [4, 5, 6], custom: { group: 'movie' } },
        { name: 'Game1', data: [7, 8, 9], custom: { group: 'game' } },
        { name: 'Game2', data: [10, 11, 12], custom: { group: 'game' } }
    ],
    legend: {
        itemClick: function(e) {
            const targetGroup = this.custom.group;
            // 遍历所有系列，按组切换显示状态
            this.chart.series.forEach(series => {
                if (series.custom.group === targetGroup) {
                    series.visible || series.show();
                } else {
                    series.visible && series.hide();
                }
            });
            // 阻止默认的单系列切换逻辑
            return false;
        }
    }
});

关键说明 #

1. 分组标记：通过series.custom.group给每个系列指定所属分组，这是判断分组的依据。
2. 批量控制可见性：遍历图表所有系列，对同组系列强制显示（如果当前隐藏则调用show()），异组系列强制隐藏（如果当前显示则调用hide()）。
3. 禁用默认行为：返回false来阻止Highcharts默认的“点击图例切换单个系列显示/隐藏”的逻辑，避免和自定义分组控制冲突。
4. 替代this.visible=false：不需要直接修改this.visible，而是使用官方提供的show()/hide()方法来控制系列状态，这能确保图表的状态同步更新（包括图例样式、数据点显示）。

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