web-dev-qa-db-fra.com

Le graphique en secteurs Flot indique une erreur dans firebug: "exception non saisie: dimensions non valides pour le tracé, width = null, height = null"

J'utilise flot camembert pour tracer des camemberts. mais il montre une erreur dans firebug que

exception non interceptée: dimensions non valides pour le tracé, width = null, height = null

J'ai donné la hauteur et la largeur de la feuille de style aussi. et essayé aussi comme ça 

<div id="placeholder1" style="width:140px;height:140px" ></div> 

comment résoudre cela?

jquerychartspie-chart
27
user1662343

Vérifiez ces:

  • Vous devez d'abord inclure la bibliothèque jQuery, puis flot la bibliothèque js

  • Enroulez le code entier dans la fonction de gestionnaire $(document).ready().

  • vous liez l'écharpe avec id correct et il n'y a pas de répétition de même id.

  • si votre div est dynamique, c'est-à-dire qu'il est apparu dans DOM après le chargement de la page, puis liez plot() après .__, l'élément est apparu dans DOM.

36
thecodeparadox

J'ai aussi eu le même problème. J'ai défini une hauteur et une largeur sur la balise <div> et le problème a été corrigé.

Vous pouvez utiliser soit inline css (comme je l’ai fait) ou JS pour définir la hauteur et la largeur. Mais la fonction plot() ne devrait être appelée qu'après que nous ayons défini la hauteur du <div>

<div class="bars_two" style="height:300px;"></div>
13
John Fonseka

J'ai eu ce même problème aussi! La réponse ne figurait pas ci-dessus, voici donc mon problème et ma solution. 

<div id="chart" class="chart" style="width:100%;height:250px;"></div>

Javascript:

 <script type="text/javascript">
    $(document).ready(function () {
        var data = [...];
        var options = {...};
        $.plot($("#placeholder"), data, options);
    });
</script>

Alors. Notez la fonction de tracé. Au début, je n'avais pas le # dans le premier paramètre. C'est nécessaire apparemment. Cela a résolu mes problèmes.

GG.

9
Millar248

J'ai eu le même problème lors de l'intégration du modèle dans Rails. C'est une mauvaise façon, mais je commente simplement la ligne qui lève l'exception et ajoute 2 lignes pour définir la largeur et la hauteur sur 0 - cela m'a aidé.

Canvas.prototype.resize = function(width, height) {

  if (width <= 0 || height <= 0) {
    // COMMENTED NEXT LINE
    // throw new Error("Invalid dimensions for plot, width = " + width + ", height = " + height);
    // NEW LINES ADDED
    width = 0;
    height = 0;
  }

  // ... others code 
}
2
kpblc

Si vous mettez votre graphique html dans div qui est donné à la classe "display: none", vous obtiendrez cette erreur. Vous devez mettre votre graphique html dans div auquel est attribuée la classe "display: block" lorsque "jquery.flot.js" est chargé. 

<div id="pie_chart" class="chart"> </div>

si ce code HTML se trouve dans un div qui a class="display: none" lorsque "jquery.flot.js" est chargé, changez-le en display: block

2
Hubeyb Özkul

Il semble donc qu'avant de générer un graphique, vous devez extraire à nouveau l'élément DOM. Puisque fol manipule les éléments et insère les siens, il semble remplacer l'élément par ses propres éléments.

Dans votre rendu, faites:

$.plot($(".myChartId || #myChartClass"), myData, myOptions);

Cela n’a rien à voir avec $(document).ready(), bien que ce soit une bonne pratique de le placer à l’intérieur.

J'espère que cela t'aides!

1
Brian Corbin