如何使拍子响应? [英] How to make flot responsive?

问题描述

在下面的小提琴中:

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

如果窗口宽度改变，如何改变图形的宽度?

How can I make the graph's width change if the window width changes?

代码:

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

推荐答案

尝试如下操作:

Flot将自动绘制到其所在的容器中.因此，如果您的div是响应式的，则Flot将响应式的.

Flot will auto draw to the container it's in. So if your div is responsive Flot will be responsive.

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

然后，您需要做的就是在窗口调整大小后重新绘制浮动对象:

then all you have to do is redraw the flot if your window resizes:

您可以观察窗口是否使用以下方式调整大小:

You can watch to see if the window resizes with:

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

(请参阅: JavaScript窗口调整大小事件)

这篇关于如何使拍子响应?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！