Heighcharts ajax 动态更新链接状态图

jopen 11年前

一、引言

Heighcharts ajax 动态更新链接状态图

Heighcharts ajax 动态更新链接状态图

要实现上面的效果。主要应用Heighcharts ,Heighcharts是一个对个人免费的高效率的前端画图组建,商业收费。图形出来会有heighcharts的网址,不过可以破解。

 

二、原理

 原理很简单,Heighcharts进行画图显示,ajax动态更新数据,把更新的数据应用到heighcharts上去。

三、实现

Heighcharts 提供了很多用例,也提供了很多api函数,纯做一个heighcharts,难度不大。刚开始也根据例子做了cpu与内存监控图。没有用到ajax。很轻松完成。后面需要做连接监控图,需要结合ajax。

我应用的是prototype,自然很轻易的就得到了数据。

new Ajax.Request('url('XXX') ?>', { method:'post',

             onSuccess: function(data) {

            try{

                    alert(eval(data.responseText));

            }catch(e) { alert(e.message)

            }

        }

  });

问题来了,怎么把得到的ajax数据调用到heigcharts上。我图简单(js不过关)就想直接把ajax封装成一函数,然后把数据返回应用到 heighcharts,搞了一天,都没数据弄出来,最后网上查了一下,有网友问个这个问题,但没得到解决答案,只能最终放弃。

后面参考了别人的代码,把chart设为全局变量调用到ajax里实现。终于找到了解决方案。写了半天,最后得到一个图

Heighcharts 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('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({ y : tvalue, x : time - i*10000});        }               for(var k = enginConn_chart.series.length - 1; k >= 0; k--){                  enginConn_chart.series[k].remove();        }                               enginConn_chart.addSeries({                name: '服务器端 ',                data: smain_data,                color: '#0066FF'           }           );                     enginConn_chart.addSeries({                name: '客户端 ',                data: cmain_data,                color: '#006633'           }           );                enginConn_chart.addSeries({                name: 'Total ',                data: tmain_data,                color: '#FF6600'           }           );              }         Highcharts.setOptions({                                global: {                                       useUTC: false                                }                         });                                                                jQuery(document).ready(function() {                                name='';                                data=[];                                                               enginConn_chart = new Highcharts.Chart({                                       chart: {                                              renderTo: '_connmain_',                                              defaultSeriesType: 'spline',                                              marginRight: 10,                                              marginTop: 10                                       },                                                                             title: {                                              text: ''                                       },                                       xAxis: {                                              type: 'datetime',                                              tickPixelInterval: 120                                       },                                       yAxis: {                                              title: {                                                     text: '保持连接数/个'                                              },                                              min:0,                                              minPadding: 0.5,                                          maxPadding: 0.5,                                                   plotLines: [{                                                     value: 0,                                                     width: 1,                                                     color: '#87BED3'                                              }]                                       },                                        plotOptions: {                                        series: {                                            lineWidth: 1,                                                                                                         dashStyles:'Solid',                                                     shadow: false,                                                     states: {                                                  hover: {                                                      enabled: true,                                                    lineWidth: 1                                                }                                                                               },                                                                                                             marker: {                                                            enabled: false,                                                            states: {                                                                   hover: {                                                                          enabled: true,                                                                          symbol: 'circle',                                                                          radius: 3,                                                                          lineWidth: 1                                                                   }                                                            }                                                         }                                              }                             },                                            tooltip: {                                              formatter: function() {                                                return Highcharts.numberFormat(this.y, 2);                                              }                                       },                                       legend: {                                              enabled: true,                                                                                           borderWidth: 1                                                                             },                                       exporting: {                                              enabled: false                                       },                                       series: [                                       {                                            name: name,                                              color: '#0066FF',                                              data: data                                       }                                       ]                                });                                                                                       });         get_enginConn_data();    window.setInterval(get_enginConn_data, 10000);