web-dev-qa-db-fra.com

Highcharts - problème concernant la pleine largeur du graphique

J'utilise le graphique à colonnes Highcharts et je veux qu'il soit 100% sensible à la largeur du graphique. Le conteneur est un simple <div> sans aucune mise en forme. Lorsque le document se charge, le graphique a toujours une largeur fixe de taille 600x400px. Si je redimensionne la fenêtre ou que je passe à un autre onglet du navigateur, le graphique remplit la largeur et devient un graphique pleine largeur réactif comme je le voulais. Si je recharge la page, c'est à nouveau une largeur fixe. J'ai essayé de définir la largeur du conteneur et du graphique, mais rien n'y fait. Si je déplace le conteneur div d'un niveau au-dessus du parent div, cela fonctionne. Comment faire pour que le graphique devienne également pleine largeur lors du chargement de la page?

Merci

36
Deez

La largeur du graphique est tirée de jQuery.width(container), donc si vous avez un graphique dans certains onglets cachés ou quelque chose de similaire, la largeur ne sera pas définie. Dans ce cas, la largeur et la hauteur par défaut sont définies (600x400).

41
Paweł Fus

Je sais que c'est une vieille question, mais j'ai rencontré exactement le même problème et j'ai trouvé une autre solution qui fonctionne très bien.

À partir de Highcharts 4.1.5 (pourrait également être dans les anciennes versions), l'objet chart a une fonction reflow(). Consultez la documentation ici .

refusion ()

Renvoie le graphique dans son conteneur. Par défaut, le graphique se redirige automatiquement vers son conteneur après un événement window.resize, conformément à l'option chart.reflow. Cependant, il n'y a aucun événement fiable pour div resize, donc si le conteneur est redimensionné sans événement de redimensionnement de fenêtre, cela doit être appelé explicitement.

J'espère que cela aide quelqu'un d'autre.

24
cohenadair