如何使flot响应?

SB2*_*055 13 flot

在下面的小提琴:

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 ]);
});
Run Code Online (Sandbox Code Playgroud)

aqm*_*aqm 22

还有官方的flot resize插件

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

  • 这似乎是更简单,原生的解决方案.我尝试手动完成,类似于接受的答案,但我有问题可能是因为我的flot图表是一个角度指令.使用resize插件可以立即修复我的所有问题. (2认同)

Spe*_*cer 21

尝试这样的事情:

Flot将自动绘制到它所在的容器中.因此,如果你的div响应,Flot将会响应.

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

然后,如果你的窗口调整大小,你所要做的就是重绘flot:

您可以观察窗口是否调整大小:

    window.onresize = function(event) {
    ...
}
Run Code Online (Sandbox Code Playgroud)

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