Redimensionner Highcharts après un évènement
Résolu
Cybermate
Messages postés
221
Date d'inscription
Statut
Membre
Dernière intervention
-
Utilisateur anonyme -
Utilisateur anonyme -
Bonjour,
j'ai un petit souci avec mes graphiques générés avec HighCharts.
Nativement ces derniers se redimensionnent lorsque la fenêtre est resize.
Tout ceci est parfaitement opérationnel mais j'aimerais resize tous les graphiques lorsque la largeur de leur conteneur se retrouve modifiée.
Mon site web possède un menu à gauche qui peut être réduit/caché en cliquant sur un div. De ce fait quand on clique dessus le menu se réduit laissant plus d'espace au contenu :
Les graphiques ne se redimensionnent pas puisque à aucun moment la fenêtre du navigateur s'est resize. Ils restent à leur taille d'origine et sont plus petits puisque leurs contenus se retrouvent agrandis.
Il existe bien une fonction reflow :
reflow ()
Reflows the chart to its container. By default, the chart reflows automatically to its container following a window.resize event, as per the chart.reflow option. However, there are no reliable events for div resize, so if the container is resized without a window resize event, this must be called explicitly.
A moins de call l'event reflow à chaque clic sur le lien de redimensionnement du menu (ça va être assez redondant et pas très optimisé si la structure du site venait à changer), y a-t-il quand même un moyen de faire quelque chose comme ceci :
En espérant avoir bien expliqué,
Merci d'avance,
j'ai un petit souci avec mes graphiques générés avec HighCharts.
Nativement ces derniers se redimensionnent lorsque la fenêtre est resize.
Tout ceci est parfaitement opérationnel mais j'aimerais resize tous les graphiques lorsque la largeur de leur conteneur se retrouve modifiée.
Mon site web possède un menu à gauche qui peut être réduit/caché en cliquant sur un div. De ce fait quand on clique dessus le menu se réduit laissant plus d'espace au contenu :
Les graphiques ne se redimensionnent pas puisque à aucun moment la fenêtre du navigateur s'est resize. Ils restent à leur taille d'origine et sont plus petits puisque leurs contenus se retrouvent agrandis.
Il existe bien une fonction reflow :
reflow ()
Reflows the chart to its container. By default, the chart reflows automatically to its container following a window.resize event, as per the chart.reflow option. However, there are no reliable events for div resize, so if the container is resized without a window resize event, this must be called explicitly.
A moins de call l'event reflow à chaque clic sur le lien de redimensionnement du menu (ça va être assez redondant et pas très optimisé si la structure du site venait à changer), y a-t-il quand même un moyen de faire quelque chose comme ceci :
var element = document.getElementById('resize-menu-button');
element.addEventListener('click', function() {
HighCharts.reflow();// sans avoir à nommer les charts
});
En espérant avoir bien expliqué,
Merci d'avance,
A voir également:
- Redimensionner Highcharts après un évènement
- Creer un evenement sur whatsapp - Accueil - WhatsApp
- Évènement facebook disparu - Forum Facebook
- Illustrator je ne peux plus redimensionner ✓ - Forum Illustrator
- Redimensionner fenetre windows - Guide
- Redimensionner photo profil facebook - Forum Facebook
3 réponses
salut essai :
var element = document.getElementById('resize-menu-button');
element.addEventListener('click', function() {
window.dispatchEvent(new Event('resize'));
});
Non je n'ai aucune erreur dans la console.
Pourtant j'ai l'alert à chaque fois.
EDIT :
J'ai toujours l'alert bien que ça ne se redimensionne pas.
$('#menu_toggle').click(function(){
window.dispatchEvent(new Event('resize'));
alert("LOL");
});
Pourtant j'ai l'alert à chaque fois.
EDIT :
$('#menu_toggle').click(function(){
if(window.dispatchEvent(new Event('resize')))
{
alert("LOL");
}
});
J'ai toujours l'alert bien que ça ne se redimensionne pas.
Salut,
essaie avec la précédente méthode mais avec un delai.
Autrement, si la méthode reflow fonctionne, je pense que tu peux faire une boucle.
tu boucle sur chacun de tes hightchart et tu fais un reflow().
essaie avec la précédente méthode mais avec un delai.
var element = document.getElementById('resize-menu-button');
element.addEventListener('click', function () {
setTimeout(function () {
window.dispatchEvent(new Event('resize'));
}, 200);
});
Autrement, si la méthode reflow fonctionne, je pense que tu peux faire une boucle.
tu boucle sur chacun de tes hightchart et tu fais un reflow().
Hello, si sa a fonctionné je suis content pour toi. J’avoue que je n'étais pas certain du résultat. Je n'ai jamais utilisé highchart, mais je me disais que le délai pouvait peut être fonctionné si on attendais que le menu est fini de prendre sa place avant de trigger l'event.
Je pensais tout de même à une autre solution car je n'étais pas sur que cela fonctionnerais.
Bon weekend
Je pensais tout de même à une autre solution car je n'étais pas sur que cela fonctionnerais.
Bon weekend
Autrement dit voici un scénario :
- le site charge avec le menu "large",
- je clique, donc ça a pour effet de réduire le menu
- les charts se resize bien
- je reclique
- ça ne resize pas
Merci de ton aide, n'étant pas du tout expert en JS je vais me documenter sur ton code.