Làm thế nào để làm cho flot đáp ứng?

Question

Trong fiddle sau:

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

Làm thế nào tôi có thể làm thay đổi độ rộng của đồ thị nếu những thay đổi chiều rộng cửa sổ?

mã:

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

Hãy thử một cái gì đó như thế này:

Flot sẽ tự động rút ra để chứa nó trong Vì vậy, nếu div của bạn là đáp ứng Flot sẽ được đáp ứng..

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

sau đó tất cả các bạn phải làm là vẽ lại các flot nếu cửa sổ của bạn thay đổi kích thước:

Bạn có thể xem để xem nếu cửa sổ thay đổi kích thước với:

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

(xem: JavaScript window resize event)

Answer 2

Ngoài ra, còn có plugin thay đổi kích thước chính thức

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

Answer 3

Chỉ bao gồm tập lệnh jquery.flot.resize.min.js từ https://github.com/flot/flot trong trang của bạn. Nó sẽ trở thành đáp ứng.

Answer 4

tôi đã cùng một vấn đề và giải pháp là:

<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

Chỉ cần sử dụng một số css. Mọi trình duyệt hiện đại đều có thể sử dụng (inline, stylesheet):

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