highcharts动态获得后台数据数据

来源：互联网发布：linux vps python 编辑：程序博客网时间：2024/05/02 05:05

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 0