highcharts画线性图示例

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 = "" + Highcharts.dateFormat("时间:%Y年%m月%e日 ", this.x) + "";
		}else if('WEEK'==viewType){
		    var year = new Date(this.x).getFullYear();
		    var d = new Date(this.x);
		    var week = userRegist_hg.getYearWeek(d);
		    info = "" +year+'年'+ week+'周' + "";
		}else if('MONTH'==viewType){
		   info = "" + Highcharts.dateFormat("时间:%Y年%m月 ", this.x) + "";
		}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 = "" + year+'年' +m+'季'+ "";
		}else if('YEAR'==viewType){
		    info = "" + Highcharts.dateFormat("时间:%Y年 ", this.x) + "";
		}
		$.each(this.points, function (i, point) {
		    info += "
" + 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 jsonMap = new HashMap();
	List