SSM框架下柱狀圖的實現
阿新 • • 發佈:2018-11-14
和前面的餅圖不一樣,我的柱狀圖實現在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>
最後,放張效果圖: