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文档至少描述了一个与广告一样有效的调整大小事件。

调整大小（）

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

Answer 3

我自己就找到了解决方法。我把我的电话打包到$.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);
});

Answer 4

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

但你只需添加

<script language="javascript" type="text/javascript" src="../../jquery.flot.resize.js"></script>

Answer 5

我似乎找到了一个解决方案，虽然我不完全确定它的工作原理。我仍在使用从文档中删除和读取包含<div>的方法并重新绘制其中的图形。但是以前我一直在做什么

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

根据redrawFunc对文档的作用，似乎很容易进入看似无限循环的东西。

相反，我尝试使用jQuery的resize binding

$(window).resize = redrawFunc;

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

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

5 个答案: