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=[...