jquery - open - El gráfico circular de Flot da error en Firebug: "excepción no detectada: dimensiones no válidas para el gráfico, ancho=nulo, altura=nulo"

html graph

Question

I usando gráfico circular flot para trazar gráficos circulares. pero muestra error en firebug que

Excepción no detectada: dimensiones no válidas para el trazado, ancho = nulo, alto = nulo

He dado la altura y el ancho de la hoja de estilos también. y probé también así

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

¿Cómo resolver esto?

Answer 1

Compruebe estos:

• Incluyes la biblioteca jQuery primero y luego la biblioteca flot js

• Envuelva todo el código dentro de la función del controlador $(document).ready() .

• se une el flot con la id correcta y no se repite la misma id .

• si su div es dinámico, es decir, apareció en DOM después de cargar la página, entonces vincule plot() después de que el elemento aparezca en DOM.

Answer 2

Por lo tanto, parece que antes de procesar un gráfico, debe volver a buscar el elemento DOM. Dado que flot manipula los elementos e inserta lo suyo, parece que está reemplazando el elemento con sus propios elementos.

En tu render, haz:

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

Esto no tiene nada que ver con estar en $(document).ready() , aunque es una buena práctica colocarlo dentro de este.

¡Espero que esto ayude!

Answer 3

Si coloca el gráfico html en div, que recibe la clase "display: none", obtendrá este error. Debe colocar el gráfico html en div, que recibe la clase "display: block" cuando se carga "jquery.flot.js".

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

si este html está en cualquier div que tiene class="display: none" cuando se carga "jquery.flot.js", cámbielo para display: block

Answer 4

También tuve el mismo problema. Puse una altura y un ancho a la etiqueta <div> y solucionó el error.

Puedes usar inline css (como lo hice) o JS para establecer la altura y el ancho. Pero la función plot() debe llamarse después de establecer la altura de <div>

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

Answer 5

Tuve el mismo problema integrando la plantilla a los rieles. Esa es una mala manera, pero solo comento la línea que lanza la excepción y agrego 2 líneas para establecer el ancho y la altura en 0, me ayudó.

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 
}

Answer 6

Una solución rápida que encontré es simplemente escribir algo entre las etiquetas div. Por ejemplo: Cambie <div id="placeholder"></div> a <div id="placeholder">.</div> o <div id="placeholder">randomtext</div> .

Personalmente, descubrí que el uso de espacio / pestañas / nuevas líneas no funciona en esta solución rápida.

Answer 7

Yo también tuve este mismo problema! La respuesta no estaba en la lista anterior, así que aquí estaba mi problema y mi solución.

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

Asi que. Note la función de la trama. Al principio, no tenía el # en el primer parámetro. Eso es necesario al parecer. Resolvió mis problemas.

GG.