Bonjour, j'ai un problème avec des highstocks lorsque vous utilisez des onglets JQuery.
Ceci est le code du constructeur. Le conteneur n'a que la moitié de la largeur de la page entière. Lorsque la page est chargée sur la languette contenant le graphique, sa largeur est rendue correctement.
Mais lorsque la page est chargée d'abord sur un autre onglet, sa largeur couvre toute la largeur de la page, ce qui se chevauche avec d'autres choses sur la page. Donc, la page doit être rafraîchie afin de résoudre ce problème. Est-ce que quelqu'un a une solution à cela?
5 Réponses :
Highcharts définit la largeur du graphique sur la largeur de l'élément contenant. Donc, si l'élément contenant est caché, il ne peut pas obtenir une largeur.
Pour résoudre ce problème, vous pouvez définir l'option de largeur lors de l'initialisation de votre graphique: si vous ne sont pas en mesure de définir le tableau sur une largeur appropriée que j'ai utilisé ce truc pour pouvoir obtenir la largeur d'un élément caché:
Dans votre feuille de style, remplacez la règle du sélecteur de classe solution prise de: .UI-onglets .UI-onglets-masquer avec
Merci! Bien que j'utilise les onglets de Bootstrap, une version modifiée de ce truc fonctionnait parfaitement. C'est ce que j'ai proposé (je suis désolé pour le manque de formatage): .Tab-contenu> .Tab-volet, .Pill-Contenu> .Pill-Pane {Affichage: bloc; Position: absolu; à gauche: -10000px; } .Tab-contenu> .active, .Pill-Contenu> .active {position: statique; à gauche: auto; }
@ piotr.d, je viens d'essayer mais préféré de définir la hauteur sur 0 pour les onglets inactifs, voir Stackoverflow.com / A / 23267110/537554
Vous pouvez définir la largeur du conteneur de la DIV du graphique avec un pourcentage.
Quelque chose comme ça devrait fonctionner. P>
<div id = "tab1"> <div id="graphContainer1" style= "width: 90%"></div> </div> <div id = "tab2" style = "display:none"> <div id="graphContainer2" style= "width: 60%"></div> </div>
Je sais que c'est un long moment après avoir posé votre question, mais j'ai eu un problème similaire dans ce que mes graphiques rendaient sur le client avec une largeur zéro chaque fois que le graphique était sur un onglet qui n'a pas été activé par défaut. En effet, comme @brent a indiqué, Highcharts utilise la largeur du parent et, à partir de JQuery UI 1.9, le widget d'onglet utilise un style inline de d'utiliser le document prêt à l'événement de JQuery pour initialiser votre Highchart, vous devez plutôt utiliser l'événement Activer votre onglet. Cela a l'avantage supplémentaire de faire l'animation du graphique Snazzy chaque fois que l'utilisateur clique sur l'onglet. au lieu de: Utilisation: Affichage: Aucun Pour masquer les onglets inactifs.
Vous pouvez également déclencher la fenêtre.Resize Evénement
$(window).trigger('resize');
Ajout de cela à la fin de la fonction d'onglet .Cliquez sur la fonction et cela a fonctionné comme un charme.
Malgré les versions plus récentes ayant la fonction .reflow (), cela fonctionne pour les versions plus anciennes
Veuillez utiliser jsfiddle.net pour démontrer votre problème. Votre explication est correcte mais il vous manque le code correspondant.
Il y a
graphique.reflow ()méthode.