Question

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

由于图表有多个绘图带，我已将它们添加到数组中。然后将绘图带阵列添加到图表中。然后按钮会删除或添加它们。

这就是我所做的：

创建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;
});

最初创建图表时，可以正确添加绘图带。使用id ='first'正确删除绘图带以删除正确的带。

问题是我不知道如何再次重新添加情节带，即：我需要再次重新添加id ='first'频段。我已尝试以下方法重新添加乐队但不起作用：

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

和

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

出于测试目的，我还尝试重新添加整个plotbands数组（通过不尝试定位特定的id。但这也不起作用。

感谢您的任何建议。

Answer 1

您也可以操纵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();
        }
    });

示例：http://jsfiddle.net/stypmpde/

在Highcharts中显示/隐藏plotband - Javascript

1 个答案: