highcharts_ajax动态刷新连接状态图.docVIP

Heighcharts ajax 动态更新链接状态图 一、引言 要实现上面的效果。主要应用Heighcharts ，Heighcharts是一个对个人免费的高效率的前端画图组建，商业收费。图形出来会有heighcharts的网址，不过可以破解。 二、原理 原理很简单，Heighcharts进行画图显示，ajax动态更新数据，把更新的数据应用到heighcharts上去。 三、实现 Heighcharts 提供了很多用例，也提供了很多api函数，纯做一个heighcharts，难度不大。刚开始也根据例子做了cpu与内存监控图。没有用到ajax。很轻松完成。后面需要做连接监控图，需要结合ajax。 我应用的是prototype，自然很轻易的就得到了数据。 new Ajax.Request ? $this- url XXX ? , method:post, onSuccess: function data try alert eval data.responseText ; catch e alert e.message ; 问题来了，怎么把得到的ajax数据调用到heigcharts上。我图简单（js不过关）就想直接把ajax封装成一函数，然后把数据返回应用到heighcharts，搞了一天，都没数据弄出来，最后网上查了一下，有网友问个这个问题，但没得到解决答案，只能最终放弃。 后面参考了别人的代码，把chart设为全局变量调用到ajax里实现。终于找到了解决方案。写了半天，最后得到一个图 随着时间的增加，图形变化，但原来的图貌似没删除掉的。调式了半天没结果。Highcharts的 enginConn_chart.redraw ;重画函数与 for var k 0;k enginConn_chart.series.length - 1; k-++ enginConn_chart.series[k].remove ; 删除函数都有用到，实在么办法了，就请教我的师傅，师傅果然就是师傅，把 for var k 0;k enginConn_chart.series.length - 1; k-++ enginConn_chart.series[k].remove ; 改成 for var k enginConn_chart.series.length - 1; k 0; k-- enginConn_chart.series[k].remove ; 显示正常。佩服！ 代码： var enginConn_chart; function get_enginConn_data new Ajax.Request ? $this- url XX ? , method:post, onSuccess: function data try update_enginConn_chart eval data.responseText ; catch e //alert e.message ; function update_enginConn_chart data enginConn_chart.redraw ; var smain_data []; var cmain_data []; var tmain_data []; for var key in data if data.hasOwnProperty key if key main var smain data.main.s; var cmain data.main.c; var tmain data.main.to; time new Date .getTime ; for var i 0; i smain.length; i++ var svalue smain[i]; if svalue 0 svalue Math.random * 100; smain_data.push y : svalue, x : time - i*10000 ; for var i 0; i cmain.length; i++ var cvalue cmain[i]; if cvalue 0 cvalue Math.random * 100; cmain_data.push y : cvalue, x : time - i*10000 ; for var i 0; i tmain.length; i++ var tvalue tmain[i]; if tvalue 0 tvalue Math.random * 100; tmain_data.push