Redimensionner Highcharts après un évènement

Résolu/Fermé

Cybermate Messages postés 222 Date d'inscription samedi 25 juillet 2015 Statut Membre Dernière intervention 27 octobre 2018 - Modifié par Cybermate le 16/02/2017 à 12:02
Utilisateur anonyme - 3 mars 2017 à 07:04

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,

A voir également:

Redimensionner Highcharts après un évènement
Evenement 410 kernel pnp ✓ - Forum Windows 10
Comment redimensionner une photo pour fond d'écran android ✓ - Forum Samsung
Onglet évènement facebook disparu - Forum Facebook
La description de l’id d’événement 0 dans la source nvlddmkm est introuvable - Windows 11
Redimensionner plusieurs images en même temps word - Forum Word

3 réponses

Réponse 1 / 3

Utilisateur anonyme
25 févr. 2017 à 13:40

salut essai :


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

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

Cybermate Messages postés 222 Date d'inscription samedi 25 juillet 2015 Statut Membre Dernière intervention 27 octobre 2018 21
25 févr. 2017 à 15:39

Merci je vais tester cela.

Cybermate Messages postés 222 Date d'inscription samedi 25 juillet 2015 Statut Membre Dernière intervention 27 octobre 2018 21
28 févr. 2017 à 23:21

Rebonjour, alors ça fonctionne en effet, toutefois seulement la première fois.

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.

Réponse 2 / 3

Utilisateur anonyme
2 mars 2017 à 18:20

hello, tu as des erreurs dans la console ?

Cybermate Messages postés 222 Date d'inscription samedi 25 juillet 2015 Statut Membre Dernière intervention 27 octobre 2018 21
Modifié par Cybermate le 2/03/2017 à 19:44

Non je n'ai aucune erreur dans la console.


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

Réponse 3 / 3

Utilisateur anonyme
Modifié par while(coding)returnhappy(); le 2/03/2017 à 21:31

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

Cybermate Messages postés 222 Date d'inscription samedi 25 juillet 2015 Statut Membre Dernière intervention 27 octobre 2018 21
Modifié par Cybermate le 2/03/2017 à 21:38

Merci je vais tester ça.

Oh mon dieu ça fonctionne !!!!!!

Comme cela se faisait-il ?En quoi le délai a-t-il un impact ????

Utilisateur anonyme
3 mars 2017 à 07:04

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

Discussions similaires

probléme avec illustrator: forme

redimensionner ma photo en pixel

Excel - redimensionner barres de défilement

Brouillon événement facebook

Compteur d'événement de haute précision

Discussions similaires

Newsletters