Highcharts: Ukryj i pokaż legendę

Question

Chciałbym móc przełączać widoczność legendy wykresu, gdy użytkownik kliknie przycisk.

Próbowałem ukryć legendę przy użyciu nieudokumentowanej metody destroy(), jednak gdy próbuję ponownie wyrenderować legendę i jej elementy, elementy pojawiają się w lewym górnym rogu wykresu zamiast w legendzie. Wydaje się również, że elementy nie mają dołączonej obsługi zdarzeń (kliknięcie elementu nie powoduje już przełączenia serii).

Czy jest lepszy sposób to zrobić? Muszę obsługiwać zarówno implementacje SVG, jak i VML, więc szukam rozwiązania, które byłoby odpowiednie dla obu.

JSFiddle Example

$('#updateLegend').on('click', function (e) { 
    var enable = !chart.options.legend.enabled; 
    chart.options.legend.enabled = enable; 

    if (!enable) { 
     chart.legend.destroy(); //"hide" legend 
    } else { 
     var allItems = chart.legend.allItems; 

     //add legend items back to chart 
     for (var i = 0; i < allItems.length; i++) { 
      var item = allItems[i]; 
      item.legendItem.add(); 
      item.legendLine.add(); 
      item.legendSymbol.add(); 
     } 

     //re-render the legend 
     chart.legend.render(); 
    } 
}); 

Answer 1

W przypadku gdy zniszczyć legendę, to trzeba wygenerować pełną legendę. Prostszym rozwiązaniem jest użycie funkcji hide()/show() dla elementów.

http://jsfiddle.net/sbochan/3Bh7b/1/

$('#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 2

Oto ciekawe rozwiązanie wymyśliłem - pracuje dla Highcharts3 i Highstocks1.3 https://bitbucket.org/jkowalleck/highcharts-legendextension

Wszystko co musisz zrobić, to dodać HighchartsExtension napisałem do kodu HTML stronę, a do wykresu dodano 3 nowe funkcje:
myChart.legendHide(),
myChart.legendShow() i
myChart.legendToggle()

Zobacz przykłady:
w Highcharts pływających Legenda: http://jsfiddle.net/P2g6H/
w Highstocks z legendą statycznej: http://jsfiddle.net/ps6Pd/

Answer 3

dość prosty sposób, aby ta ma pętlę nad serii i aktualizować je nie wyświetlać w legendzie. To pozwala animować i poza przedstawiający legendę i wykorzystać całą przestrzeń kontenera, jako metody są zbudowane w

Na przykład przełączanie pozycji legendy będzie wyglądać następująco:.

$('#toggleButton').click(function() { 
    for(i in chart.series) 
     chart.series[i].update({ showInLegend: chart.series[i].options.showInLegend == null ? false : !chart.series[i].options.showInLegend }, false); 
    chart.redraw(); 
}); 

Zobacz this JSFiddle demonstration do przełączania, pokazywania i ukrywania za pomocą przycisków.

Answer 4

Zaktualizuj kod odrobinę wybranej odpowiedzi. Teraz zwiększy przestrzeń, gdy pojawi się legenda show/hide.

$('#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; 
    } 

    var series = chart.series[0]; 
     $(chart.series).each(function(){ 
      this.setVisible(true, false); 
     }); 
     chart.redraw(); 

}); 

Answer 5

Do tej pory jedynym rozwiązaniem pracuje w świecie:

for (i = 0; i < chart.series.length; i++) 
      chart.series[i].options.showInLegend = true; 
      chart.series[0].setData(chart.series[0].data); 

Rendering ręcznie nie działa (ukrywanie legend.box itp, zawsze, gdy istnieje wiele stron w legendzie, a następnie przycisk przeglądarka pobyty) . setData dzwoni do wewnętrznego renderera, który działa całkiem nieźle i robi wszystko, co jest potrzebne.
Hmm, może w końcu można to zrobić:
chart.setSize( chartWidth, chartHeight+chart.legend.fullHeight, false );

Answer 6

Proste jak

myChartObject.legend.update({ 
    enabled:true 
)};