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

2019-03-25 13:49|来源: 网路

引用

  最近在做一个监控系统,需要制作两个图形,一个度盘,一个波形图,最先开始使用了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 < 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节点的释放情况就知道是哪里有泄漏了。

高手、、那按照你这样说,我要想做到内存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实现的 如果网页游戏不存在内存问题的话 它也不会有的。

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

相关问答

更多

计算机教程,计算机基础知识,计算机入门知识,计算机知识求教?

www.dnjc.com.cn里面都有的,自己去看看吧,好东西

java 的单点登录问题?求教。

这些项目共享一个数据库表,然后当某一个项目登录以后,在这个数据表中纪录该用户一下。别的项目在访问时,先查询这张表的状态是否为登录状态

求教一个在eclips下安装Spring插件的问题

1.OpenExplorer,直接进入资源目录,   安装方法:关闭eclipse,将OpenExplorer_1.5.0.v201108051513.jar放入plugin文件,重启即可。   2.eclipse的tomcat发布目录设置:还要修改发布目录   3.Myeclipse的项目导入eclipse:   1.复制以下内容加入原myeclipse的.project   找到<natures>...</natures>代码段,加入: <nature>org.eclipse.jem.work ...

求教一个在eclips下安装Spring插件的问题

1.OpenExplorer,直接进入资源目录,   安装方法:关闭eclipse,将OpenExplorer_1.5.0.v201108051513.jar放入plugin文件,重启即可。   2.eclipse的tomcat发布目录设置:还要修改发布目录   3.Myeclipse的项目导入eclipse:   1.复制以下内容加入原myeclipse的.project   找到 ... 代码段,加入: org.eclipse.jem. workbench.JavaEMFNature org. ...

求教 mybatis 分页插件的实现 原理!!!

期待后的失望,还有那一片春色 可以留哈哈住我思念的心声 或许在某个苍白的黄昏 我还会看到你那不再清晰的光影 现世的遗憾是多悠长

jquery slideToggle() 能否实现左右方向折叠?

应该不能,那是人家封装好的 目标元素设置为position:absolute; 通过animate改变它的left值,来实现左右滑动; 也可以不设position;通过animate改变目标元素的宽 去查看一下jquery API手册

菜鸟求教LINUX下的一个script

首先,你在终端运行的时候要加运他的程序,比如说,这个脚本叫test.sh /bin/bash ./test.sh 或者在脚本头部加入 #!//bin/bash 在终端中进入到该文件夹,输入 chmod +x test.sh 然后 ./test.sh ex>{$0 someword}这句话中,只有 $0有意义,表示这个脚本自己的名字,其他都是以字符串的形式用echo打出 建议楼主从最基础的学起

小白求教jquery中$()问题

$()是Jquery的核心。<br>$()一般有两种用法。<br>第一种是用来匹配页面中的元素,返回一个对象或者是一个包含多个对象的集合。<br>语法:$(selector)<br>selector是一个用来匹配元素的字符串。<br>例如$("#divMain"),将返回页面中ID 为divMain的元素。<br>选择字符串基本等同于css中的选择器。利用此函数,可以轻而易举的找到页面中的任何一个元素或者一组满足某条件的元素的集合。<br><br>$()返回的对象可以进行很多操作。每次操作都返回原 ...

有的jquery效果中都带有jquery.tools.min.js,请问这个是干什么的!求教。。。。

低普翻jquery未知tools工具min分\小js装饰\网页控件格式