jianqi6
2011-04-15 14:20
浏览 425
已采纳

JQuery插件-HighCharts 一个令我蛋疼的事 求教、、

引用

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

修改后的代码:
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,你可以在网上搜一下,他的图表显示就很好,我用的就是这个,很简单的,你可以再往上找一个破解版的,但是破解版的柯南找的时候有点不好找。

这个项目 已经基本完成了,这时候在动这个技术不太可可能,有可能到最后的时候 换成 SVG + VML了,
觉得这个 可以 控制,但是 AJAX 刷新时,内存也是嗖嗖的网上长啊,一秒10几KB 这还只是 小图形。


不过应该比当年用DIV时候强吧、、
问题补充
很奇怪,为什么要投隐呢,难道我发的板块不对 晕、、
问题补充
偷偷的用 到时候 还得改 先拿着个练练手啊!
问题补充
conanca 写道
奥义之舞 写道
yintingbird 写道
我建议你用FusionCharts,你可以在网上搜一下,他的图表显示就很好,我用的就是这个,很简单的,你可以再往上找一个破解版的,但是破解版的柯南找的时候有点不好找。

这个项目 已经基本完成了,这时候在动这个技术不太可可能,有可能到最后的时候 换成 SVG + VML了,
觉得这个 可以 控制,但是 AJAX 刷新时,内存也是嗖嗖的网上长啊,一秒10几KB 这还只是 小图形。


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


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

先拿这个练手,到时候重新换一个
准备用raphael 谁用过这个,这个性能怎么样呢,封装的SVG+VML
问题补充
红四团 写道
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实现的 如果网页游戏不存在内存问题的话 它也不会有的。

额 这种的是不是刚开始都要进行加载等待一下啊
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

15条回答 默认 最新

  • cyrilluce 2011-04-15 14:20
    已采纳

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

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

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

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

    点赞 打赏 评论
  • tanqimin 2011-04-15 14:20

    这个图表真的很蛋痛!

    点赞 打赏 评论
  • zqiangzhang 2011-04-15 14:20

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

    点赞 打赏 评论
  • iteye_18009 2011-04-15 14:20

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

    点赞 打赏 评论
  • yintingbird1986 2011-04-15 14:20

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

    点赞 打赏 评论
  • weixin_42554690 2011-04-15 14:20

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

    点赞 打赏 评论
  • conanca 2011-04-15 14:20

    [quote="奥义之舞"][quote="yintingbird"]我建议你用FusionCharts,你可以在网上搜一下,他的图表显示就很好,我用的就是这个,很简单的,你可以再往上找一个破解版的,但是破解版的柯南找的时候有点不好找。[/quote]
    这个项目 已经基本完成了,这时候在动这个技术不太可可能,有可能到最后的时候 换成 SVG + VML了,
    觉得这个 可以 控制,但是 AJAX 刷新时,内存也是嗖嗖的网上长啊,一秒10几KB 这还只是 小图形。

    不过应该比当年用DIV时候强吧、、 8) [/quote]

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

    点赞 打赏 评论
  • 南挽. 2011-04-15 14:20

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

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

    点赞 打赏 评论
  • sunofsummer 2011-04-15 14:20

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

    点赞 打赏 评论
  • springdog 2011-04-15 14:20

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

    点赞 打赏 评论
  • lovemakaishu1314 2011-04-15 14:20

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

    点赞 打赏 评论
  • sunofsummer 2011-04-15 14:20

    [quote="奥义之舞"][quote="sunofsummer"]我以前和你遇到过同样的问题,amcharts可以解决。[/quote]
    性能方面可以解决么,内存长的快不,和AJAX交互怎么样,[/quote]

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

    点赞 打赏 评论
  • lanzhengwu 2011-04-15 14:20

    频繁的jquery.ajax也会出现问题 。。对象销毁不干净 。

    点赞 打赏 评论
  • xm_koma 2013-05-08 16:50

    回个帖子,存个档,以后或许会用到

    点赞 打赏 评论
  • haitaohaifeng 2014-08-21 14:02

    一帮人在这里解决问题,都不看楼主的代码,new Highcharts.Chart(waveLineImage); 你每次都会创建对象,浏览器能不崩溃吗?不要把页面初始化和实时请求混到一起,声明全局highchart对象,页面初始化的时候new一个highcharts对象,后面的实时请求只需要对series set数据就可以,然后调用redraw函数,或者先destroy highchart 然后在new。
    PS:pushlet+highcharts 效果还是挺理想的

    点赞 打赏 评论

相关推荐 更多相似问题