HighCharts & AJAX 绘制图表

   最近在做一个监控系统，需要制作两个图形，一个度盘，一个波形图，最先开始使用了JFreeChart绘制图形，但是在服务器端绘制图形鸭梨很大，占用带宽多，浏览图形不畅快，抛弃之。
    然后觉得可以使用Java Applet在客户端绘制图形，但是这个要求JRE环境，于是也被无情的抛弃了。
    然后在网上找了会，发现一个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[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、最好把不用的内存都释放掉，别每次都生成了而没有释放

评论

4 楼 Songjun37 2011-04-22  

奥义之舞 写道

奥义之舞 写道

Songjun37 写道

HighCharts java导出 你做过吗？

没有 我做的 没有这个需求，不过 导出 只要 导入 那个导出的JS类就over了这个好像必须到Highcharts官网转上一圈才能导出

那个是你要连接外网的啊，如果网络条件限制呢？

3 楼 奥义之舞 2011-04-21  

奥义之舞 写道

Songjun37 写道

HighCharts java导出 你做过吗？

没有 我做的 没有这个需求，不过 导出 只要 导入 那个导出的JS类就over了这个好像必须到Highcharts官网转上一圈才能导出

2 楼 奥义之舞 2011-04-21  

Songjun37 写道

HighCharts java导出 你做过吗？

没有 我做的 没有这个需求，不过 导出 只要 导入 那个导出的JS类就over了

1 楼 Songjun37 2011-04-21  

HighCharts java导出 你做过吗？