将Highcharts图例中的长项列表变为下拉列表

Question

我有一个图表，其中约有40项是单独的线条。现在，我需要通过图例/菜单/下拉列表添加打开/关闭或突出显示其中任何功能的功能。

通常，打开图例时，我可以单击任何项​​目，然后在其中打开/关闭它。但是，很长的传说确实使我的图表歪斜了。有什么方法可以通过下拉菜单实现相同的功能（打开/关闭）？在视觉上这可能更具吸引力。

否则，万不得已时，一个简单的按钮“打开/关闭”图例就足够了（就像本示例一样，尽管“打开”不起作用）。

// turn legend on/off with HTML button
function(chart){
    $('#updateLegend').click(function (e) {
        var legend = chart.legend; 

        if(legend.display) {
            legend.group.hide();
            legend.box.hide();
            legend.display = false;
        } else {

            legend.group.show();
            legend.box.show();
            legend.display = true;
        }
    });
}

Answer 1

您可以根据系列准备动态下拉图例。您只需要循环遍历每个系列并作为选项推送即可选择。然后添加事件更改，在其中显示/隐藏系列。

var $customLegend = $('#customLegend').append('<select id="customSelect"></select>').find('select'),
        $option,
        serie;

    $customLegend.append('<option>Select serie</option>');

    $.each(chart.series, function(i, serie){
        $customLegend.append('<option>' + serie.name + '</option>');
    });

    $customLegend.change(function(){

        $option = $(this).val();

        serie = chart.get($option);

        if(serie.visible) {
            serie.hide();
        } else {
            serie.show();
        }
    });

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