Highcharts網頁版

//後臺控制器中（SpringMVC）
@RequestMapping(value="/getAll",method=RequestMethod.POST)
        @ResponseBody
        public List<UserOnlineNum> getAll(HttpServletRequest request,HttpServletResponse response ) throws Exception{
                UserOnlineNum onlineNum = new UserOnlineNum();
                List<UserOnlineNum> list = onlineNumService.findLists(onlineNum);
                JsonWriteUtil.writeJson(response, list);
                return list;
        }


//js
$(document).ready(function() {  
    Highcharts.setOptions({  
        global: {  
            useUTC: false  
        }  
    });  
    var chart;  
    chart = new Highcharts.Chart({  
        chart: {  
            renderTo: 'container',  
                    type: 'spline',   //圖表類型 line, spline, area, areaspline, column, bar, pie , column，scatter 
            marginRight: 10,   
            events: {  
                load: function () {   
                    var series = this.series[0];  
                    var loaddata = function () {  
                        $.ajax({  
                            async: false,  
                            type: "POST",  
                            dataType: "json",  
                            contentType: "application/json;charset=utf-8",  
                            url: "./getAll", //讀取數據  
                            success: function (result) {  
                                    // 時間
                                    var dates = new Array();
                                    // 人數
                                    var nums = new Array();
                                    
                                    for(var i = 0;i< list.length;i++){
                                            // 把時間添加到集合中
                                            dates.push(list.datetime);
                                            // 把人數添加到集合中
                                            nums.push(list.num);
                                    }
                                    // 把日期和人數集合轉換成JSON
                                    var dateJson = eval("("+dates+")");
                                    alert(dateJson)
                                    var numJson = eval("("+nums+")"); 
                                    alert(numJson)
                            }  
                        });  
                        series.addPoint([dates, nums], true, true);  
                    };  
                   // setInterval(loaddata, 300000);//每5分鐘執行一次  
                }  
            }  
         },
        xAxis: {
                categories: dateJson,//xAxisstr爲時間hh:mm 
                tickPixelInterval: 100
        },
        yAxis: {    
            min: 0,
            title: {text: '數量（天/充值數）'}          //Y軸座標標題  labels:縱柱標尺
        },  
        legend: {                               //【圖例】位置樣式
            layout: 'horizontal',               //【圖例】顯示的樣式：水平（horizontal）/垂直（vertical）
            backgroundColor: '#FFFFFF',
            borderColor: '#CCC',
            borderWidth: 1,
            align: 'center',
            verticalAlign: 'top',
            enabled:true,
            y: 50,
            shadow: true
        },
        tooltip: {  
                //當鼠標懸置數據點時的格式化提示  
                formatter: function() {
                return '實際在線人數:' + Highcharts.numberFormat(this.y, 1) +'人' +'<br/>當前時間點：'+
                Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x,2) +'<br/>';
                }
        },  
        credits: {
            enabled: false
        }, 
        title: { text: '用戶在線人數' }, //圖表主標題  
        subtitle: {text: '（2014年9月13日）' }, //圖表副標題  
                series : [ {
                        name : '盛迅達',
                        data :  numJson        
                }]
    });
});