在Highcharts中显示/隐藏plotband-Javascript

我有一张有几个标绘带的海图。我在图表中添加了一个按钮，用于显示/隐藏绘图带。据我所知，唯一的方法是实际添加/删除plotband，因为plotband没有显示/隐藏选项（如果我弄错了，请纠正我？）

因为图表有多个绘图条带，所以我将它们添加到了一个数组中。然后将PlotBand数组添加到图表中。然后，一个按钮将删除或添加它们

以下是我所做的：

创建plotbands阵列：

var startDates = [1413417600000, 1412035200000];
var endDates = [1414454400000, 1412208000000];
var id = ['first', 'second'];
var plotBands = [];
var i = 0;

while (i < endDates.length) {
    plotBands.push({
        color: 'rgba(0,255,0,0.4)',
        from: startDates[i],
        to: endDates[i],
        id: id[i]
    });
    i++;
}

xAxis: {
    plotBands: plotBands,
    type: 'datetime'
}

var hasPlotBand = true;
    chart = $('#arearange').highcharts();
    $button = $('#button');

$button.click(function () {
    if (!hasPlotBand) {
        chart.xAxis[0].addPlotBand(plotBands[id=='first']); //this line is not working
        $button.html('Remove plot band');
    } else {
        chart.xAxis[0].removePlotBand('first');
        $button.html('Add plot band');
    }
    hasPlotBand = !hasPlotBand;
});

链接到按钮以显示/隐藏绘图栏的功能：

var startDates = [1413417600000, 1412035200000];
var endDates = [1414454400000, 1412208000000];
var id = ['first', 'second'];
var plotBands = [];
var i = 0;

while (i < endDates.length) {
    plotBands.push({
        color: 'rgba(0,255,0,0.4)',
        from: startDates[i],
        to: endDates[i],
        id: id[i]
    });
    i++;
}

xAxis: {
    plotBands: plotBands,
    type: 'datetime'
}

var hasPlotBand = true;
    chart = $('#arearange').highcharts();
    $button = $('#button');

$button.click(function () {
    if (!hasPlotBand) {
        chart.xAxis[0].addPlotBand(plotBands[id=='first']); //this line is not working
        $button.html('Remove plot band');
    } else {
        chart.xAxis[0].removePlotBand('first');
        $button.html('Add plot band');
    }
    hasPlotBand = !hasPlotBand;
});

最初创建图表时，将正确添加打印标注栏。使用id='first'删除正确的标注栏可以正确删除标注栏

问题是，我不确定如何再次重新添加PlotBand，即：我需要再次重新添加id='first'标注栏。我尝试了以下方法来重新添加乐队，但均无效：

chart.xAxis[0].addPlotBand(plotBands[id=='first']);

及

出于测试目的，我还尝试重新添加整个plotbands阵列（不尝试针对特定id）。但这也不起作用

---

谢谢您的建议。

您还可以在SVG元素上进行操作

$('#btn').click(function () {
        var plotBand = chart.yAxis[0].plotLinesAndBands[0];

        if (plotBand.hidden) {
            plotBand.hidden = false;
            plotBand.svgElem.show();
        } else {
            plotBand.hidden = true;
            plotBand.svgElem.hide();
        }
    });

---

示例：

谢谢，但是当您有不同的绘图带或绘图带的不同部分时会出现问题。需要的是只删除绘图带的某一部分，而不是全部。如果您查看原始帖子，您会看到我有两个绘图带，id='first'和id='second'。我需要能够删除一个部分并重新添加它。请给出一个例子来说明这一点好吗？谢谢。你需要使用任何循环来找到一个定义了ID的pltoband。这种方法有一个问题：每次图表更新（例如，缩放或重置缩放）时，隐藏的SVG都会再次显示。