Highcharts синхронизированный график с выпадающим списком вместо легенды

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