引用

最近在做一个监控系统，需要制作两个图形，一个度盘，一个波形图，最先开始使用了JFreeChart绘制图形，但是在服务器端绘制图形鸭梨很大，占用带宽多，浏览图形不畅快，抛弃之。
    然后觉得可以使用Java Applet在客户端绘制图形，但是这个要求JRE环境，于是也被无情的抛弃了。
    然后在网上找了会，发现一个HighCharts类库，一个JQuery插件，使用这个绘制出来的图形挺好看的，效果也令人满意，但是目前跟AJAX结合之后，highcharts制造出来的内存一直没有删除，PF使用率以每秒3MB的速度网上猛涨，令人大感鸭梨、、、（波形图现在困到这一个内存问题了）
   最后的度盘，在刚开始采用的Highcharts画的饼图，弄的一块一块的效果也差，所以在GOOGLE了把JS绘图技术，搜出了令我大感兴奋的矢量绘图技术，SVG AND VML，SVG支持除ＩＥ外大部分的浏览器，ＶＭＬ仅支持IE5以上的浏览器器，所以采用了SVG+VML结合在浏览器中绘图，图形不错，最后结合AJAX也没有发现内存问题。
   所以现在在这想跟大家讨论一下HighCharts的使用、、请各位发表意见

自己要做一个实时的监控数据的图形，但是跟AJAX结合的时候，内存增长的速度比较快，谁能帮我看看怎么回事，谢谢了！



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: []

    }]

}

上面是初始化曲线图的实例



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]);

                dataArray.push([num, item]);

                num = null;

            }

            array = null;  item = null;  point = null;

        }

    if (waveDataLength &lt; 60) {   //当不足60个点时，创建一个临时的数据，绑定到temp当中
        if (tempArray == null) {
            tempArray = new Array();
            for (var i = 0; i &lt; 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;


waveLineImage.redraw();   //重新绘制HighCharts图形
     new Highcharts.Chart(waveLineImage);        //绘制HIghcharts图形，这一句会生成大内


//存，想直接调用redraw重绘方法，完成绘图，这样不用重新刷新区域，而是在旧的基础上绘制，会减少内存，但

//是曲线什么都显示不出来

    }

}

waveData 是传过来的数据，把他绑定到图形中，内存长的飞快，每秒3MB，怎么修改，怀疑是//new Highcharts.Chart(waveLineImage);这句话增长的内存，然后调用 highCharts 的redraw 方法，重画，可是没有效果出来求高手提错！！！！
问题补充
上面有做出来的效果图，可以下载出来看一下、、

另外HighCharts有一个redraw重绘方法，但是应该怎么调用呢，我调用无效！
问题补充
主要就是内存的方面了，也看了好多的JavaScript方面性能问题，内存释放问题，但是都不太理想，
问题补充

怎么没人回复啊泪奔、、

太遗憾了吧

问题补充

引用

用不用我加点注释、、汗
哪一点有问题啊泪奔中、、
不回复也得顶起来啊呜呜、
大家都来探讨一下啊呵呵
大家在客户端都用什么方法绘制图表呢

问题补充

问题补充

引用

咱么是顶起呢？还是顶起呢？呵呵
咱么是顶起呢？还是顶起呢？呵呵
顶顶顶力压千钧
虽说晚上不上班也不至于吧
有哪一点会是不好的大大们都去哪了

问题补充

奥义之舞写道

引用

咱么是顶起呢？还是顶起呢？呵呵
看帖不回帖很不给力啊
顶顶顶力压千钧
虽说晚上不上班也不至于吧
有哪一点会是不好的大大们都去哪了

+1
问题补充

引用

在highcharts官网http://www.highcharts.com/ref/#chart-object查了很久，经过测试，发现一个方法可行，很给力的时刻，修改了点代码，现在使用这种代码之后，可以保持在120KB/s左右的增长率

修改后的代码：

waveLineImage = new Highcharts.Chart({

    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: []

    }]

});

