Flotを反応性にするには？以下フィドルで

Question

：ウィンドウ幅が変化した場合

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

はどのようにして、グラフの幅の変更を行うことができますか？

コード：

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

このような何かを試してみてください：

FLOT自動それは中のコンテナに描くあなたのdivがFLOTが応答する応答であるかのようにします。。

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

次にあなたがしなければならないすべてはあなたのウィンドウがリサイズした場合FLOTを再描画です：

あなたは窓がでリサイズするかどうかを確認するために見ることができます：

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

（参照：JavaScript window resize eventを）

Answer 2

また、公式のサイズ変更用のプラグインがあります

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

Answer 3

ページにhttps://github.com/flot/flotのjquery.flot.resize.min.jsスクリプトを挿入するだけです。それは反応的になるでしょう。

Answer 4

私は同じ問題を抱えていたし、解決されました：

<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

はいくつかのCSSを使用します。現代のブラウザでは、（インラインスタイルシート）

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