highcharts 内存泄露的解决

使用了定时ajax刷新,趋势图不停的刷新,在chrome中没有问题,但在ie中内存的使用不断增加.
无意中看到了hightcharts网站上有一个内存泄露的测试,测试了一下发现ie的内存使用得到了很大改善.
http://www.highcharts.com/tests/?file=memory-chart-destroy

总结：
// 绘制趋势图
chart = new Highcharts.Chart({
hightcharts的每次绘制，返回的chart对象保存的数据占用的内存不会自动释放，除非刷新整个页面，所以在重新绘制图形前先把chart清除掉。

我的例子：

//发送异步请求，对返回的数据进行处理
$.get('getDyWaveDataAjax.action?deviceId=' + deviceId, function(data, text){
	// charts是每次绘图的返回对象组成的数组，把它清除掉
	$.each(charts, function(idx,item){ 
		item && item.destroy();
		item = null;
	});
	charts = null;
	charts = new Array();
	$("#mainContent").html(data);
});

评论

4 楼 chenshijie 2014-08-04  

其实highcharts有一个全局的变量highcharts.charts

3 楼 chenshijie 2014-08-04  

d

2 楼 tjmljw 2012-06-14  

qingchenyuji 写道

博主能说的详细点吗？我用的是jquery+Ajax,直接把chart = new Highcharts.Chart({ }）封装成一个新的函数，供异步刷新时调用。您是清除的chart中的数据（charts）,还是直接把chart清除掉？代码看的不太明白，望不吝赐教。谢谢！

你好，因为在我的程序中一次Ajax请求回来后会绘制多个chart，所以声明了一个全局的数组charts（如下所示）

// myChart.js

// chart对象数组
var charts = new Array();

// 绘制函数
function drawChart() {
	
	var chart;
	
	// 绘制图表，同时返回一个chart对象
	chart = new Highcharts.Chart({
		...
		...
		...
	});

        // 把chart对象放进数组
	charts.push(chart);
		
}

工作流程：
1.页面发送Ajax请求
2.Ajax请求回来后：
  a.清空charts数组（释放内存）
  b.绘制图表，同时把新产生的chart放进charts数组

就是说每次Ajax请求返回后首先清空全局变量charts，然后再绘制，不知道是否解释明白了，希望对你有帮助。

1 楼 qingchenyuji 2012-06-13  

博主能说的详细点吗？我用的是jquery+Ajax,直接把chart = new Highcharts.Chart({ }）封装成一个新的函数，供异步刷新时调用。您是清除的chart中的数据（charts）,还是直接把chart清除掉？代码看的不太明白，望不吝赐教。谢谢！