highcharts动态获得后台数据数据

最新推荐文章于 2021-11-06 23:28:53 发布

时间辜负了谁

最新推荐文章于 2021-11-06 23:28:53 发布

阅读量6.2k

点赞数

分类专栏： Highcharts

本文链接：https://blog.csdn.net/kpchen_0508/article/details/46227673

版权

Highcharts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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>

时间辜负了谁

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
2
评论
highcharts动态获得后台数据数据

highcharts动态获得后台数据数据highcharts是功能强大、开源、美观、图表丰富、兼容绝大多数浏览器的纯js图表库中文学习网址:http://www.hcharts.cn/一、下载最新版的highcharts二、在项目中引入js三、jsp 源码 <%@ page language="java" contentType="text/html; ch
复制链接

扫一扫