Come rendere flot reattivo?

Question

Nel seguente violino:

http://jsfiddle.net/jamitzky/9x7aJ/

Come posso fare la larghezza cambiamento del grafico se i cambiamenti di larghezza finestra?

codice:

$(function() { 
var d1 = []; 
for (var i = 0; i < 14; i += 0.5) 
    d1.push([i, Math.sin(i)]); 

var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]]; 

// a null signifies separate line segments 
var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]]; 

$.plot($("#placeholder"), [ d1, d2, d3 ]); 
}); 

Answer 1

provare qualcosa di simile:

Flot si auto disegnare al contenitore è in Così, se il div è sensibile Flot sarà reattivo..

http://jsfiddle.net/9x7aJ/2029/

allora tutto quello che dovete fare è ridisegnare la flot se la finestra ridimensiona:

si può guardare per vedere se la finestra viene ridimensionata con:

window.onresize = function(event) { 
    ... 
} 

(vedi: JavaScript window resize event)

Answer 2

Inoltre c'è un plugin ridimensionamento flot ufficiale

http://people.iola.dk/olau/flot/examples/resize.html

Answer 3

Basta includere lo script jquery.flot.resize.min.js da https://github.com/flot/flot nella tua pagina. Diventerà reattivo.

Answer 4

Ho avuto lo stesso problema e la soluzione è stata:

<script language="javascript" type="text/javascript" src="http://people.iola.dk/olau/flot/jquery.js"></script> 
<script language="javascript" type="text/javascript" src="http://people.iola.dk/olau/flot/jquery.flot.js"></script> 
<script language="javascript" type="text/javascript" src="http://people.iola.dk/olau/flot/jquery.flot.resize.js"></script> 
<script src="./jquery.flot.axislabels.js"></script> 

Answer 5

Basta usare un po 'di CSS. Qualsiasi browser moderno può utilizzare (in linea, foglio di stile):

<div id="chart" style="width: 100%!important"></div>