Highcharts堆叠条形图：点击堆叠项后如何灰化其他条形/堆叠元素

需求说明（翻译后） #

我正在用Highcharts构建堆叠条形图，条形的每个分段都能点击，点击后会触发函数过滤表格数据。Highcharts默认的hover功能会把当前系列以外的数据灰化，我想要实现点击某堆叠区域后，灰化图表中除该区域外的所有其他堆叠/条形数据，再次点击就能恢复全部数据。目前我已经通过以下代码检测并获取到点击的堆叠项：

series: {
    cursor: 'pointer',
    point: {
        events: {
            click: function () {
                console.log('系列名称: ' + this.name + ', 堆叠名称: ' + this.series.name);
            }
        }
    }
}

此时控制台会返回：系列名称: 预估, 堆叠名称: 进行中的项目

实现方案 #

直接修改点击事件逻辑，通过维护选中状态来控制图表中各点的显示样式：

首先在全局（或图表初始化的作用域内）定义选中状态变量：

let selectedPoint = null; // 记录选中的点信息

然后更新series配置中的点击事件：

series: {
    cursor: 'pointer',
    point: {
        events: {
            click: function () {
                // 生成当前点的唯一标识：组合系列名和堆叠名
                const currentKey = `${this.name}_${this.series.name}`;
                const chart = this.series.chart;

                // 判断是否为再次点击已选中的点，是则恢复全部数据
                if (selectedPoint && selectedPoint.key === currentKey) {
                    chart.series.forEach(series => {
                        series.points.forEach(point => {
                            // 恢复点的原始颜色（优先用点自定义颜色，无则用系列颜色）
                            point.update({ color: point.options.color || series.color }, false);
                        });
                    });
                    selectedPoint = null;
                } else {
                    // 记录当前选中点的标识和原始颜色
                    selectedPoint = {
                        key: currentKey,
                        color: this.color
                    };

                    // 遍历所有系列和点，灰化非选中项
                    chart.series.forEach(series => {
                        series.points.forEach(point => {
                            const pointKey = `${point.name}_${series.name}`;
                            if (pointKey !== currentKey) {
                                // 设置灰化样式：半透灰色
                                point.update({ color: 'rgba(192,192,192,0.5)' }, false);
                            } else {
                                // 确保选中点显示原始颜色
                                point.update({ color: selectedPoint.color }, false);
                            }
                        });
                    });
                }
                // 批量更新后重新渲染图表
                chart.redraw();
            }
        }
    }
}

代码逻辑说明 #

• 用selectedPoint变量存储当前选中点的唯一标识和原始颜色，用于判断是否重复点击
• 点击时若为重复点击，遍历所有点恢复其原始颜色，清空选中状态
• 若为新点，遍历所有点，将非当前点设置为半透灰色（灰化效果），当前点保持原色
• 最后调用chart.redraw()统一更新图表，避免多次渲染影响性能

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