webentwicklung-frage-antwort-db.com.de

Flot-Kreisdiagramm gibt Fehler in Feuerbug aus: "Nicht erfasste Ausnahme: Ungültige Bemaßungen für Diagramm, Breite = Null, Höhe = Null"

Ich benutze Flot Kreisdiagramm zum Zeichnen von Kreisdiagrammen. aber es zeigt fehler in firebug das

nicht erfasste Ausnahme: Ungültige Bemaßungen für Diagramm, width = null, height = null

Ich habe auch die Höhe und Breite von Stylesheet angegeben. und auch so ausprobiert 

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

wie kann ich das lösen?

27
user1662343

Überprüfen Sie diese:

  • Sie schließen zunächst die jQuery-Bibliothek und dann die Flot-Bibliothek ein

  • Wickeln Sie den gesamten Code in die $(document).ready()-Handlerfunktion.

  • sie binden den Flot mit korrektem id und es gibt keine Wiederholung desselben id.

  • wenn Ihr div dynamisch ist, d. h. nach dem Laden der Seite für DOM erschienen ist, binden Sie plot() nach Das Element erschien DOM.

36
thecodeparadox

Ich hatte auch das gleiche Problem. Ich habe dem <div>-Tag eine Höhe und eine Breite gesetzt und den Fehler behoben.

Sie können entweder Inline-CSS (wie ich) oder JS verwenden, um die Höhe und die Breite festzulegen. Die Funktion plot() sollte jedoch erst aufgerufen werden, nachdem wir die Höhe von <div> eingestellt haben.

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

Ich hatte auch das gleiche Problem! Die Antwort wurde oben nicht aufgeführt, daher hier mein Problem und meine Lösung. 

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

So. Beachten Sie die Plotfunktion. Anfangs hatte ich kein # im ersten Parameter. Das ist anscheinend notwendig. Es hat meine Probleme gelöst.

GG.

9
Millar248

Eine schnelle Lösung, die ich gefunden habe, ist, einfach etwas zwischen den div-Tags einzugeben . Zum Beispiel: Ändern <div id="placeholder"></div> In <div id="placeholder">.</div> oder <div id="placeholder">randomtext</div>

Ich persönlich fand, dass die Verwendung von Leerzeichen/Tabs/Newlines in dieser schnellen Lösung nicht funktioniert.

6
hexicle

Ich hatte das gleiche Problem bei der Integration der Vorlage in Rails. Das ist ein schlechter Weg, aber ich kommentiere nur die Zeile, die die Ausnahme auslöst, und füge 2 Zeilen hinzu, um Breite und Höhe auf 0 zu setzen - es hat mir geholfen.

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

Wenn Sie Ihre Diagramm-HTML-Datei in div mit der Klasse "display: none" eingeben, wird diese Fehlermeldung angezeigt. Sie müssen Ihre Diagramm-HTML-Datei in div eingeben, der die Klasse "display: block" gegeben wird, wenn "jquery.flot.js" geladen wird. 

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

wenn sich diese HTML-Datei in einem div befindet, das class="display: none" hat, wenn "jquery.flot.js" geladen ist, ändern Sie es in display: block.

2
Hubeyb Özkul

Es scheint also, dass Sie das DOM-Element erneut abrufen müssen, bevor Sie ein Diagramm rendern. Da Flot die Elemente manipuliert und ihre eigenen Elemente einfügt, sieht es so aus, als würde das Element durch seine eigenen Elemente ersetzt.

Führen Sie in Ihrem Render Folgendes aus:

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

Dies hat nichts mit dem Funktionieren in $(document).ready() zu tun, obwohl es eine gute Praxis ist, es in dieses zu platzieren.

Hoffe das hilft!

1
Brian Corbin