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        
                }]
    });
});

 

转载于:https://www.cnblogs.com/onetwo/p/5620802.html