直接实例化绘图对象



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 &lt; waveDataLength; i++) {
        array = waveData[i].split(",");
        point = 1 / array.length;
        for (var j = 0; j &lt; array.length; j++) {
            num = i + Math.round((point * j) * 10) / 10;
            item = parseFloat(array[j]);
            dataArray.push([num, item]);
            num = null;item=null;
        }
        array = null;  item = null;  point = null;
    }
    array = null;  item = null;  point = null; num = null; item=null;
    if (waveDataLength &lt; 60) {   //当不足60个点时，创建一个临时的数据，绑定到temp当中
        if (tempArray == null) {
            tempArray = new Array();
            for (var i = 0; i &lt; 61; i++) {
                tempArray.push([i, -6]);
            }
        }
        if(!waveLineImage.series[1])  waveLineImage.addSeries("",true,false);
        waveLineImage.series[1].setData(tempArray);
    }
    else {
        tempArray = null;
        waveLineImage.series[1].remove();
    }
    waveLineImage.series[0].setData(dataArray);     //在这里通过setData方法设置数据
    dataArray = null; waveDataLength = null;
    waveLineImage.redraw();   //这样调用图例对象的重绘方法可以找的到数据，以前数


//据是设置到JSON里面了，这个对象的数据应该没有更新

    }


}

不过这种现在仍然有100多KB的增长率，对于一个长期停留在页面中不刷新的局面，仍然是一个问题，各位老大们，有没有一个很好的意见提出来，让我继续改进，thank you
问题补充

tanqimin 写道

这个图表真的很蛋痛！

哥们这个图表怎么了，很好看啊呵呵就是性能有点扯淡，不过性能是决定页面技术的优先选择、、
很惆怅

问题补充

夜之son 写道

想让大家说什么呢，图太少，不给力。

ok 上图
问题补充
另外这个是VML画的度盘，跟AJAX结合也不卡，很给力啊呵呵推荐 SVG + VML 结合一秒 10多KB的增长量
问题补充
发现看英文文档狠让人蛋疼的事，有木有，中文帮助文档在哪里呜呜

引用

希望对我的循环提出哪里可以优化点在、、感觉这里面也会浪费点性能
希望最后能把PF增长率控制在 10KB以内
希望告我一个 JS代码控制页面刷新的代码
这样我可以再内存增长到一定程度的时候刷新释放内存

问题补充

hyj1254 写道

highChart我也在用，倒是没深究内存增长的问题。它也是vml+svg。内存不释放跟js代码和浏览器自身实现方式都有关系，有些情况你是无法有效释放内存的：比如在ie中，希望刷新释放内存是无法实现的，你可以到taobao、google地图等网站验证下，它默认将所有的页面元素都缓存起来，因此即使js完全没有问题它所占的内存也会越来越大。但chrome就好得多，每次刷新都显著地释放一些内存。至于highChart你可以到官网上反映下，看是否是内存泄露导致的。

+1

引用

用的浏览器 IE 和火狐的，谷歌到没有看，不过同事通过谷歌浏览器访问了一下，正常，内存这块到没有看，这个浏览器的问题一直在关注， IE 和 FireFox的掐架一直没有停止、、、

引用

另外JS代码构造对象和释放对象之间，这个度由于刚开始关注性能问题，也没能做的很好，大家看到哪一点可以优化的，可以提出来、、
over

问题补充

clue 写道

哦哦。。。原来是HighCharts
官方声称是有解决内存泄漏问题，但关键是。。。它指的泄漏是关闭浏览器仍不释放的泄漏，而非运行中释放

基本上，想要解决难度很大，几乎底层代码都要过一遍，加上清理事件、解除Dom引用的逻辑。
好像excanvas也需要一同改进

HighCharts代码不便放出（就算放出也没用，版本低，改动大），但还是能做到将近0增长的。

P.S. 推荐使用sIEve查看IE下Dom节点释放情况，JS本身的GC是很完善的，但与Dom循环引用就无能为力了。所以查看Dom节点的释放情况就知道是哪里有泄漏了。

