高图表将图表与下拉选择同步，而不是图例

Question

我正在寻找一些帮助，将自定义下拉列表连接到以下三个同步图表的图表图例。

基本上，我想连接 3 个下拉菜单来控制每个图表的图例。这可能吗？

看我的小提琴：http://jsfiddle.net/s5xch17m/2

<div class="panel panel-default">
<div class="panel-body">

<div class="col-lg-2">
<div class="button-group">
<button type="button" class="btn  btn-block btn-default btn-sm dropdown-toggle" data-toggle="dropdown"><!-- <span class="glyphicon glyphicon-cog"></span> --> Movement Direction</button>
<ul class="dropdown-menu">
<li><a href="#" class="small" data-value="option1" tabIndex="-1"><input type="checkbox"/>&nbsp;Normal</a></li>
<li><a href="#" class="small" data-value="option2" tabIndex="-1"><input type="checkbox"/>&nbsp;Reverse</a></li>
</ul>
</div>
</div>
<div class="col-lg-2">
<div class="button-group">
<button type="button" class="btn btn-block btn-default btn-sm dropdown-toggle" data-toggle="dropdown"><!-- <span class="glyphicon glyphicon-cog"></span> --> Select Trends</button>
<ul class="dropdown-menu">
<li><a href="#" class="small" data-value="option1" tabIndex="-1"><input type="checkbox"/>&nbsp;RMS</a></li>
<li><a href="#" class="small" data-value="option2" tabIndex="-1"><input type="checkbox"/>&nbsp;Peak</a></li>
<li><a href="#" class="small" data-value="option3" tabIndex="-1"><input type="checkbox"/>&nbsp;Direction</a></li>
</ul>
</div>
</div>
<div class="col-lg-2">
<div class="button-group">
<button type="button" class="btn btn-block  btn-default btn-sm dropdown-toggle" data-toggle="dropdown"><!-- <span class="glyphicon glyphicon-cog"></span> --> Select Filters</button>
<ul class="dropdown-menu">
<li><a href="#" class="small" data-value="option1" tabIndex="-1"><input type="checkbox"/>&nbsp;Location Temperature</a></li>
<li><a href="#" class="small" data-value="option2" tabIndex="-1"><input type="checkbox"/>&nbsp;Minimum</a></li>
<li><a href="#" class="small" data-value="option3" tabIndex="-1"><input type="checkbox"/>&nbsp;Maximum</a></li>
<li><a href="#" class="small" data-value="option4" tabIndex="-1"><input type="checkbox"/>&nbsp;Threshold</a></li>
</ul>

</div>
</div>
</div>
</div>
</div>
</div>

这是我试图实现的示例 - 类似于指标：https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/stock/demo/advanced-stock-chart/

Answer 1

可以将元素的属性设置为与它们所表示的系列名称相同data-value属性。像option1或option2这样的值意义不大。然后，在向下钻取中使用选项链接系列要容易得多：

Highcharts.each(charts, function(chart) {
Highcharts.each(chart.series, function(s) {
if (s.name === val) {
if (s.visible) {
s.hide();
} else {
s.show();
}
}
});
});

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

API 参考：https://api.highcharts.com/class-reference/Highcharts.Series#show