Highcharts点击图例时plotBands的hide()与show()方法不生效问题

问题根因 #

• 直接调用svgElem.hide()/show()仅临时修改了DOM元素的可见性，当图表触发重绘（如缩放、调整窗口大小）时，Highcharts会按plotBand的原始配置重新渲染，之前的隐藏状态会丢失
• 原代码中this.xAxis的引用有误，事件回调中的this指向当前点击的散点系列，需要通过this.chart.xAxis[0]获取正确的X轴实例

修正方案 #

通过同步标记plotBand的隐藏状态，同时监听图表重绘事件保证显隐状态持续生效，修正后完整代码如下：

var a = 1,
    b = 2,
    c = 4,
    d = 5,
    dados = [[a, b, '#32CD32','manutenção','Manutenção'], [c, d, '#FF0000','falha','Falha']];

Highcharts.chart('container', {
    chart: {
        zoomType: 'xy',
        // 监听重绘事件，同步所有plotBand的显隐状态
        events: {
            redraw: function() {
                this.xAxis[0].plotLinesAndBands.forEach(band => {
                    if (band._hidden) {
                        band.svgElem.hide();
                    }
                })
            }
        }
    },
    showInLegend: true,
    title: {
        text: 'Zoom Geral e Barras Verticais'
    },
    yAxis: {
        scrollbar: {
            enabled: true,
            showFull: false
        }
    },
    plotOptions: {
        series: {
            shadow: false,
            borderWidth: 0,
            events: {
                legendItemClick: function(e) {
                    var seriesId = this.userOptions.id;
                    // 排除默认的折线系列，只处理绑定了plotBand的散点系列
                    if (!seriesId) return;
                    // 获取正确的X轴实例
                    var targetBand = this.chart.xAxis[0].plotLinesAndBands.find(band => band.id === seriesId);
                    if (!targetBand) return;
                    if (this.visible) {
                        // 隐藏时添加自定义标记
                        targetBand._hidden = true;
                        targetBand.svgElem.hide();
                    } else {
                        // 显示时移除自定义标记
                        delete targetBand._hidden;
                        targetBand.svgElem.show();
                    }
                }
            }
        }
    },
    series: [{
        name: 'Série A',
        data: [-10, 31, 35, 40, 15, 10]
    }]
}, function() {
    for (let i = 0; i < dados.length; i++) {
        this.xAxis[0].addPlotBand({
            from: dados[i][0],
            to: dados[i][1],
            color: dados[i][2],
            name: dados[i][4],
            id: dados[i][3]
        });
        this.addSeries({
            marker: {
                symbol: 'square',
                radius: 20
            },
            name: dados[i][4],
            color: dados[i][2],
            type: 'scatter',
            id: dados[i][3]
        });
    }
});

关键改动说明 #

• 新增图表redraw事件监听，每次重绘后自动同步所有plotBand的显隐状态，避免缩放等操作后隐藏的plotBand重新出现
• 修正了X轴实例的引用路径，确保能正确找到对应的plotBand对象
• 新增了系列ID的非空判断，避免默认折线系列点击时报错

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