最近在做一个监控系统,需要制作两个图形,一个度盘,一个波形图,最先开始使用了JFreeChart绘制图形,但是在服务器端绘制图形鸭梨很大,占用带宽多,浏览图形不畅快,抛弃之。
然后觉得可以使用Java Applet在客户端绘制图形,但是这个要求JRE环境,于是也被无情的抛弃了。
然后在网上找了会,发现一个HighCharts类库,一个JQuery插件,使用这个绘制出来的图形挺好看的,效果也令人满意,但是目前跟AJAX结合之后,highcharts制造出来的内存一直没有删除,PF使用率以每秒3MB的速度网上猛涨,令人大感鸭梨、、、(波形图现在困到这一个内存问题了)
最后的度盘,在刚开始采用的Highcharts画的饼图,弄的一块一块的 效果也差,所以在GOOGLE了把JS绘图技术,搜出了 令我大感兴奋的矢量绘图技术,SVG AND VML,SVG支持除IE外大部分的浏览器,VML仅支持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[i].split(",");
point = 1 / array.length;
for (var j = 0; j < array.length; j++) {
num = i + Math.round((point * j) * 10) / 10;
item = parseFloat(array[j]);
if(maxSize<item) maxSize=item;
dataArray.push([num, item]);
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([i, -6]);
}
}
if(!waveLineImage.series[1]) waveLineImage.addSeries("",true,false);
waveLineImage.series[1].data = tempArray;
}
else {
tempArray = null;
waveLineImage.series[1].remove();
}
waveLineImage.series[0].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、最好把不用的内存都释放掉,别每次都生成了而没有释放