如何在其包含div更改大小时调整Flot图的大小

Question

我正在使用Flot图形库jQuery插件,我还没有找到一个很好的方法来处理当图形包含<div>更改大小时的大小调整(例如,由于窗口大小调整).处理onresize事件时,我确保将包含的宽度和高度<div>更新为正确的大小,然后尝试调用setupGrid并在绘图对象上绘制但没有效果.我已经取得了一些成功,只需删除和读取包含<div>并重新绘制其中的图形.但是,如果我必须同时向<div>文档中添加其他元素(比如图形的工具提示),这似乎很容易陷入无限调整大小事件循环中,因为我猜这些也可以触发调整大小事件？是否有一个很好的方法来处理它,我错过了？

(我也使用ExplorerCanvas for IE,以便能够使用Flot,如果这可能与它有任何关系.我还没有真正尝试过任何其他浏览器)

Answer 1

我发现刚刚绑定到窗口上的resize事件并调用plot非常好.例如,我将数据和选项存储在页面上的变量中.然后我在$(document).ready()上设置它:

$(window).resize(function() {$.plot($('#graph_div'), data, opts);});

Answer 2

最新版本的flot API文档至少描述了一个与广告一样工作的resize事件.

调整()

告诉Flot将绘图画布调整为占位符的大小.之后需要运行setupGrid()和draw(),因为画布大小调整是一种破坏性操作.这是由resize插件在内部使用的.