`

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清除掉?代码看的不太明白,望不吝赐教。谢谢!

相关推荐

    highcharts饼图字段超出解决

    本篇文章将深入探讨如何解决Highcharts饼图字段超出的问题,让你的图表更加清晰易读。 首先,我们需要理解Highcharts饼图的标签默认行为。默认情况下,Highcharts会尝试在饼图的周围空间内放置标签,但如果标签过长...

    highcharts

    Highcharts是一款强大的JavaScript图表库,用于在...无论是数据分析、商业报告还是科学可视化,它都能提供高质量的图表解决方案。通过对Highcharts的深入理解和应用,开发者可以创建出专业且引人入胜的数据展示界面。

    jquery Highcharts jquery Highcharts

    Highcharts是一款强大的JavaScript图表库,它能够为网页和应用程序提供丰富多样的数据可视化效果。基于jQuery库,Highcharts使得在Web页面上创建交互式图表变得简单易行。在这个压缩包中,很可能包含了Highcharts的...

    Highcharts导出图片ASP.NET解决中文乱码问题

    本文将详细讨论如何在ASP.NET环境中解决Highcharts导出图片时的中文乱码问题。 首先,我们要理解问题的根源。Highcharts默认使用UTF-8编码,而ASP.NET应用可能使用其他编码方式,比如GB2312或GBK,这就可能导致在...

    Highcharts-9.3.2.zip

    对于仍然需要支持老版本浏览器的项目,Highcharts提供了一个理想的解决方案。其次,它对移动端的支持使得在手机和平板等设备上查看图表同样流畅,满足了移动互联网时代的需求。最后,Highcharts提供了多种图表类型,...

    highcharts示例代码(官方例子)

    总的来说,Highcharts是一个强大的工具,无论你是初学者还是经验丰富的开发者,都能从中找到满足需求的解决方案。通过深入理解和实践"highcharts示例代码(官方例子)",你将能够自如地利用Highcharts创造出吸引眼球...

    Highcharts

    Highcharts是一款强大的JavaScript图表库,它能够帮助开发者创建各种丰富的数据可视化效果,广泛应用于Web应用程序中。这款库以其易用性、灵活性和丰富的图表类型而备受赞誉。在Highcharts中,你可以选择不同的图表...

    官方highcharts-4.2.3版

    在4.2.3版本中,Highcharts可能已经解决了早期版本的一些已知问题,提升了性能和稳定性。官方文档通常会列出新版本的改进和修复,开发者可以通过查阅这些资料来了解具体变化。对于需要最新功能或优化的用户,官方...

    Highcharts图表库 v9.3.3.zip

    Highcharts图表库是一款广泛应用于网页数据可视化的JavaScript库,它提供了丰富的图表类型,如柱状图、折线图、饼图、散点图等,帮助开发者轻松创建交互式的图表。v9.3.3是Highcharts的一个更新版本,带来了更多功能...

    Highcharts-2.2.5源码

    Highcharts是一款强大的JavaScript图表库,用于在Web上创建交互式的、高质量的数据可视化图表。它能够以SVG(在现代浏览器中)或VML...同时,了解源码有助于解决实际开发中遇到的问题,提高项目的可维护性和扩展性。

    highcharts的js文件

    通过学习Highcharts的文档和示例,开发者可以定制出满足各种需求的高级数据可视化解决方案。 总之,Highcharts的js文件是构建数据可视化的强大工具,无论是简单的柱状图还是复杂的动态曲线图,都能轻松实现。通过...

    HighCharts

    Highcharts-2.3.5 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习、个人网站和非商业用途使用。目前HighCharts支持的图表类型有曲线...

    3D图表Highcharts(3D)

    Highcharts是一款强大的JavaScript图表库,它能够帮助开发者创建出各种精美、交互性强的2D和3D图表。在“3D图表Highcharts”这个主题中,我们将深入探讨如何利用Highcharts来实现三维图表的制作,以及它在数据可视化...

    Highcharts最全示例程序

    Highcharts是一款广泛应用于Web开发中的JavaScript图表库,它能够帮助开发者轻松创建各种动态、交互式的图表,如折线图、柱状图、饼图、散点图等。本压缩包"Highcharts-2.3.2"包含了Highcharts 2.3.2版本的源码和...

Global site tag (gtag.js) - Google Analytics