和前面的饼图不一样，我的柱状图实现在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>
最后，放张效果图：
原文：https://www.cnblogs.com/clack/p/9959921.html