javascript - 选中/取消选中复选框时切换特定的 Highcharts

Question

我有多个使用 highcharts 绘制的散点图，并且我有一个复选框列表，其中的标签对应于 highcharts 中的图例标识符，并且我希望具有这样的功能，以便当我选中/取消选中该框时，它会使相应的图可见/动态隐藏。我该如何实现这个目标？

Answer 1

要实现您期望的功能，您需要在每个 onchange 上使用 Series.update() 函数切换 Series.showInLegend 标志复选框上的 code> 事件，并调用本系列的 setVisible() 函数来切换其在绘图上的可见性。下面是如何实现它的示例代码:

首先，您需要定义类似于以下内容的复选框:

<input id="series1" type="checkbox" checked>Installation<br/>
<input id="series2" type="checkbox" checked>Manufacturing<br/>
<input id="series3"type="checkbox" checked>Sales and Distribution<br/>

然后对每个复选框进行操作，并向其中添加一个 onchange 事件函数。在这个函数中，您需要更新适当的系列 showInLegend 值，正如我上面所说的。您应该能够通过检查系列对象中是否存在 legendItem 来做到这一点。看一下下面的代码:

var checkboxes = ['series1', 'series2', 'series3']

checkboxes.forEach((elem, i) => {
    var checkbox = document.getElementById(elem)
    checkbox.onchange = function() {

        chart.series[i].update({
            showInLegend: chart.series[i].legendItem ? false : true
        })
        chart.series[i].setVisible()

    }
})

实例:https://jsfiddle.net/uuwu48cm/