Highcharts: Masquer et afficher la légende
J'aimerais être en mesure d'activer /désactiver la visibilité de la légende d'un graphique lorsque l'utilisateur clique sur un bouton.
J'ai essayé de cacher la légende en utilisant les sans-papiers destroy()
méthode, cependant lorsque j'essaie de rendre à nouveau la légende et c'est des éléments, les éléments s'affichent en haut à gauche de la carte au lieu de dans la légende. Les éléments ne semblent pas avoir l'un de leurs gestionnaires d'événements ci-joint (en cliquant sur un élément n'est plus active un de la série).
Est-il une meilleure façon de le faire? J'ai pour soutenir à la fois SVG et VML implémentations, donc suis à la recherche d'une solution qui s'adresse à la fois.
$('#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();
}
});
OriginalL'auteur cfs | 2013-07-25
Vous devez vous connecter pour publier un commentaire.
Dans le cas où vous détruire la légende, alors vous avez besoin de générer plein de légende. Solution la plus simple est d'utiliser hide () et show() pour les éléments.
http://jsfiddle.net/sbochan/3Bh7b/1/
ne fonctionne pas pour moi. Depuis mon légendes étaient assez grand espace et du temps, je cherchais une façon de les obtenir déplacé de sorte que le graphique a plus d'espace pour tirer. Votre solution juste masquer/afficher sur la légende et n'a pas de travail dans certains cas. J'ai donc écrit mon propre - voir ma solution.
Dans la dernière version de la légende.la boîte n'est pas défini. Autre que cela fonctionne bien.
OriginalL'auteur Sebastian Bochan
Ici est une solution intéressante, je suis venu avec - travaux 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 à votre page HTML, et vous obtenez 3 nouvelles fonctions ajoutées à la Carte:
myChart.legendHide()
,myChart.legendShow()
etmyChart.legendToggle()
Voir les exemples:
dans Highcharts flottant dans la légende: http://jsfiddle.net/P2g6H/
dans Highstocks statique légende: http://jsfiddle.net/ps6Pd/
viens de le faire. les réservoirs.
OriginalL'auteur floww
Une manière assez simple de faire cela est de faire une boucle sur la série et les mettre à jour pour ne pas afficher dans la légende. Cela vous permet d'animer et de montrer la légende et de pouvoir utiliser la totalité de l'espace dans le conteneur, que les méthodes sont intégrées.
Par exemple, le basculement des éléments de légende ressemblerait à ceci:
Voir cette JSFiddle de démonstration de bascule, d'afficher et de masquer à l'aide de boutons.
La meilleure solution et cela fonctionne pour highcharts v 5.0. Merci!
OriginalL'auteur Halvor Holsten Strand
Aussi simple que
Merci de travailler pour moi.
OriginalL'auteur MatteoOreficeIT
Mise à jour d'un code peu de la réponse choisie. Maintenant, il va augmenter l'espace lorsque l'option afficher/masquer la légende.
OriginalL'auteur Ali
Jusqu'à présent seule solution de travail dans le monde:
Rendu manuellement ne fonctionne pas (en cachant la légende.boîte etc, toujours si il y a plusieurs pages dans la légende, puis bouton navigateur de séjours).
setData
appels moteur de rendu interne qui agit très bien et fait tout ce qui est nécessaire.Hmm, peut-être en fin de compte, vous pouvez le faire:
chart.setSize(
chartWidth,
chartHeight+chart.legend.fullHeight,
false
);
OriginalL'auteur anrilafosel