Highcharts: Legende ein- und ausblenden

Question

Ich möchte die Sichtbarkeit der Legende eines Diagramms ändern können, wenn der Benutzer auf eine Schaltfläche klickt.

Ich habe versucht, die Legende Ausblenden die undokumentierten destroy() Methode verwenden, aber wenn ich versuche, die Legende neu zu machen und es ist Artikel, erscheinen die Elemente in der oberen linken Ecke des Diagramm statt in der Legende. Die Objekte scheinen auch keine ihrer Event-Handler angehängt zu haben (ein Klick auf einen Gegenstand schaltet nicht länger eine Reihe um).

Gibt es einen besseren Weg, dies zu tun? Ich muss sowohl SVG- als auch VML-Implementierungen unterstützen und suche daher nach einer Lösung, die beides angeht.

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

Im Fall, wenn Sie Legende zerstören, dann müssen Sie die volle Legende erzeugen. Einfachere Lösung ist die Verwendung der Funktion hide()/show() für Elemente.

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

Hier ist eine interessante Lösung kam ich mit - arbeitet für Highcharts3 und Highstocks1.3 https://bitbucket.org/jkowalleck/highcharts-legendextension

Alles was Sie tun müssen, ist die HighchartsExtension ich zu Ihrem HTML schrieb hinzufügen Seite, und Sie erhalten 3 neue Funktionen zum Diagramm hinzugefügt:
myChart.legendHide() myChart.legendShow() und myChart.legendToggle()

Siehe Beispiele:
in Highcharts mit schwimmender Legende: http://jsfiddle.net/P2g6H/
in Highstock mit statischer Legende: http://jsfiddle.net/ps6Pd/

Answer 3

Eine recht einfache Möglichkeit, dies über die Serie, ist eine Schleife zu machen und sie aktualisieren nicht in der Legende zeigen. Auf diese Weise können Sie in und aus, welche die Legende und nutzen den gesamten Behälterraum animieren, wie die Methoden eingebaut sind

Zum Beispiel Legende Artikel Makel würde wie folgt aussehen:.

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

Siehe this JSFiddle demonstration zum Wechseln, Anzeigen und Verbergen mit den Tasten.

Answer 4

Aktualisieren Sie einen Code wenig ausgewählter Antwort. Jetzt wird der Platz vergrößert, wenn die Legende angezeigt wird.

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

Bisher wurden nur Arbeitslösung in der Welt:

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

Rendering manuell nicht funktioniert (versteckt legend.box etc, immer wenn es mehrere Seiten in der Legende, dann bleibt Browser-Schaltfläche) . setData ruft internen Renderer auf, der ziemlich gut funktioniert und alles was benötigt wird.
Hmm, vielleicht am Ende können Sie dies tun:
chart.setSize( chartWidth, chartHeight+chart.legend.fullHeight, false );

Answer 6

So einfach wie

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