web-dev-qa-db-fra.com

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

J'ai cette erreur lorsque j'insère des graphiques dans des onglets cachés comme le deuxième, le 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:

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

Voici les bibliothèques:

<script src="js/jquery.flot.min.js"></script>
<script src="js/jquery.flot.pie.min.js"></script>
<script src="js/jquery.flot.stack.js"></script>
<script src="js/jquery.flot.resize.min.js"></script>

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;
}

Le div avec l'id de chaque graphique (changez toujours l'id par le graphique que je dois montrer, comme plotarea, pie, barmonth, baryear, etc.):

<div id="plotarea"></div>

Et j'ajoute ce style pour corriger l'erreur de largeur .ui-tabs .ui-tabs-hide { left: -10000px; visibility: hidden !important; }, mais même cela, le graphique ne dessine pas les graphiques à l'intérieur de ces onglets masqués, ne dessine que 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!

jquerycsstwitter-bootstrapchartsflot
15
asterix_jv

Et bien je l'ai déjà fait!

Si vous avez cette bibliothèque <script src="js/jquery.flot.resize.min.js"></script>, il vous suffit de changer cela à l'intérieur de styles.css (le fichier de feuilles de style):

max-width: none;
height: 400px;

avec ça:

width: 100%;
height: 400px;

Désormais, les graphiques sont toujours redimensionnés dans chaque écran.

30
asterix_jv

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

  • Assurez-vous de régler la hauteur et la largeur
  • Assurez-vous que flot ne recherche pas de div qui n'existe PAS. Ce fut le cas puisque je l'ai copié à partir d'une page qui avait trois tracés, alors que j'utilisais le premier et le troisième. Je pouvais le localiser en utilisant la console de chrome (il s'est écrasé après ne pas avoir trouvé le deuxième div dans la page. Par conséquent, le troisième n'était pas tracé. Il suffit de commenter le tracé inutilisé dans le js et cela a bien fonctionné)
13
my account_ram

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

Déplacer le code jQuery pour masquer et basculer APRÈS le tracé des éléments div a résolu le problème.

1
dev101

J'ai eu des problèmes similaires lorsque le div n'était pas caché. Cela afficherait une erreur similaire dans IE11. Il a fallu beaucoup de temps pour découvrir que le conteneur doit être un élément de bloc, c'est-à-dire display: block. J'espère que cela aide quelqu'un à perdre moins de temps que moi!

0
Ash McConnell