特别声明: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: '天数'//设置y轴显示的内容
}
},
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);//返回第14天前的时间戳
map.put("list", list);//返回的数据
return map;
}