将 Highcharts 图例中的一长串项目变成下拉列表

Question

我 have a graph 将大约 40 个项目作为单独的行。现在，我需要添加转动 on/off 或通过 legend/menu/dropdown 列表突出显示其中任何一项的功能。

通常情况下，当图例打开时，我可以点击任何项目并在那里打开它on/off。然而，很长的图例确实歪曲了我的图表（之美）。有没有办法用下拉菜单实现同样的事情（转on/off）？这样在视觉上会更有吸引力。

否则，不得已，一个简单的按钮 "turn on/off" 图例就足够了（例如 this example，尽管 "turn on" 不起作用）。

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

您可以根据系列准备动态下拉图例。您只需要遍历每个系列并作为选项推送到 select。然后添加事件更改，其中你 show/hide serie.

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/

将 Highcharts 图例中的一长串项目变成下拉列表

Turn long list of items in Highcharts legend into dropdown

javascript

legend

highcharts