//后台控制器中（SpringMVC）@RequestMapping(value="/getAll",method=RequestMethod.POST) @ResponseBody public ListgetAll(HttpServletRequest request,HttpServletResponse response ) throws Exception{ UserOnlineNum onlineNum = new UserOnlineNum(); List 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) +'人' +' 当前时间点：'+ Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x,2) +' '; } }, credits: { enabled: false }, title: { text: '用户在线人数' }, //图表主标题 subtitle: {text: '（2014年9月13日）' }, //图表副标题 series : [ { name : '盛迅达', data : numJson }] });});