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