Dimensions non valides pour le tracé, largeur = 0, hauteur = 400 à l’intérieur de l’onglet masqué

J’ai cette erreur lorsque j’insère des graphiques dans des tabs masqués comme deuxième, troisième, etc. Voici l’erreur:

Invalid dimensions for plot, width = 0, height = 400 in js/jquery.flot.min.js:6. 

J’ai utilisé bootstrap 2 et jquery:

  

Voici les bibliothèques:

     

Et le css:

 #plotarea { max-width: none; height: 400px; } #pie { max-width: none; height: 400px; } #barmonth { max-width: none; height: 400px; } #baryear { max-width: none; height: 400px; } 

La div avec l’id de chaque graphique (changez toujours l’id en graphique que j’ai besoin de montrer, comme plotarea, camembert, barmonth, barylé, etc.):

 

Et j’ajoute ce style pour corriger l’erreur de largeur .ui-tabs .ui-tabs-hide { left: -10000px; visibility: hidden !important; } .ui-tabs .ui-tabs-hide { left: -10000px; visibility: hidden !important; } .ui-tabs .ui-tabs-hide { left: -10000px; visibility: hidden !important; } , mais même ce graphique ne dessine pas les graphiques à l’intérieur de ces tabs masqués, mais dessine le premier onglet qui est dans la première vue … pouvez-vous maintenant s’il existe un formulaire pour le corriger?

J’utilise le modèle de charisme.

Meilleures salutations!

Eh bien je l’ai déjà fait!

Si vous avez cette bibliothèque , il vous suffit de changer cela à l’intérieur de styles.css (le fichier feuilles de style):

 max-width: none; height: 400px; 

avec ça:

 width: 100%; height: 400px; 

Maintenant, les graphiques redimensionnent toujours dans chaque écran.

J’ai eu le même problème. Une solution différente a fonctionné pour moi.

  • Assurez-vous de définir la hauteur et la largeur
  • Assurez-vous que flot n’est pas à la recherche d’une div qui n’existe pas. C’était le cas puisque je l’avais copié sur une page comportant trois plots, alors que j’utilisais la première et la troisième. Je pouvais le localiser en utilisant la console de chrome (Il s’est écrasé après ne pas avoir trouvé la deuxième div de la page. Par conséquent, la troisième n’a pas été tracée. Il suffit de commenter le tracé inutilisé dans le js et tout a bien fonctionné)

J’ai eu le même problème sous IE8 et parfois Android, les graphiques de mine sont initialement masqués avec la fonction de basculement, ce qui a provoqué l’erreur en essayant de tracer un graphique à l’intérieur d’un div caché. CSS était déjà défini, donc cela n’a pas aidé.

Déplacement du code de bascule et de masquage jQuery APRÈS que les éléments div du tracé aient résolu le problème