HighCharts & AJAX 绘制图表
最近在做一个监控系统，需要制作两个图形，一个度盘，一个波形图，最先开始使用了JFreeChart绘制图形，但是在服务器端绘制图形鸭梨很大，占用带宽多，浏览图形不畅快，抛弃之。然后觉得可以使用Java Applet在客户端绘制图形，但是这个要求JRE环境，于是也被无情的抛弃了。http://www.agoit.com/images/smiles/icon_eek.gif
然后在网上找了会，发现一个HighCharts类库，一个JQuery插件，使用这个绘制出来的图形挺好看的，效果也令人满意，但是目前跟AJAX结合之后，highcharts制造出来的内存一直没有删除，PF使用率以每秒3MB的速度网上猛涨，令人大感鸭梨、、、（波形图现在困到这一个内存问题了）
最后的度盘，在刚开始采用的Highcharts画的饼图，弄的一块一块的 效果也差，所以在GOOGLE了把JS绘图技术，搜出了 令我大感兴奋的矢量绘图技术，SVG AND VML，SVG支持除ＩＥ外大部分的浏览器，ＶＭＬ仅支持IE5以上的浏览器器，所以采用了SVG+VML结合在浏览器中绘图，图形不错，最后结合AJAX也没有发现内存问题。
所以现在在这想跟大家讨论一下HighCharts的使用、、请各位发表意见
这个是HIghcharts绘制图形的基本步骤，现在还没有填充数据
waveLineImage = { chart: { renderTo: 'waveImage', //绘制到DIV容器中，根据ID defaultSeriesType: 'line', //绘制类型 目前是曲线 plotBorderWidth: 1, plotBorderColor: '#99CC99', marginRight: 12, showAxes: true }, title: { text: '', x: -20 //center }, xAxis: { tickWidth: 0, tickInterval: 5, gridLineWidth: 1, gridLineColor: '#99CC99', categories: [] }, yAxis: { title: { text: '' }, min: -1, tickInterval: 5, gridLineWidth: 1, gridLineColor: '#99CC99' }, plotOptions: { series: { animation: false, marker: { enabled: false } } }, tooltip: { enabled:false, formatter: function(){ return null; } }, legend: { enabled: false }, exporting: { enabled: false }, series: [{ name: "monitor", data: [] }, { name: "temp", data: [] }]}
下面是传输数据，到highcharts当中
maxSize = 0;lastSize = -1;var tempArray = null;function drawOscillogram(waveData){ if (waveData) { //传输过来的JSON数据 var dataArray = new Array(); var array = null, point = null, num = null,item = null;var waveDataLength = waveData.length; for (var i = 0; i < waveDataLength; i++) { array = waveData.split(","); point = 1 / array.length; for (var j = 0; j < array.length; j++) { num = i + Math.round((point * j) * 10) / 10; item = parseFloat(array); if(maxSize<item) maxSize=item; dataArray.push(); num = null; } array = null;item = null;point = null; } if (waveDataLength < 60) { //当不足60个点时，创建一个临时的数据，绑定到temp当中 if (tempArray == null) { tempArray = new Array(); for (var i = 0; i < 61; i++) { tempArray.push(); } }if(!waveLineImage.series)waveLineImage.addSeries("",true,false); waveLineImage.series.data = tempArray; } else { tempArray = null; waveLineImage.series.remove(); } waveLineImage.series.data = dataArray; dataArray = null; waveDataLength = null;if(lastSize!=maxSize){lastSize=maxSize;}else{waveLineImage.redraw(); //重新绘制HighCharts图形，但是这个好像不能生成轴 } new Highcharts.Chart(waveLineImage); //绘制HIghcharts图形 }}
谁能看一下是哪点的内存溢出了，或者谁用过HighCharts绘制图表，看看在哪重新绘制图形内存量增长的少些、、
最后解决办法：
现在画的波形图也就是折线图也是用的JS+VML绘制的，基本上CPU也就每次都是3%左右，多的时候10%，内存也不增长。。。
解决办法：
1、AJAX把初始化请求的部分提出来，别每一次请求都调用
2、VML有个专门的绘制折线图的类型，使用这个 polyline
3、最好把不用的内存都释放掉，别每次都生成了而没有释放
页:
[1]