如何调整一个Flot图形，当它包含div更改大小

我正在使用Flot图形库jQuery插件，并且我还没有找到一个很好的方法来处理调整图形时它包含<div>更改大小（例如，到期调整窗口大小）。当处理在onResize事件，我确信，含有<div>的宽度和高度都更新到正确的尺寸，然后打过电话都setupGrid并绘制剧情对象上，但没有效果。我已经取得了一些成功，只是删除和读取包含<div>并重新绘制其中的图。然而，这似乎是容易陷入无限resize事件循环，如果我要在同一时间添加其他<div>元素文档（如工具提示的图），因为我猜那些可以触发调整事件，以及？有没有一种很好的方式来处理它，我错过了？如何调整一个Flot图形，当它包含div更改大小

（我也是为了能够使用海军报，如果可能有什么关系呢使用ExplorerCanvas的IE浏览器。我真的没有任何其他浏览器试过没）

来源

2010-05-13 Will Gorman

我发现刚刚绑定到窗口的resize事件，并呼吁情节的作品真的很好。例如，我的数据和选项存储在页面上的变量中。然后，我设置这种对$（文件）。就绪（）：

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

来源

2010-05-20 01:07:48

下面是从他们的网站工作的例子：http://people.iola.dk/olau/flot/examples/resize.html – 2012-12-08 16:37:37

其实我喜欢你这样做的方式。它也不需要调整大小插件。我注意到的唯一缺点是在调整大小时略有抖动，但没有什么大不了。谢谢！ – AfromanJ 2013-08-20 15:03:38

我似乎找到了解决方案，尽管我不完全确定它的工作原理。我仍在使用拆卸和readding从文档中包含<div>和其型重构图的方法。然而，当我以前一直做

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

这似乎是容易陷入什么似乎是取决于什么redrawFunc没有到文档的无限循环。

相反，我尝试使用jQuery的调整大小结合

$(window).resize = redrawFunc;

到目前为止，不管我做在redrawFunc我还没有使用这种方法的一个问题被陷在一个循环又文档什么其他的变化。我只是不知道为什么。

来源

2010-05-18 15:48:43

我只是找到了解决这个自己。我裹着我的电话给$.plot()这样也许我的具体问题的最初原因，但海军报拒绝，甚至当我使用了jQuery 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-22 08:25:20 Buddy123

的flot API文档的最新版本，至少，描述了一个调整大小事件，其像宣传的那样。

调整大小（）

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

来源

2011-08-12 17:50:07 bryfox

'plot.resize（）; plot.setupGrid（）; （）;''对于我来说，plot是：'var plot = $ .plot（$（'＃graph_div'），data，opts）;' – 2018-01-17 12:53:14

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

但是你只需要添加

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

来源

2015-09-08 16:08:45 Loren

如何调整一个Flot图形，当它包含div更改大小

回答

相关问题