Highcharts图表使用

特别声明：Highcharts 是一个用纯 JavaScript编写的一个图表库，仅免费提供给个人学习、个人网站，如果在商业项目中使用，请去Highcharts官网网站购买商业授权。或者您也可以选择其他免费的第三方图表插件，例如百度echarts。H-ui.admin不承担任何版权问题。

关于Highcharts中的时间轴折线图的简单使用：

效果图：

所引用的js：

<script type="text/javascript" src="${ctx}/Content/static/Highcharts/5.0.6/js/highcharts.js"></script>
<script type="text/javascript" src="${ctx}/Content/static/Highcharts/5.0.6/js/modules/exporting.js"></script>

HTML：

<div id="container" style="min-width:700px;height:400px"></div>

javascript：

var newDate = new Date();
var Y = 1999, M = 0, D = 1;
$(function () {
	$.post("${ctx}/LoginServer/timeNumbers.do", function (datas) {
		if (datas.sevenTimes != "") {
			var date = new Date(datas.sevenTimes);
			Y = date.getFullYear();//2019
			M = date.getMonth();//0
			D = date.getDate();//9
			
			$('#container').highcharts({
				chart: {
					zoomType: 'x',
					spacingRight: 20
				},
				title: {
					text: '当前账户近两周的登陆次数'
				},
				xAxis: {
					type: 'datetime',
					maxZoom: 14 * 24 * 3600000, //横轴
					title: {
						text: null
					}
				},
				yAxis: {
					title: {
						text: '天数'
					}
				},
				tooltip: {
					shared: true
				},
				legend: {
					enabled: false
				},
				plotOptions: {
					area: {
						fillColor: {
							linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
							stops: [
								[0, Highcharts.getOptions().colors[0]],
								[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
							]
						},
						lineWidth: 1,
						marker: {
							enabled: false
						},
						shadow: false,
						states: {
							hover: {
								lineWidth: 1
							}
						},
						threshold: null
					}
				},
		
				series: [{
					type: 'area',
					name: '次数',
					pointInterval: 24 * 3600 * 1000,
					pointStart: Date.UTC(Y, M, D),//最初时间
					data: datas.list,
				}]
			});
		}
	});
});

java：

/**
 * 获取当前账户近14天的登陆次数
 * @param request 获取session
 * @return {sevenTimes:14天前的时间戳,list:两周的登录次数表}
 */
@SuppressWarnings({ "unused", "unchecked" })
@ResponseBody
@RequestMapping(value="/timeNumbers", produces="application/json")
private Map<String, Object> timeNumber(HttpServletRequest request) {
	Map<String, Object> map = new HashedMap();
	HttpSession session = request.getSession();
	LogVo info = new LogVo();
	long times = 0;
	List<Integer> list = null;
	if (session.getAttribute("userId") != null) {
		Date dt = new Date();
		SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");//设置日期格式
		String newDate = df.format(dt);//获取当天时间
		
		long Index = 13;
		long time = dt.getTime();
		long sevenTime = Index * 24 * 60 * 60 * 1000;
		times = time - sevenTime;
		GregorianCalendar gc = new GregorianCalendar();
		gc.setTime(new Date(times));
		df = new SimpleDateFormat("yyyy-MM-dd");
		String sevenDate = df.format(gc.getTime());//获取14天前的时间
		
		info = new LogVo();
		info.setUserId(Integer.valueOf(session.getAttribute("userId").toString()));
		info.setTracktime(Timestamp.valueOf(sevenDate + " 00:00:00"));
		info.setEndtime(Timestamp.valueOf(newDate));
		List<LogVo> logVo = iLogService.selectTimeNumber(info);
		
		list = new ArrayList<Integer>();
		for (int i = 0; i < 14; i++) {
			gc = new GregorianCalendar();
			gc.setTime(new Date(time - Index * 24 * 60 * 60 * 1000));
			sevenDate = df.format(gc.getTime());

			int num = 0;
			for (LogVo log : logVo) {
				if (log.getTracktime().toString().indexOf(sevenDate) != -1) {
					num++;
				}
			}
			list.add(num);
			Index--;
		}
	}
	map.clear();
	map.put("sevenTimes", times);
	map.put("list", list);
	return map;
}