和前面的饼图不一样,我的柱状图实现在ajax中使用了数组,只需要将对应的值取出来(而不需要关心其他的值是否为空)。就要简单一点,使用普通的Mapper.xml就可以应付。话不多说,上码:
1. Mapper.xml和Mapper.java:
xml:
<!-- 统计男女人数 -->
<select id="groupBySex" resultMap="BaseResultMap">
SELECT asex,COUNT(asex) AS aid FROM adminuser GROUP BY asex
</select>
java:
List<Adminuser> groupBySex();
2. 其他的dao层,service层就不贴了,这只是一个简单的传递。。。
3. Controller层:
//统计男女人数 柱状图
@RequestMapping(value="/groupBySex")
@ResponseBody
public List<Adminuser> groupBySex(){
List<Adminuser> adminusers = adminuserService.groupBySex();
return adminusers;
}
4. 最后jsp页面用ajax取值并创建图表:
<section class="content">
<div class="row">
<div class="col-md-6">
<!-- BAR CHART -->
<div class="box box-success">
<div class="box-header">
<h3 class="box-title">管理员男女比例柱图</h3>
</div>
<div class="box-body chart-responsive">
<div class="chart" id="bar-chart" style="height: 300px;"></div>
</div>
</div>
</div>
</div>
</section>
<script type="text/javascript">
$(function(){
$.ajax({
url:"adminuser/groupBySex",
type:"post",
data:{},
dataType:"json",
success:function(adminusers){
var Arrs = new Array();
$(adminusers).each(function(i,adminuser){
var Arr = new Array();
Arr.push(adminuser.asex);
Arr.push(adminuser.aid);
Arrs.push(Arr);
});
var jsonarray = Array();
$(Arrs).each(function(i,arr){
var arr ={"x" : arr[0],"y" : arr[1]}
jsonarray.push(arr);
});
var bar = new Morris.Bar({
element: 'bar-chart',
resize: true,
data: jsonarray,//JSON数组类型数据
barColors: ['#00a65a'],
xkey: 'x',
ykeys: ['y'],
labels: ['人数'],
hideHover: 'auto'
});
}
});
});
</script>
5. 额,采用的js有点多,我也贴出来吧:
<script src="tools/assets/js/pages/charts-flot.js"></script>
<link href="tools/bar/morris.css" rel="stylesheet" type="text/css" />
<link href="tools/bar/AdminLTE.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="tools/bar/raphael-min.js"></script>
<script type="text/javascript" src="tools/bar/morris.min.js"></script>
最后,放张效果图: