引用
最近在做一个监控系统，需要制作两个图形，一个度盘，一个波形图，最先开始使用了JFreeChart绘制图形，但是在服务器端绘制图形鸭梨很大，占用带宽多，浏览图形不畅快，抛弃之。
然后觉得可以使用Java Applet在客户端绘制图形，但是这个要求JRE环境，于是也被无情的抛弃了。
然后在网上找了会，发现一个HighCharts类库，一个JQuery插件，使用这个绘制出来的图形挺好看的，效果也令人满意，但是目前跟AJAX结合之后，highcharts制造出来的内存一直没有删除，PF使用率以每秒3MB的速度网上猛涨，令人大感鸭梨、、、（波形图现在困到这一个内存问题了）
最后的度盘，在刚开始采用的Highcharts画的饼图，弄的一块一块的 效果也差，所以在GOOGLE了把JS绘图技术，搜出了 令我大感兴奋的矢量绘图技术，SVG AND VML，SVG支持除ＩＥ外大部分的浏览器，ＶＭＬ仅支持IE5以上的浏览器器，所以采用了SVG+VML结合在浏览器中绘图，图形不错，最后结合AJAX也没有发现内存问题。
所以现在在这想跟大家讨论一下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: []
}]
}
上面是 初始化曲线图的实例
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 < 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; 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 < 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;item=null; } array = null; item = null; point = null; } array = null; item = null; point = null; num = null; item=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].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节点的释放情况就知道是哪里有泄漏了。
官方声称是有解决内存泄漏问题，但关键是。。。它指的泄漏是关闭浏览器仍不释放的泄漏，而非运行中释放
基本上，想要解决难度很大，几乎底层代码都要过一遍，加上清理事件、解除Dom引用的逻辑。
好像excanvas也需要一同改进
HighCharts代码不便放出（就算放出也没用，版本低，改动大），但还是能做到将近0增长的。
P.S. 推荐使用sIEve查看IE下Dom节点释放情况，JS本身的GC是很完善的，但与Dom循环引用就无能为力了。所以查看Dom节点的释放情况就知道是哪里有泄漏了。
高手、、那按照你这样说，我要想做到内存0增长或近0增长，必须修改highcharts的源代码是么？
期待回答///
对于上SIEVE这个软件，下载了也是用了 ，还有一个 火狐里面可以查看内存的软件，也使用了，但是 但是很头疼，
还没有找到解决的办法、
还是经验少啊
问题补充
纪红玉 写道
JavaEye/ItEye
1号群 现招人 QQ 群号：39211996
女程序员群7736086
发完帖子我的号就没了，哎！
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 写道
thank you
不知道who用过Flex么 他生成的swf文件是在客户端生成的，还是服务器生成之后传输过来的呢，如果我要对他进行定时刷新，速度怎么样
问题补充
ahzzhen2 写道
用过Flex as3脚本写过一个监控的，内存占用是用仪表盘形式做的。也试过用pushlet+highchart写过（不是很理想，抛弃）
貌似没理解我的意思，我说的是Flex监控 实时刷新 内存部分长的块么， 是在客户端 或者 服务器端绘图，绘制出来的图形传递速度怎么样，占用带宽多么
问题补充
sunofsummer 写道
奥义之舞 写道
sunofsummer 写道
我以前和你遇到过同样的问题，amcharts可以解决。
性能方面可以解决么，内存长的快不，和AJAX交互怎么样，
amcharts是基于flash实现的 如果网页游戏不存在内存问题的话 它也不会有的。
额 这种的是不是刚开始都要进行加载等待一下啊
