HighCharts趋势图动态设置Series数组(根据后台决定具体几个data), 并动态刷新数据

最近要做一些前台的数据展示, 用到了HighCharts.我这次做的是趋势图,涉及到动态刷新,因为涉及到了动态刷新,为了便于记忆,在这里记录一下。
在Highcharts中文网上有相应的演示demo,一般你所需要的图的样式都可以找到。可以在demo基础上进行修改。
附Highcharts中文网:http://www.hcharts.cn/demo/index.php
首先,是引入HIghcharts绘图相关的js文件和jQuery.js。
接下来,把HIghcharts动态刷新的格式拷贝并作修改:

var chart;
    $(document).ready(
            function() {
                Highcharts.setOptions({
                    global : {
                        useUTC : false
                    }
                });
                chart = new Highcharts.Chart({
                    chart : {
                        renderTo : 'container', //图表放置的容器,DIV 
                        defaultSeriesType : 'spline', //图表类型为曲线图 
                        events : {
                            load : function() {
                            var series = this.series;
                            setInterval(function() {
                                $.ajax({
                                      type: "POST",
                                      url: "cpuMemmaryMonitor/selectCpuDatas.do?userid="+userid",
                                      async: false, //表示同步,如果要得到ajax处理完后台数据后的返回值,最好这样设置
                                      success: function(result){
                                        results = eval("(" + result + ")");
                                        var size = results.length;

                                        for(var i=0; i<series.length; i++) {
                                            for(var j=0; j<size; j++) {
                                                var name = results[j].ip;
                                                var time = results[j].time;
                                                var value = results[j].value;
                                                if(series[i].name == name){
                                                    series[i].addPoint([(new Date()).getTime(), value], true, true);
                                                }
                                            }

                                        }
                                      }
                                }, false); 
                            }, 1000*5);
                        }
                    }
                    },
                    title : {
                        text : 'CPU使用率走势图' //图表标题 
                    },
                    xAxis : { //设置X轴 
                        type : 'datetime', //X轴为日期时间类型 
                        tickPixelInterval : 75
                    //X轴标签间隔 
                    },
                    yAxis : { //设置Y轴 
                        title : 'value',
                        min : 0
                    //Y轴最小值 
                    },
                    tooltip : {//当鼠标悬置数据点时的提示框 
                        formatter : function() { //格式化提示信息 
                            return '<b>' + this.series.name + '</b><br/>' +
                                Highcharts.dateFormat('%H:%M:%S', this.x) + '<br/>' +
                                Highcharts.numberFormat(this.y, 2)+ '%';
                        }
                    },
                    legend : {
//                      enabled : false,
                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'top',
        //              y: 130,
                        borderWidth: 0
                    //设置图例不可见 
                    },
                    exporting : {
                        enabled : false
                    //设置导出按钮不可用 
                    },
                    credits : {
                        enabled: false
                    },
                    series : create()
                });
            });

重点是chart里面的event属性,series属性。注意,此时:series属性是一个js函数的返回值,需用“js函数名()”来取得。
HighCharts中文网demo里面,series是这样的:

series: [{                                                            
  name: 'Random data',                                              
  data: (function() {                                                
    // generate an array of random data                          
    var data = [],                                                
      time = (new Date()).getTime(),                              
      i;                                                          
    for (i = -19; i <= 0; i++) {                                    
      data.push({                                                
        x: time + i * 1000,                                  
        y: Math.random()                                        
      });                                                        
    }                                                              
    return data;                                                    
  })()                                                              
}]

这时,图表中只有一条折线,且x、y轴数据都不能确定,需要在这里添加ajax方法从后台获取数据,从而决定图表折线(曲线)条数,x、y轴数据等。所以就用到了create()方法。如下所示:

function create() {
    var series = new Array();
    $.ajax({
      type: "POST",
      url: "/cpuMemmaryMonitor/selectCpuDatas.do?userid="+userid",
      async: false, //表示同步,如果要得到ajax处理完后台数据后的返回值,最好这样设置
      success: function(result){
        results = eval("(" + result + ")");
        var size = results.length;
        for(var i=0; i<size; i++) {
          var name = results[i].ip;
          var time = results[i].time;
          var value = results[i].value;

//        var date2 =  new Date(time);   //将时间转化为时间戳
//        var time_str = date2.getTime();
          var data = function() {
            var data = [],
            //  time = result.time,//x轴数据由后台决定。
              time = (new Date()).getTime(),
              i;
            for(i=-59; i<=0; i++) {
              data.push({
                x: time + i * 5000,
                y: value
              });
            }
            return data;
          }();
          series.push({"name": name, "data": data});
        } 
      }
    }, false);  //false表示“遮罩”,前台不显示“请稍后”进度提示
        return series;
  }

上面代码块中的:series.push({“name”: name, “data”: data});就是在series【】数组中添加数据,且通过根据for循环生成多条”曲线”。并放入数据。

而chart里面的event属性, 则是每隔一段时间(1000*5=5s)刷新页面数据,方法主要是通过ajax请求后台,得到相应数据并且处理相应数据后,放到一个数据结构或json对象中。

events : {
                            load : function() {
                            var series = this.series;
                            setInterval(function() {
                                $.ajax({
                                      type: "POST",
                                      url: "/cpuMemmaryMonitor/selectCpuDatas.do?userid="+userid",
                                      async: false, //表示同步,如果要得到ajax处理完后台数据后的返回值,最好这样设置
                                      success: function(result){
                                        results = eval("(" + result + ")");
                                        var size = results.length;

                                        for(var i=0; i<series.length; i++) {
                                            for(var j=0; j<size; j++) {
                                                var name = results[j].ip;
                                                var time = results[j].time;
                                                var value = results[j].value;
                                                if(series[i].name == name){
                                                    series[i].addPoint([(new Date()).getTime(), value], true, true);
                                                }
                                            }

                                        }
                                      }
                                }, false); 
                            }, 1000*5);
                        }
                    }

效果图:
其中,右侧的图例名称是series[i].name
这里写图片描述

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页