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>

　　最后，放張效果圖：