我正在使用 Flot 图形库 jQuery 插件，但当它包含 <div> 更改大小（例如，由于窗口大小调整）时，我还没有找到处理调整大小的好方法。在处理 onresize 事件时，我确保包含 <div> 的宽度和高度更新为正确的大小，然后尝试调用 setupGrid 并在绘图对象上绘制，但没有任何效果。我通过删除和读取包含@987654323@ 并在其中重新绘制图表的方法取得了一些成功。但是，如果我必须同时将其他<div> 元素添加到文档中（例如图表的工具提示），这似乎很容易陷入无限的调整大小事件循环，因为我猜这些可以触发调整大小事件也？有没有好办法处理我遗漏的问题？
（我也在为 IE 使用 ExplorerCanvas 以便能够使用 Flot，如果这可能与它有关。我还没有真正尝试过任何其他浏览器）
【问题讨论】：
标签： javascript jquery resize flot liquid-layout
我发现只是绑定到窗口上的 resize 事件并调用 plot 工作得很好。例如，我将数据和选项存储在页面上的变量中。然后我在 $(document).ready() 上设置它：
$(window).resize(function() {$.plot($('#graph_div'), data, opts);});
【讨论】：
flot API 文档的最新版本至少描述了一个按广告宣传的调整大小事件。
调整大小（）
告诉 Flot 将绘图画布的大小调整为 占位符。之后您需要运行 setupGrid() 和 draw() 画布调整大小是一种破坏性操作。这是使用 内部由调整大小插件。
【讨论】：
plot.resize(); plot.setupGrid(); plot.draw(); 为我工作，情节是：var plot = $.plot($('#graph_div'), data, opts);
我自己刚刚找到了解决方案。我已经结束了对$.plot() 的调用，因此这可能是我的具体问题的最初原因，但即使我使用了jQuery resize 事件，flot 也拒绝及时调整大小。这是我修复所有问题的代码更改：
$(window).resize(function() {
// erase the flot graph, allowing the div to shrink correctly
$('#graph_div').text('');
// redraw the graph in the correctly sized div
$.plot($('#graph_div'), data, opts);
});
【讨论】：
最简单的方法是使用调整大小插件。在这里演示：http://www.flotcharts.org/flot/examples/resize/
但你只是添加
<script language="javascript" type="text/javascript" src="../../jquery.flot.resize.js"></script>
【讨论】：
我似乎找到了解决方案，尽管我不完全确定它为什么有效。我仍在使用从文档中删除和读取包含@987654321@ 并在其中重新绘制图形的方法。但是我以前一直在做的地方
window.onresize = redrawFunc; //redrawFunc removes and readds the containing div and replots
根据 redrawFunc 对文档所做的操作，这似乎很容易陷入似乎是无限循环的状态。
我尝试使用 jQuery 的调整大小绑定
$(window).resize = redrawFunc;
到目前为止，无论我对 redrawFunc 中的文档进行哪些其他更改，我都没有遇到过这种方法陷入循环的问题。我只是不确定为什么。
【讨论】：