it-swarm.com.de

Highcharts: Legende ausblenden und anzeigen

Ich möchte in der Lage sein, die Sichtbarkeit der Legende eines Diagramms zu ändern, wenn der Benutzer auf eine Schaltfläche klickt.

Ich habe versucht, die Legende mit der undokumentierten destroy()-Methode auszublenden. Wenn ich jedoch versuche, die Legende und ihre Elemente erneut zu rendern, werden die Elemente oben links im Diagramm und nicht in der Legende angezeigt. An die Objekte sind offenbar auch keine Event-Handler angehängt (durch Klicken auf ein Element wird eine Reihe nicht mehr umgeschaltet).

Gibt es einen besseren Weg, dies zu tun? Ich muss sowohl SVG- als auch VML-Implementierungen unterstützen, also suche ich nach einer Lösung, die beide anspricht.

JSFiddle-Beispiel

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

Wenn Sie die Legende zerstören, müssen Sie eine vollständige Legende generieren. Eine einfachere Lösung ist die 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;
        }
    });
14

Hier ist eine interessante Lösung, die ich mir ausgedacht habe - funktioniert für Highcharts3 und Highstocks1.3 https://bitbucket.org/jkowalleck/highcharts-legendextension

Alles, was Sie tun müssen, ist das Hinzufügen des HighchartsExtension , das ich Ihrer HTML-Seite geschrieben habe, und Sie erhalten 3 neue Funktionen, die dem Diagramm hinzugefügt wurden:
myChart.legendHide(),
myChart.legendShow() und
myChart.legendToggle()

Siehe die Beispiele:
in Highcharts mit schwebender Legende: http://jsfiddle.net/P2g6H/
in Highstocks mit statischer Legende: http://jsfiddle.net/ps6Pd/

14
floww

Eine recht einfache Möglichkeit, dies zu erreichen, besteht darin, die Reihe zu durchlaufen und sie so zu aktualisieren, dass sie nicht in der Legende angezeigt wird. Auf diese Weise können Sie die Legende ein- und ausblenden und den gesamten Containerplatz nutzen, da die Methoden eingebaut sind.

Das Umschalten von Legendenelementen würde beispielsweise so 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 diese JSFiddle-Demonstration zum Umschalten, Anzeigen und Ausblenden mithilfe von Schaltflächen.

So einfach wie

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

Aktualisieren Sie einen Code der ausgewählten Antwort. Jetzt wird der Platz vergrößert, wenn die Legende ein-/ausgeblendet 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();

});
0
Ali