SSM框架下柱状图的实现

和前面的饼图不一样，我的柱状图实现在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>

　　最后，放张效果图：