Cómo cambiar el tamaño de un gráfico Flot cuando contiene cambios div tamaño

Question

Estoy usando el plugin jQuery de la biblioteca gráfica Flot y no he encontrado una buena manera de manejar el cambio de tamaño del gráfico cuando contiene <div> cambia el tamaño (por ejemplo, debido para cambiar el tamaño de la ventana). Al manejar el evento onresize, me he asegurado de que el ancho y la altura del <div> conteniendo se actualicen al tamaño correcto y luego intenté llamar a setupGrid y dibujar en el objeto de trazado pero sin efecto. He tenido cierto éxito con el enfoque de simplemente eliminar y leer el contenido <div> y volver a dibujar el gráfico en él. Sin embargo, esto parece ser propenso a atascarse en infinitos ciclos de eventos de cambio de tamaño si tengo que agregar otros elementos <div> al documento al mismo tiempo (como información sobre herramientas para el gráfico) ya que supongo que también pueden desencadenar eventos de cambio de tamaño ? ¿Hay una buena manera de manejarlo que me estoy perdiendo?

(También estoy usando ExplorerCanvas para IE con el fin de poder utilizar Flot, si eso pudiera tener algo que ver con ella. En realidad no he intentado en cualquier otro navegador aún)

Answer 1

He encontrado solo vinculante para el evento de cambio de tamaño en la ventana y el trazado de llamadas funciona muy bien. Por ejemplo, tengo mis datos y opciones almacenados en variables en la página. Entonces esto en la configuración $ (document) ready():

$(window).resize(function() {$.plot($('#graph_div'), data, opts);});

Answer 2

me parece haber encontrado una solución, aunque no estoy del todo seguro de por qué funciona. Todavía estoy usando el enfoque de eliminar y leer el contenido <div> del documento y volver a dibujar el gráfico en él. Sin embargo, donde previamente había estado haciendo

window.onresize = redrawFunc; //redrawFunc removes and readds the containing div and replots 

que parecía ser propensos a entrar en lo que parecía ser un bucle infinito en función de lo que el redrawFunc hizo al documento.

lugar He intentado utilizar la unión de cambio de tamaño de jQuery

$(window).resize = redrawFunc; 

Hasta el momento, no importa qué otros cambios que realice en el documento en el redrawFunc No he tenido un problema con este enfoque quedar atrapado en un bucle sin embargo, . No estoy seguro por qué.

Answer 3

acabo de encontrar una solución a este mismo. Envolví mi llamada al $.plot(), por lo que puede ser la causa original de mi problema específico, pero flot se negó a cambiar el tamaño de manera oportuna incluso cuando utilicé el evento jQuery resize. Aquí está mi cambio de código que fija todo:

$(window).resize(function() { 
    // erase the flot graph, allowing the div to shrink correctly 
    $('#graph_div').text(''); 

    // redraw the graph in the correctly sized div 
    $.plot($('#graph_div'), data, opts); 
}); 

Answer 4

La última versión de los documentos flot API, al menos, se describe un caso de cambio de tamaño, que funciona como se anuncia.

de cambio de tamaño()

Indica Flot para redimensionar el lienzo de dibujo al tamaño de la marcador de posición. Necesitará ejecutar setupGrid() y draw() luego como el cambio de tamaño del lienzo es una operación destructiva. Esto se usa internamente por el plugin de cambio de tamaño.

Answer 5

La manera más fácil es utilizar el complemento de cambio de tamaño.Se demuestra aquí: http://www.flotcharts.org/flot/examples/resize/

Pero usted sólo tiene que añadir

<script language="javascript" type="text/javascript" src="../../jquery.flot.resize.js"></script>