使用平移关联两个图时发生内存泄漏
我们正在使用 flot 渲染两个图表,它们共享相同的 x 轴。 我们用以下方法绘制它们:
plot1 = $.plot($("#placeholderGraph1"), p1_data, d1_options);
plot2 = $.plot($("#placeholderGraph2"), p2_data, d2_options);
我们需要确保平移和缩放一个图形也会重绘另一个图形,反之亦然。我们通过以下绑定来实现这一点:
$("#placeholderGraph1").bind("plotpan", adjustGraph1Axes);
$("#placeholderGraph2").bind("plotpan", adjustGraph2Axes);
如果我们不添加最后两条语句,则不会出现内存泄漏,并且浏览器(所有浏览器)在重绘时都会丢弃内存。但通过上述绑定,浏览器永远不会释放内存,并且内存会堆积到数百兆字节。
除此之外,我们还通过鼠标移动更新各个图例。
我们尝试了以下方法来解决内存泄漏问题,但没有成功:
1.创建plot1和plot2全局变量并显式删除内容
2.删除图表div并重新创建
3. 重新绑定之前显式解除事件绑定
4. 在重绘之前绘制一个空图
还有其他方法来关联两个图或转储内存吗?
we are rendering two graphs with flot, which share the same x-axis.
we plot them with:
plot1 = $.plot($("#placeholderGraph1"), p1_data, d1_options);
plot2 = $.plot($("#placeholderGraph2"), p2_data, d2_options);
we need to make sure that panning and zooming on one graph also redraws the other and vice versa. we achieve this with the following binding:
$("#placeholderGraph1").bind("plotpan", adjustGraph1Axes);
$("#placeholderGraph2").bind("plotpan", adjustGraph2Axes);
If we don't add these last two statements, there is no memory leak and browser(all the browsers) drops memory whenever it redraws. But with the above binding, browser never drops memory and it piles up towards hundreds of megabytes.
Apart from this, we also update individual legends with mouse movements.
we tried following approaches for the memory leak, but none worked:
1. making plot1 and plot2 global variables and explicitly deleting the contents
2. Deleting the graph divs and recreating
3. Explicitly unbinding events before rebinding
4. Plotting an empty graph before redrawing
Any other approaches to associating two graphs or dumping memory?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
问题可能与 Flot 插件有关:jquery.flot.navigate.js。
我建议您将 JQuery 升级到 Version-1.5 以及上面提到的 flot 插件。
您可能想访问此链接(请参阅右侧的 ChangeLog):
https://code.google.com/p/flot/source/browse/trunk/jquery.flot.navigate.js?r=317
Issue might be with the Flot Plugin: jquery.flot.navigate.js.
I suggest you to upgrade to JQuery to Version-1.5 along with the flot plugin mentioned above.
You may like to visit this link (refer: ChangeLog towards your right side):
https://code.google.com/p/flot/source/browse/trunk/jquery.flot.navigate.js?r=317
我可能遇到过类似的问题,同步概览图上的选择和平移/缩放主图;我的问题是一个图的事件处理程序正在触发另一个图的事件,并且相应事件处理程序的执行正在触发第一个图的事件,这导致原始事件处理程序执行...导致无限环形。
换句话说,您确定您的问题不是
adjustGraph1Axes
的执行没有触发图 2 的plotpan
事件,从而导致adjustGraph2Axes 的执行
无意中触发了图 1 的plotpan
并导致adjustGraph1Axes
执行等等?我的帖子以及解决方案位于此处:响应平移/缩放的范围更新的 Flot 事件。我使用一个标志来解决两个事件处理程序之间的乒乓问题,我的解决方案位于 < http://jsfiddle.net/apandit/nu2rr58h/12/ >。
I may have had a similar issue synchronizing the selection on an overview plot and panning/zooming in the main plot; my issue was that the event handler for one plot was triggering the event for the other plot and the execution of the corresponding event handler was triggering the event for the first plot, which caused the original event handler to execute...leading to an infinite loop.
In other words, are you sure your issue isn't that the execution of
adjustGraph1Axes
isn't triggering theplotpan
event for graph 2 which causes the execution ofadjustGraph2Axes
unintentionally, which trigger theplotpan
for graph 1 and causesadjustGraph1Axes
to execute and so on? My post along with the solution is located here: Flot event for range updates in response to panning/zooming.I used a flag to solve the ping-pong issue between the two event handlers and my solution is at < http://jsfiddle.net/apandit/nu2rr58h/12/ >.