web-dev-qa-db-fra.com

Highcharts: Masquer et afficher la légende

J'aimerais pouvoir basculer la visibilité de la légende d'un graphique lorsque l'utilisateur clique sur un bouton.

J'ai essayé de masquer la légende à l'aide de la méthode non documentée destroy(). Cependant, lorsque j'essaie de rendre à nouveau la légende et ses éléments, ceux-ci apparaissent en haut à gauche du graphique et non dans la légende. Les gestionnaires d'événements ne semblent pas non plus être attachés aux éléments (cliquer sur un élément ne permet plus d'activer une série).

Y a-t-il une meilleure manière de faire cela? Je dois prendre en charge les implémentations SVG et VML. Je recherche donc une solution qui répondrait aux deux.

Exemple JSFiddle

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

Si vous détruisez une légende, vous devez générer une légende complète. Une solution plus simple consiste à utiliser la fonction hide ()/show () pour les éléments.

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
Sebastian Bochan

Voici une solution intéressante que j'ai proposée - fonctionne pour Highcharts3 et Highstocks1.3 https://bitbucket.org/jkowalleck/highcharts-legendextension

Tout ce que vous avez à faire est d’ajouter le HighchartsExtension j’ai écrit sur votre page HTML, et vous obtenez 3 nouvelles fonctions ajoutées au graphique:
myChart.legendHide(),
myChart.legendShow() et
myChart.legendToggle()

Voir les exemples:
dans Highcharts avec légende flottante: http://jsfiddle.net/P2g6H/
dans Highstocks avec légende statique: http://jsfiddle.net/ps6Pd/

14
floww

Une façon assez simple de le faire est de parcourir la série en boucle et de la mettre à jour pour ne pas l'afficher dans la légende. Cela vous permet d’animer et d’afficher la légende et d’utiliser tout l’espace conteneur, à mesure que les méthodes sont intégrées.

Par exemple, le basculement d'éléments de légende ressemblerait à ceci:

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

Voir cette démonstration de JSFiddle pour basculer, afficher et masquer à l’aide de boutons.

5
Halvor Holsten Strand

Aussi simple que

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

Mettre à jour un peu de code de la réponse sélectionnée. Maintenant, cela augmentera l'espace quand afficher/masquer la légende.

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