如何隐藏Highcharts图例中特定系列数据项并合并同名图例项

核心方案 #

要合并两个acknowledged图例项，只需两步：隐藏其中一个冗余的图例项，再让保留的单个图例项点击事件同步控制两个系列中对应数据点的显示/隐藏。

具体实现 #

1. 隐藏单个图例项
   在其中一个系列的acknowledged数据对象中添加showInLegend: false，直接让它不生成图例项。比如给Warnings系列里的该项设置：

2. 同步控制数据点可见性
   在图表的legend配置中重写itemClick事件，当点击保留的acknowledged图例项时，同时切换两个系列里acknowledged数据点的可见状态。

修改后的完整代码示例 #

series: [
    {
        name: 'Warnings',
        size: '90%',
        innerSize: '80%',
        dataLabels: {
            enabled: false,
        },
        data: [
            {
                name: 'warning',
                y: warning,
                color: 'yellow',
            },
            {
                name: 'acknowledged',
                y: acknowledgedWarnings,
                color: 'grey',
                showInLegend: false // 隐藏该系列的acknowledged图例项
            },
        ],
    },
    {
        name: 'Errors',
        size: '63%',
        innerSize: '75%',
        dataLabels: {
            enabled: false,
        },
        data: [
            {
                name: 'error',
                y: error,
                color: 'red'
            },
            {
                name: 'acknowledged',
                y: acknowledgedErrors,
                color: 'grey',
            },
        ],
    },
],
legend: {
    itemClick: function(e) {
        if (e.target.name === 'acknowledged') {
            // 定位两个系列的acknowledged数据点
            const warningAck = this.chart.series[0].data.find(point => point.name === 'acknowledged');
            const errorAck = this.chart.series[1].data.find(point => point.name === 'acknowledged');
            
            // 同步切换可见状态
            const newStatus = !warningAck.visible;
            warningAck.setVisible(newStatus);
            errorAck.setVisible(newStatus);
            
            // 阻止默认单个数据点切换逻辑
            return false;
        }
    }
}

补充说明 #

• showInLegend: false是最直接的隐藏冗余图例项的方式，比formatter等方法更高效可靠。
• 通过find定位目标数据点，同步切换状态后返回false，避免触发Highcharts默认的单个数据点独立切换行为。

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