首先,介绍下gvChart:
gvChart是一个利用Google Chart Tools来创建交互式图表(Charts)的jQuery插件。可创建的图表类型有Area、Line、Bar、Column和Pie五种。它使用HTML Tables做数据源来创建图表。
准备工作:引入JS
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/jsapi.js"></script>
<script type="text/javascript" src="js/corechart.js"></script>
<script type="text/javascript" src="js/jquery.gvChart-1.0.1.min.js"></script>
对于js文件的引入这里也是需要注意的,要想实现图表的制作,这四个js文件缺一不可,且因为gvChart是基于jQuery的,所以在引入gvChart的js文件之前一定要先引入jQuery文件,若引入的先后顺序错了则制作后会无效果。
上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/jsapi.js"></script>
<script type="text/javascript" src="js/corechart.js"></script>
<script type="text/javascript" src="js/jquery.gvChart-1.0.1.min.js"></script>
<title>图形报表</title>
</head>
<body>
<table id='myTable'>
<caption>支出收入比例图</caption>
<thead>
<tr>
<th></th>
<th>一月</th>
<th>二月</th>
<th>三月</th>
<th>四月</th>
<th>五月</th>
<th>六月</th>
<th>七月</th>
<th>八月</th>
<th>九月</th>
<th>十月</th>
<th>十一月</th>
<th>十二月</th>
</tr>
</thead>
<tbody>
<tr>
<th>支出金额</th>
<td>900</td>
<td>600</td>
<td>327</td>
<td>359</td>
<td>376</td>
<td>398</td>
<td>60</td>
<td>50</td>
<td>404</td>
<td>700</td>
<td>200</td>
<td>500</td>
</tr>
<tr>
<th>收入金额</th>
<td>1167</td>
<td>1110</td>
<td>691</td>
<td>165</td>
<td>135</td>
<td>157</td>
<td>139</td>
<td>136</td>
<td>938</td>
<td>1120</td>
<td>55</td>
<td>55</td>
</tr>
</tbody>
</table>
</body>
<script>
gvChartInit();
$(document).ready(function() {
$('#myTable').gvChart({
chartType: 'ColumnChart', //AreaChart,LineChart,BarChart,ColumnChart,PieChart
gvSettings: {
vAxis: {
title: '支出/收入金额:元'
},
hAxis: {
title: '月份'
},
width: 900,
height: 500,
}
});
});
</script>
</html>
效果:
在讲述处理后台的数据实例之前先给大家讲下gvChart在静态HTML页面的实现。
gvChart它本就是一个jQuery插件,实质就是将一个静态表格美化成为一个优美的图表,所以只要页面中的表格有数据,再通过表格的id调用gvChart的方法,即 $(’#myTable’).gvChart({ }); 就可以将一个普通的表格变为一个优美的图表了。
需要注意的点:
- 在调用gvChart({})方法之前要先调用实现 gvChartInit()方法,否则将会不成功。
- 表格table中的caption、thead、tbody、th等标签一定要写,不可省略,且第一个tr中要在前面留一个空的th单元格(总之按照上面的格式来,别想着偷懒或改动标签(内容除外))
- 对于gvChart的chartType属性,它共有五个值:
- AreaChart //折线图(有面积)
- LineChart //折线图
- BarChart //横向柱状图
- ColumnChart //柱状图
- PieChart //饼状图
实例应用
实训期间,在做一个房屋出租管理系统时,有个功能需要给用户直观的显示支出金额的分析图。
前台jsp页面:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/layer/layer.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/base.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/zhichu/myzhichu.js"></script>
<!-- 比例图的js文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jsapi.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/corechart.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.gvChart-1.0.1.min.js"></script>
<SCRIPT type="text/javascript">
var $webName="${pageContext.request.contextPath}";
</SCRIPT>
</head>
<body>
<img alt="" src="" id="x" style="display: none;">
<!-- 位置信息 -->
<div class="place">
<span>位置:</span>
<ul class="placeul">
<li>首页</li>
<li>现金支出管理</li>
<li>现金支出内容</li>
</ul>
</div>
<!-- 内容表格信息 -->
<div class="rightinfo">
<div class="tools">
<ul class="toolbar">
<li class="addPart">
<span><img src="${pageContext.request.contextPath }/images/t01.png" /> </span>添加
</li>
</ul>
<ul class="toolbar">
<li class="seAll">
<span><img src="${pageContext.request.contextPath }/images/t01.png" /> </span>支出分析图
</li>
</ul>
</div>
<!-- 数据显示 -->
<table class="tablelist"></table>
<%-- 分页位置 --%>
<div class="pagin">
<div class="message"></div>
</div>
</div>
<!-- 支出分析图位置 -->
<table id='myTable5'></table>
</body>
</html>
js的处理:
function getSeAll() {
$(".seAll").click(function() {
$.ajax({ //ajax发送请求
url : $webName + '/zhichu/getBar3D.do',
dataType : 'json',
type : 'post',
data : '',
success : function(mydata) { //处理请求成功后执行的方法
//1、清除原有数据
$(".place").remove();
$(".rightinfo").empty();
//2、动态拼接表格数据
var caption = $("<caption>支出比例图</caption>");
var thead = $("<thead><tr><th></th><th>常用物件</th><th>房屋维修</th><th>退还房租或押金</th><th>其它</th></tr></thead>");
var tbody = $("<tbody><tr><th>支出金额</th><td>"+mydata.cywj+"</td><td>"+mydata.fwwx+"</td><td>"+mydata.thje+"</td><td>"+mydata.qt+"</td></tr></tbody>");
$("#myTable5").append(caption).append(thead).append(tbody); //将元素append加入到myTable5表格中
//3、给myTable5表格调用gvChart方法
gvChartInit();
$('#myTable5').gvChart({
chartType: 'ColumnChart', //柱状图
gvSettings: {
vAxis: {title: '支出金额/元'},
hAxis: {title: '支出条目'},
width: 900,
height: 500,
}
});
}
});
});
}
后台controller类的处理:
/**
* @return
* 支出比例图
*/
@RequestMapping("/zhichu/getBar3D.do")
@ResponseBody
public Map<String,Double> getBar3D() {
//查询全部支出信息
List<Myzhichu> list = myzhichuService.findAllzhichuZong();
//定义四个double类型的变量
double cywj = 0; //常用物件
double fwwx = 0; //房屋维修
double thje = 0; //退还房租或押金
double qt = 0; //其它
for (int i = 0; i < list.size(); i++) {
if (list.get(i).getZtm().equals("常用物件")) {
cywj += list.get(i).getZmoney();
}else if (list.get(i).getZtm().equals("房屋维修")) {
fwwx += list.get(i).getZmoney();
}else if (list.get(i).getZtm().equals("退还房租或押金")) {
thje += list.get(i).getZmoney();
}else {
qt += list.get(i).getZmoney();
}
}
Map<String,Double> map = new HashMap<String, Double>();
map.put("cywj", cywj);
map.put("fwwx", fwwx);
map.put("thje", thje);
map.put("qt", qt);
return map;
}
具体的应用代码中的注释已经写清楚的了,要想实现图表效果主要是对于数据的处理,拿到自己需要显示的数据并调用gvChart方法就能实现了。
附:数据库
实现效果: