Redimensionner Highcharts après un évènement Résolu/Fermé

Question

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 :
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,
Configuration: Configuration: Configuration: Windows / Chrome 54.0.2840.99

Utilisateur anonyme · Answer

salut essai :

var element = document.getElementById('resize-menu-button');

element.addEventListener('click', function() {
        window.dispatchEvent(new Event('resize'));
    });

Utilisateur anonyme · Answer

hello, tu as des erreurs dans la console ?

Utilisateur anonyme · Answer

Salut,
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().

Redimensionner Highcharts après un évènement

3 réponses

Discussions similaires