1、highcharts的基本属性
var chartTitle = '用户注册曲线图'; var lineChartData_hg = { chart: { //图表总体的设置 type: 'line', renderTo:domId, zoomType:'x' //控制图表是否可以拉伸 }, title: { //图表标题 text: chartTitle //标题名称 }, xAxis:{ type:'datetime', //tickInterval:timeFlag, dateTimeLabelFormats:{ second:'%H:%M', minute:'%H:%M', hour:'%H:%M', day:'%m/%d', week:'%m/%d', month:'%Y-%m', year:'%Y' }, minRange:function () { return '1000 * 60 * 10 * 10'; } }, yAxis: { //Y轴 min:0, title: { text: '个数(个)' //y轴标题 } }, tooltip:{ shared:true, crosshairs:true, formatter:function () { var info ; if('DAY'==viewType){ info = "<b>" + Highcharts.dateFormat("时间:%Y年%m月%e日 ", this.x) + "</b>"; }else if('WEEK'==viewType){ var year = new Date(this.x).getFullYear(); var d = new Date(this.x); var week = userRegist_hg.getYearWeek(d); info = "<b>" +year+'年'+ week+'周' + "</b>"; }else if('MONTH'==viewType){ info = "<b>" + Highcharts.dateFormat("时间:%Y年%m月 ", this.x) + "</b>"; }else if('SEASON'==viewType){ var year = new Date(this.x).getFullYear(); var month = new Date(this.x).getMonth()+1; var m = 0; if(month==1||month==2||month==3){ m = 1; }else if(month==4||month==5||month==6){ m=2; }else if(month==7||month==8||month==9){ m=3; }else if(month==10||month==11||month==12){ m = 4 ; } info = "<b>" + year+'年' +m+'季'+ "</b>"; }else if('YEAR'==viewType){ info = "<b>" + Highcharts.dateFormat("时间:%Y年 ", this.x) + "</b>"; } $.each(this.points, function (i, point) { info += "<br/>" + point.series.name + ":" + point.y+"(个)"; }); return info; } }, legend:{ }, plotOptions: { //图表标示的各种选项 spline: { //这里由于是折线图,那么就是折线图的选项 dataLabels: { //数据标签 enabled: true //允许显示数据,默认为false,不显示具体数据 }, enableMouseTracking: false //这个让鼠标放到数据点的时候,不动态显示一个小圆圈,默认为true }, line: { //这里由于是折线图,那么就是折线图的选项 dataLabels: { //数据标签 enabled: true //允许显示数据,默认为false,不显示具体数据 }, enableMouseTracking: false //这个让鼠标放到数据点的时候,不动态显示一个小圆圈,默认为true } }, series: [] } lineChartData_hg.series = data.list; userRegistLines_hg = new Highcharts.Chart(lineChartData_hg);
2、后台数据封装:
相对于idea的rails语言来说,eclipse采用java的语言来封装想对要麻烦一些,但是只要知道返回的json的数组是什么样的,就可以封装成类似的json过来 @RequestMapping(value = "/userLoginLineChart", method = RequestMethod.POST) @ResponseBody public Object userLoginLineChart(String viewType,HttpServletRequest request, HttpSession httpSession, Model model) throws Exception { String errorInfo = "ok"; Map<String,Object> jsonMap = new HashMap<String,Object>(); List<Object> list = new ArrayList<Object>(); // 传递过来的list直接赋给series,series是一个数组 Map<String ,Object> line = new HashMap<String, Object>();//line指代第一条线 List<Object> data = new ArrayList<Object>();//data用来存数据点 line.put("name", "登录"); line.put("color", "#4572A7"); line.put("yAxis", 0); line.put("visible", true); Map<String, Object> marker = new HashMap<String, Object>(); marker.put("enabled", false); line.put("marker", marker); ResultDto resultDto = userMonitorService.drawUserLoginLineChart(viewType,httpSession); //errorInfo 用来处理错误信息,如果是error,直接提示错误,如果是logout,重新进入登录界面 errorInfo = ResultUtil.VerifyResultEntity4Json(httpSession, resultDto); if(!"ok".equals(errorInfo)){ jsonMap.put("errorInfo", errorInfo); return jsonMap; } if (resultDto.getEntity() != null) { UserRegistLineList lineList = (UserRegistLineList) resultDto.getEntity(); if(null!=lineList&&0<lineList.getList().size()){ for(int i=0;i<lineList.getList().size();i++){ Object[] d = new Object[2]; UserRegistLine l = lineList.getList().get(i); d[0] = l.getMincreateTime(); d[1]=l.getCount(); data.add(d); } } } jsonMap.put("errorInfo", errorInfo); line.put("data", data); list.add(line); jsonMap.put("list",list); return jsonMap; }
3、页面jsp处理片段:
<div id="drawUserRegistLineData" > loading... </div> <script type="text/javascript"> $(function(){ // 初始化div的宽度,不然第一次进入页面的时候,宽度和后面加载的宽度不一致 $('#drawUserRegistLineData').css('width', (window.screen.availWidth - 175)*0.9); // 进入页面的时候,调用方法 userRegist_hg.drawUserRegistLine($("#drawLineChart4Time").val(),'drawUserRegistLineData'); }); </script>
4、ajax调用后台的数据,并对数据解析成线性图(错误处理)
userRegist_hg.drawUserRegistLine = function(viewType,domId){ $.ajax({ url: serverContext + "/userMonitor/userRegistLineChart", async : true, type:'post', data: {"viewType":viewType}, dataType:'json', success:function(data){ var err = data.errorInfo; // 错误处理 if (err && err != "ok") { if (err == "logout") { handleSessionTimeOut(); return; } else { jAlert(err); } } else { //画图 var chartTitle = '用户注册曲线图'; lineChartData_hg = { chart: { //图表总体的设置 type: 'line', renderTo:domId, zoomType:'x' }, title: { //图表标题 text: chartTitle //标题名称 }, xAxis:{ type:'datetime', //tickInterval:timeFlag, dateTimeLabelFormats:{ second:'%H:%M', minute:'%H:%M', hour:'%H:%M', day:'%m/%d', week:'%m/%d', month:'%Y-%m', year:'%Y' }, minRange:function () { return '1000 * 60 * 10 * 10'; } }, yAxis: { //Y轴 min:0, title: { text: '个数(个)' //y轴标题 } }, tooltip:{ shared:true, crosshairs:true, formatter:function () { var info ; if('DAY'==viewType){ info = "<b>" + Highcharts.dateFormat("时间:%Y年%m月%e日 ", this.x) + "</b>"; }else if('WEEK'==viewType){ var year = new Date(this.x).getFullYear(); var d = new Date(this.x); var week = userRegist_hg.getYearWeek(d); info = "<b>" +year+'年'+ week+'周' + "</b>"; }else if('MONTH'==viewType){ info = "<b>" + Highcharts.dateFormat("时间:%Y年%m月 ", this.x) + "</b>"; }else if('SEASON'==viewType){ var year = new Date(this.x).getFullYear(); var month = new Date(this.x).getMonth()+1; var m = 0; if(month==1||month==2||month==3){ m = 1; }else if(month==4||month==5||month==6){ m=2; }else if(month==7||month==8||month==9){ m=3; }else if(month==10||month==11||month==12){ m = 4 ; } info = "<b>" + year+'年' +m+'季'+ "</b>"; }else if('YEAR'==viewType){ info = "<b>" + Highcharts.dateFormat("时间:%Y年 ", this.x) + "</b>"; } $.each(this.points, function (i, point) { info += "<br/>" + point.series.name + ":" + point.y+"(个)"; }); return info; } }, legend:{ }, plotOptions: { //图表标示的各种选项 spline: { dataLabels: { //数据标签 enabled: true }, enableMouseTracking: false }, line: { dataLabels: { //数据标签 enabled: true }, enableMouseTracking: false } }, series: [] } lineChartData_hg.series = data.list; userRegistLines_hg = new Highcharts.Chart(lineChartData_hg); } }, error:function(xhr,textStatus,errorThrown){ jAlert("服务器异常,请稍后重试.."); } });
5、后台返回的json
{"errorInfo":"ok","list":[{"yAxis":0,"visible":true,"marker":{"enabled":false},"color":"#4572A7","name":"登录","data":[[1369852043000,1],[1405502337000,1],[1408180758000,3],[1408324354000,6],[1408430898000,6],[1408501492000,10],[1408586348000,6],[1408677130000,1],[1409205479000,2],[1409897710000,1],[1410773341000,1],[1410832946000,1],[1412839081000,1],[1413009726000,3]]}]}
5.效果图(附件)