highcharts动态获得后台数据数据highcharts动态获得后台数据数据

68 阅读 0 评论 45 点赞

我是靠谱客的博主内向草莓，最近开发中收集的这篇文章主要介绍highcharts动态获得后台数据数据highcharts动态获得后台数据数据，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

highcharts动态获得后台数据数据

highcharts是功能强大、开源、美观、图表丰富、兼容绝大多数浏览器的纯js图表库

中文学习网址:http://www.hcharts.cn/

一、下载最新版的highcharts

二、在项目中引入js

三、jsp 源码

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/include/taglib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>进销存管理系统</title>
<script type="text/javascript" src="${ctx}/static/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="${ctx}/static/js/highcharts.js"></script>
<script type="text/javascript" src="${ctx}/static/js/exporting.js"></script>
<style type="text/css">
${demo.css}
</style>
<script type="text/javascript">
Date.prototype.format = function(format){
var o = {
"M+" : this.getMonth()+1, //month
"d+" : this.getDate(), //day
"h+" : this.getHours(), //hour
"m+" : this.getMinutes(), //minute
"s+" : this.getSeconds(), //second
"q+" : Math.floor((this.getMonth()+3)/3), //quarter
"S" : this.getMilliseconds() //millisecond
}
if(/(y+)/.test(format)) {
format = format.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
}
for(var k in o) {
if(new RegExp("("+ k +")").test(format)) {
format = format.replace(RegExp.$1, RegExp.$1.length==1 ? o[k] : ("00"+ o[k]).substr((""+ o[k]).length));
}
}
return format;
}
$(function () {
GetseriesValue();
//获取数据源信息
});
//获取数据源信息
//
function GetseriesValue() {
$.ajax({
type: "post",
url: "${ctx}/log/loginData.action",
cache: false,
success: function (data) {
var dataTmp = data;
GetData(dataTmp);
},
error: function () {
alert("请求超时，请重试！");
}
});
};
//绑定获取数据信息操作
//
function GetData(dataTmp) {
$('#container').highcharts({
title: {
text: '用户登录时间段统计图表',
x: -20 //center
},
lang: {
printChart: '打印图表',
downloadPNG: '下载JPEG 图片',
downloadJPEG: '下载JPEG文档',
downloadPDF: '下载PDF 文件',
downloadSVG: '下载SVG 矢量图'
},
subtitle: {
text: '统计时间：'+new Date().format("yyyy-MM-dd hh:mm:ss"),
x: -20
},
xAxis: {
categories: ['0点', '1点', '2点', '3点', '4点', '5点','6点', '7点', '8点', '9点', '10点',
'11点', '12点', '13点', '14点', '15点', '16点', '17点', '18点', '19点', '20点', '21点', '22点', '23点']
},
yAxis: {
title: {
text: '数量(次)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '次'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: eval("[" + dataTmp + "]")
//获取数据源操作信息
});
}
</script>
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>

四、后台源码

注意：后台主要是封装highcharts所需要的数据格式，返回到前台

<span style="font-size:14px;">@RequestMapping("loginData")
public void loginData(HttpServletRequest request, HttpServletResponse response) {
// String reg2 = "{name: 'Tokyo',data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]}";
// {
// name: 'Tokyo',
// data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
// }
List<Object[]> lists = logService.findReportByLoginCount();
List<String> reList = getReg24List(lists);
String reg = "{name: '登录',data: [";
for (String s : reList) {
reg += s + ",";
}
reg = reg.substring(0, reg.length() - 1);
reg += "]}";
ResultUtil.sendString(response, reg);
}</span>