將Highcharts圖例中的長項目列表轉換爲下拉列表

I have a graph將大約40項作爲單獨的行。現在，我需要添加打開/關閉功能或通過圖例/菜單/下拉列表突出顯示其中的任何功能。將Highcharts圖例中的長項目列表轉換爲下拉列表

通常，當圖例打開時，我可以點擊任何項目並將其打開/關閉。然而，這個很長的傳說真的會扭曲我的圖形的美感。有什麼方法可以通過下拉菜單實現相同的功能（打開/關閉）？這可能在視覺上更具吸引力。否則，最後的手段，一個簡單的按鈕「打開/關閉」傳說需要足夠的時間（如this example，雖然「打開」不起作用）。

Highcharts graph with long legend

// 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; 
     } 
    }); 
}

來源

2015-05-06 luftikus143

在這裏，你沒有**'legend.box' **因此它不工作。評論隱藏和顯示**盒**，它將起作用：http://jsfiddle.net/3Bh7b/118/ –

下拉式傳說的簡單演示：http://jsfiddle.net/b8chchjo/ –

做你需要把這個系列分成幾個類別，比如「1980-1989全部」？此外，+1，因爲這是一個美麗的圖表。 – wergeld

你可以準備動態下拉傳說的基礎上，系列。只有你需要循環每個serie和push作爲選項來選擇。然後添加事件更改，顯示/隱藏系列。

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/

來源

2015-05-07 11:08:01

將Highcharts圖例中的長項目列表轉換爲下拉列表

回答

相關問題