jqPlot 实现动态显示数据，防止内存溢出的实现。

jqPlot是一个十分强大、功能丰富的图表插件，能够显示走势图、柱形图等常用的图表类型，相信国内用的人很多。

大家在使用jqPlot动态更新图表时，也许会碰到过在IE中出现内存溢出的问题，下面我们来看看集中动态更新jqPlot图表的方式：

方式一：通过重建图表实现动态显示。

	var series = [{'test'}];

	var axes = {
		xaxis : {
			renderer : $.jqplot.CategoryAxisRenderer,
			ticks : []
		},
		yaxis : {
			min : 0,
			max : 10,
			tickInterval : 2
		}
	};

	var plotConfig = createBarChartOptions(axes, series);

	resizeGlobalMonitorChartContainer(containerId);

	var plot = $.jqplot(g_channelDivId, chartData, plotConfig);

实际上我们通过重复的创建图表，确实可以实现动态更新，不过在IE下，我们会发现内存增长很厉害，起初，通过尝试在重新创建图表时，提前销毁旧的图表来释放内存：

/**
 * 将plot图表从容器中销毁。
 * 
 * @param containerId
 *            容器ID。
 * @param plot
 *            在容器中的图表。
 */
function releasePlotChart(containerId, plot) {
	if (plot) {
		plot.destroy();

		var elementId = '#' + containerId;
		$(elementId).unbind(); // for iexplorer
		$(elementId).empty();

		plot = null;
	}
}

当我们观察内存变化的时候，会发现销毁图表时内存减少了，但是重建之后，内存会比原来多出一些，一定时间以后，内存就会不断的增加，最后导致内存溢出。

方式二：通过动态数据加载，重绘实现。

/**
 * 重绘plot图表。
 * 
 * @param containerId
 *            容器ID。
 * @param chartData
 *            图表数据。
 * @param plotConfig
 *            图表配置信息。
 * @returns 返回重绘后的图表对象。
 */
function replotChart(plot, chartData) {
	setChartDataToPlot(plot, chartData);

	plot.replot({
		resetAxes : true
	});

	return plot;
}

/**
 * 将最新的数据设置到plot图表中。
 * 
 * @param plot
 * @param chartData
 */
function setChartDataToPlot(plot, chartData) {
	for ( var i = 0; i < plot.series.length; i++) {
		for ( var j = 0; j < plot.series[i].data.length; j++) {
			try {
				plot.series[i].data[j][1] = chartData[i][j];
			} catch (e) {
			}
		}
	}
}

通过运用这种方式，再次观察内存变化，会发现内存溢出问题已经不存在了。

从中我们发现，只要重建Plot图表，内存就会出现递增的现象，因此，当我们需要切换图表的时候，最好将原来的图表隐藏起来，当再次需要显示的时候，再恢复显示，从而避免重复创建图表，从而导致内存溢出。

评论

8 楼 coolboy09 2013-06-04  

楼主，能否给个完整的例子？在下在用jqplot绘图时，在添加了定时刷新功能后，切换标签页时，图表不能立即显示，需要等待一段时间才能显示，搞的我很头疼啊。希望能给个动态更新的完整例子，多谢。

7 楼 xianbin 2013-01-29  

xinghe_wang 写道

function drawPlot()
var plotPoint = {
   ..,
   data:[data],
   ..
}
if(plotHandle){
  plotHandle.destroy();
  plotHandle.replot(plotPoint);
}else{
  plotHandle =  $.jqplot("divId",[data],plotPoint);
}
我用了一个ajax 然后掉用这个方法结果内存溢出了,你有什么好的解决方案没.

参看这篇博文：
http://xianbin.iteye.com/blog/1777748

6 楼 xinghe_wang 2013-01-22  

function drawPlot()
var plotPoint = {
   ..,
   data:[data],
   ..
}
if(plotHandle){
  plotHandle.destroy();
  plotHandle.replot(plotPoint);
}else{
  plotHandle =  $.jqplot("divId",[data],plotPoint);
}
我用了一个ajax 然后掉用这个方法结果内存溢出了,你有什么好的解决方案没.

5 楼 xianbin 2012-12-20  

myisyao 写道

还有var plotConfig = createBarChartOptions(axes, series);  

resizeGlobalMonitorChartContainer(containerId); 这代码什么意思啊，麻烦你解释解释。

这个只是解释内存可能到只内存溢出的问题，不是完整的应用，你运行了也不会有效果。

4 楼 myisyao 2012-12-18  

还有var plotConfig = createBarChartOptions(axes, series);  

resizeGlobalMonitorChartContainer(containerId); 这代码什么意思啊，麻烦你解释解释。

3 楼 myisyao 2012-12-18  

你运行过没有啊？怎么我在jsp页面输入你的代码，就报错，1.var series = [{'test'}];  
爆红！

2 楼 xianbin 2012-09-17  

ray_linn 写道

内存溢出 和 内存不足 是两个概念，乱来吧你。

并不是内存不足的问题，而是jqplot不断的重建之后，会在某些浏览器（比如IE中）产生内存泄露，从而导致内存不断的快速增长，最后沾满内存，出现内存溢出。

本人的测试环境为：IE8（存在泄露）、firefox 14（不存在泄露）、chrome 21（不存在泄露）。

不知道以上解释能解答楼上的疑问？

1 楼 ray_linn 2012-09-13  

内存溢出 和 内存不足 是两个概念，乱来吧你。