高手、、那按照你这样说，我要想做到内存0增长或近0增长，必须修改highcharts的源代码是么？
期待回答///
对于上SIEVE这个软件，下载了也是用了，还有一个火狐里面可以查看内存的软件，也使用了，但是但是很头疼，
还没有找到解决的办法、
还是经验少啊
问题补充

纪红玉写道

JavaEye/ItEye
1号群现招人 QQ 群号：39211996
女程序员群7736086
发完帖子我的号就没了，哎！

找女程序员群，貌似很难吧，估计你这个也是新创的、
问题补充

yintingbird 写道

我建议你用FusionCharts，你可以在网上搜一下，他的图表显示就很好，我用的就是这个，很简单的，你可以再往上找一个破解版的，但是破解版的柯南找的时候有点不好找。

这个项目已经基本完成了，这时候在动这个技术不太可可能，有可能到最后的时候换成ＳＶＧ　＋　ＶＭＬ了，
觉得这个　可以　控制，但是　ＡＪＡＸ　刷新时，内存也是嗖嗖的网上长啊，一秒１０几KB 这还只是小图形。

不过应该比当年用DIV时候强吧、、

问题补充
很奇怪，为什么要投隐呢，难道我发的板块不对晕、、
问题补充
偷偷的用到时候还得改先拿着个练练手啊！
问题补充

conanca 写道

奥义之舞写道

yintingbird 写道

我建议你用FusionCharts，你可以在网上搜一下，他的图表显示就很好，我用的就是这个，很简单的，你可以再往上找一个破解版的，但是破解版的柯南找的时候有点不好找。

这个项目已经基本完成了，这时候在动这个技术不太可可能，有可能到最后的时候换成ＳＶＧ　＋　ＶＭＬ了，
觉得这个　可以　控制，但是　ＡＪＡＸ　刷新时，内存也是嗖嗖的网上长啊，一秒１０几KB 这还只是小图形。

不过应该比当年用DIV时候强吧、、

HighCharts 商业用的话要收费吧。
你们买了授权还是做的是国内项目？

先拿这个练手，到时候重新换一个
准备用raphael 谁用过这个，这个性能怎么样呢，封装的SVG+ＶＭＬ
问题补充

红四团写道

HighCharts所renderer出来的每个Element都是可以destroy的，每个element都有destroy方法。HighCharts封装了VML和SVG，基本上能够跨浏览器。

这个还真不知道，只知道总的有个释放的对象，结果一释放，悲剧的事情发生了，整个图形都没有了

另外想知道 highcharts商用要上交多少money啊

问题补充

sunofsummer 写道

我以前和你遇到过同样的问题，amcharts可以解决。

性能方面可以解决么，内存长的快不，和AJAX交互怎么样，
问题补充

kiven 写道

http://www.open-lib.com/Type/164-1.jsp

这里面或许有你要找的。大家都共享一下自己项目用的图标组件吧。

thank you

不知道who用过Flex么他生成的swf文件是在客户端生成的，还是服务器生成之后传输过来的呢，如果我要对他进行定时刷新，速度怎么样
问题补充

ahzzhen2 写道

用过Flex as3脚本写过一个监控的，内存占用是用仪表盘形式做的。也试过用pushlet+highchart写过（不是很理想，抛弃）

貌似没理解我的意思，我说的是Flex监控实时刷新内存部分长的块么，是在客户端或者服务器端绘图，绘制出来的图形传递速度怎么样，占用带宽多么
问题补充

sunofsummer 写道

奥义之舞写道

sunofsummer 写道

我以前和你遇到过同样的问题，amcharts可以解决。

性能方面可以解决么，内存长的快不，和AJAX交互怎么样，

amcharts是基于flash实现的如果网页游戏不存在内存问题的话它也不会有的。

额这种的是不是刚开始都要进行加载等待一下啊

谁知道dom4j中文帮助文档

明月照大江~

4个回复