将Highcharts图例中的长项列表转到下拉列表中

Question

我have a graph有40个项目作为单独的行。现在，我需要通过图例/菜单/下拉列表添加打开/关闭或突出显示任何这些功能。

通常，当图例打开时，我可以点击任何项目并在那里打开/关闭它。然而，这个漫长的传说真的扭曲了我的图形的美感。有没有办法通过下拉菜单实现相同的功能（打开/关闭）？这可能在视觉上更具吸引力。

否则，最后的手段，一个简单的按钮＆＃34;打开/关闭＆＃34;传说需要足够（如this example，尽管＆＃34;开启＆＃34;不起作用）。

// 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/