Question

在下面的小提琴中：

如果窗口宽度发生变化，如何更改图形的宽度？

代码：

$(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 resize插件

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

Answer 2

尝试这样的事情：

Flot会自动绘制到它所在的容器中。所以如果你的div有响应，Flot会响应。

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

然后，如果你的窗口调整大小，你所要做的就是重新绘制flot：

您可以通过以下方式观看窗口是否调整大小：

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

（见：JavaScript window resize event）

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>

如何使flot响应？

5 个答案: