13

次のフィドルで:

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 ]);
});
4

5 に答える 5

22

次のようなことを試してください:

Flot は、それが入っているコンテナーに自動描画します。したがって、div がレスポンシブである場合、Flot はレスポンシブになります。

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

ウィンドウのサイズが変更された場合は、flot を再描画するだけです。

ウィンドウのサイズが変更されるかどうかを確認するには、次のようにします。

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

(参照: JavaScript ウィンドウのサイズ変更イベント)

于 2013-06-21T19:36:48.590 に答える
1

https://github.com/flot/flotのjquery.flot.resize.min.js スクリプトをページに含めるだけです。レスポンシブになります。

于 2016-12-06T04:48:54.163 に答える