7

我正在使用 Flot 图形库 jQuery 插件，但我还没有找到一种很好的方法来处理包含<div>更改大小的图形（例如，由于窗口大小调整）。在处理 onresize 事件时，我确保包含的宽度和高度<div>更新为正确的大小，然后尝试调用 setupGrid 并在绘图对象上绘制，但没有任何效果。我在删除和读取包含<div>并重新绘制其中的图表的方法方面取得了一些成功。但是，如果我必须添加其他内容，这似乎很容易陷入无限调整大小事件循环中<div>同时向文档添加元素（例如图表的工具提示），因为我猜这些元素也会触发调整大小事件？有没有好方法来处理我失踪的问题？

（我还在为 IE 使用 ExplorerCanvas 以便能够使用 Flot，如果这可能与它有关。我还没有在任何其他浏览器中真正尝试过）

4

5 回答 5

17

我发现只是绑定到窗口上的 resize 事件并调用 plot 效果很好。例如，我将数据和选项存储在页面上的变量中。然后我在 $(document).ready() 上设置它：

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

于 2010-05-20T01:07:48.397 回答
8

至少，最新版本的flot API文档描述了一个按广告宣传的调整大小事件。

调整大小（）

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

于 2011-08-12T17:50:07.297 回答
3

我自己刚刚找到了解决方案。我已经结束了我的调用，因此这可能是我的特定问题的原始原因，但即使我使用了 jQuery事件$.plot()，flot 也拒绝及时调整大小。resize这是我的代码更改，它修复了所有问题：

$(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);
});
于 2011-02-22T08:25:20.050 回答
3

最简单的方法是使用调整大小插件。它在这里演示：http: //www.flotcharts.org/flot/examples/resize/

但你只需添加

<script language="javascript" type="text/javascript" src="../../jquery.flot.resize.js"></script>
于 2015-09-08T16:08:45.147 回答
0

我似乎找到了解决方案，尽管我不完全确定它为什么有效。我仍在使用<div>从文档中删除和读取包含内容并在其中重新绘制图表的方法。但是，我以前一直在做的地方

window.onresize = redrawFunc;  //redrawFunc removes and readds the containing div and replots

根据 redrawFunc 对文档所做的操作，这似乎很容易陷入似乎是无限循环的状态。

相反，我尝试使用 jQuery 的调整大小绑定

$(window).resize = redrawFunc;

到目前为止，无论我对 redrawFunc 中的文档进行什么其他更改，我都没有遇到过这种方法陷入循环的问题。我只是不确定为什么。

于 2010-05-18T15:48:43.180 回答