Javascript 如何在包含 div 更改大小时调整 Flot 图的大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2829604/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to resize a Flot graph when its containing div changes size
提问by Will Gorman
I'm using the Flot graphing library jQuery plugin and I haven't found a good way to handle resizing the graph when it's containing <div>changes size (for example, due to window resizing). When handling the onresize event, I've made sure that the width and height of the containing <div>are updated to the correct size and then tried calling both setupGrid and draw on the plot object but with no effect. I've had some success with the approach of just removing and readding the containing <div>and replotting the graph in it. However, this seems to be prone to getting stuck in infinite resize event loops if I have to add other <div>elements to the document at the same time (like for tooltips for the graph) as I'm guessing those can trigger resize events as well? Is there a good way to handle it that I'm missing?
我正在使用 Flot 图形库 jQuery 插件，但我还没有找到一种在包含<div>更改大小（例如，由于窗口大小调整）时调整图形大小的好方法。在处理 onresize 事件时，我确保将包含的宽度和高度<div>更新为正确的大小，然后尝试调用 setupGrid 并在绘图对象上绘制，但没有任何效果。我通过删除和读取包含<div>并重新绘制其中的图形的方法取得了一些成功。但是，如果我必须添加其他，这似乎很容易陷入无限调整大小的事件循环中<div>元素同时添加到文档中（例如图表的工具提示），因为我猜这些元素也可以触发调整大小事件？有没有好的方法来处理我失踪的事情？
(I'm also using ExplorerCanvas for IE in order to be able to use Flot, if that might have anything to do with it. I haven't really tried in any other browsers yet)
（我也在 IE 上使用 ExplorerCanvas 以便能够使用 Flot，如果这可能与它有关。我还没有真正尝试过在任何其他浏览器中）
回答by Kris Fox
I have found just binding to the resize event on the window and calling plot works really well. For example I have my data and options stored in variables on the page. Then I setup this on $(document).ready():
我发现只是绑定到窗口上的调整大小事件并且调用 plot 效果非常好。例如，我将数据和选项存储在页面上的变量中。然后我在 $(document).ready() 上设置：
$(window).resize(function() {$.plot($('#graph_div'), data, opts);});
$(window).resize(function() {$.plot($('#graph_div'), data, opts);});
回答by bryfox
The latest version of the flot APIdocs, at least, describes a resize event which works as advertised.
至少，最新版本的Flot API文档描述了一个按宣传的方式工作的调整大小事件。
resize()
Tells Flot to resize the drawing canvas to the size of the placeholder. You need to run setupGrid() and draw() afterwards as canvas resizing is a destructive operation. This is used internally by the resize plugin.
调整大小（）
告诉 Flot 将绘图画布的大小调整为占位符的大小。您需要在之后运行 setupGrid() 和 draw() 因为画布调整大小是一种破坏性操作。这由调整大小插件内部使用。
回答by Buddy123
I just found a solution to this myself. I've wrapped my call to $.plot()so that may be the original cause of my specific problem but flot refused to resize in a timely manner even when I used the jQuery resizeevent. Here's my code change that fixed everything:
我自己刚刚找到了解决方案。我已经结束了我的调用，$.plot()所以这可能是我的特定问题的原始原因，但是即使我使用了 jQueryresize事件，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);
});
回答by Loren
The easiest way is to use the resize plugin. It's demonstrated here: http://www.flotcharts.org/flot/examples/resize/
最简单的方法是使用调整大小插件。它在这里演示：http: //www.flotcharts.org/flot/examples/resize/
But you just add
但你只需添加
<script language="javascript" type="text/javascript" src="../../jquery.flot.resize.js"></script>
回答by Will Gorman
I seem to have found a solution, although I'm not entirely sure why it works. I'm still using the approach of removing and readding the containing <div>from the document and replotting the graph in it. However where previously I had been doing
我似乎找到了一个解决方案，虽然我不完全确定它为什么有效。我仍在使用<div>从文档中删除和读取包含内容并在其中重新绘制图形的方法。然而，我以前一直在做的地方
window.onresize = redrawFunc; //redrawFunc removes and readds the containing div and replots
which seemed to be prone to getting into what seemed to be an infinite loop depending on what the redrawFunc did to the document.
这似乎很容易陷入无限循环，具体取决于 redrawFunc 对文档所做的事情。
Instead I tried using jQuery's resize binding
相反，我尝试使用 jQuery 的调整大小绑定
$(window).resize = redrawFunc;
So far, no matter what other changes I make to the document in the redrawFunc I haven't had a problem with this approach getting stuck in a loop yet. I'm just not sure why.
到目前为止，无论我对 redrawFunc 中的文档做了什么其他更改，我都没有遇到这种方法陷入循环的问题。我只是不知道为什么。
