plotBands 隐藏和显示参数在 Highcharts 中不起作用

Question

当我在图例中单击时，plotBands 参数 hide() 和 show() 不起作用。

我希望我可以单击图例并删除特定的 PlotBand。

我尝试使用 destroy() 但它会清除 html dom 并且当我再次单击图例时我无法 return 使用 PlotBand。

我找不到如何删除和重新打开 PlotBand：

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

Highcharts.chart('container', {
        chart: {
            zoomType: 'xy',

        },
        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){
                  
                  console.log(this.userOptions)

                  var ids = this.userOptions['id'];
                  console.log(ids)

                  if(this.userOptions['id'] === ids){
                    var hides = this.xAxis.plotLinesAndBands.filter(id => id.id == ids);
                    
                    if(this.visible == true){
                        hides[0].svgElem.hide()
                    } else {
                        hides[0].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]
            }, )
            }   
        }     
)

Answer 1

图表未被隐藏，因为图表是在事件发生后重新绘制的。您可以从回调函数中 return false ，但所有绘图带在另一次重绘后都将可见。示例：http://jsfiddle.net/BlackLabel/m2xrjhLk/

我推荐你remove/add图例上的情节带点击：

    plotOptions: {
        series: {
            ...,
            events: {
                legendItemClick: function(e) {
                    var id = this.options.id;

                    if (this.visible) {
                        this.xAxis.removePlotBand(id);
                    } else {
                        this.xAxis.addPlotBand(plotBands.find(
                            plotBand => plotBand.id === id
                        ));
                    }
                }
            }
        }
    }

现场演示： http://jsfiddle.net/BlackLabel/n1jgew27/

plotBands 隐藏和显示参数在 Highcharts 中不起作用

plotBands Hide and Show parameters do not work in Highcharts

javascript

highcharts