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.效果图（附件）