這個項目終于接近尾聲了，注冊功能我就不做了，關于注冊功能我的另一篇文章詳細的介紹了一下注冊的表單驗證，可以直接把功能加到本項目中，修改一下相關的跳轉即可，就不再做了。另外，目前這個項目只有action層和service層，dao層我還沒抽取，做完這個報表，我把dao層抽取一下，再對整個項目做個總結，差不多就可以上傳源碼了，到時候歡迎大家下載~
這一節主要做一下最后一個功能：使用JsChart這個工具來顯示商品的銷售報表，JsChart是很好用的一款制作報表的工具，之所以好用，是因為它的官方實例做的非常好，可以直接在圖形化界面操作后生成相應的代碼，我們修改一下，然后放到我們自己項目的邏輯里面即可。
1. JsChart工具的介紹
JsChart是一款優秀的制作報表的工具，生成的代碼是js，所以是前端jsp頁面很好的使用工具，可以看一下JsChart的 官網，打開后點擊Online Edit，然后隨便選擇一個報表點擊進入，可以在線編輯我們想要的圖表類型和格式，如下：  再往下翻，可以設置我們想要的類型：  都設置好了后，就可以點擊上面那個生成js代碼的button了，然后把對應的代碼復制到我們的jsp中。如下是我生成的js代碼（截取有用部分即可）：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<div id="chart_container">Loading chart...</div><script type="text/javascript"> var myChart = new JSChart('chart_container', bar'', ''); myChart.setDataArray(['#44A622','#A7B629','#CAD857','#E4DB7B','#ECDE49','#ECC049','#EC9649','#D97431','#D95531']); myChart.colorize(colorArr.slice(0,data.length)); myChart.setSize(100*$("#number").val(), 400); myChart.setBarValues(false); myChart.setBarSpacingRatio(45); myChart.setBarOpacity(1); myChart.setBarBorderWidth(1); myChart.setTitle('商城銷售報表'); myChart.setTitleFontSize(10); myChart.setTitleColor('#607985'); myChart.setAxisValuesColor('#607985'); myChart.setAxisNameX('商品名稱', false); myChart.setAxisNameY('銷量', true); myChart.setGridOpacity(0.8); myChart.setAxisPaddingLeft(50); myChart.setAxisPaddingBottom(40); myChart.set3D(true); myChart.draw();</script> |
這樣我們就有了生成圖表的js代碼了，下面我們來分析一下整個流程：首先前臺jsp頁面發送一個Ajax請求，然后后臺從數據庫中取出相應的數據，這里的數據我們只需要取出賣了哪些商品以及相應的賣出數量即可，也就是說我們得從訂單項的表中取，另外，前臺還得傳過去一個參數，告訴后臺取多少條數據。后臺取好了后將數據以json的格式發送到前臺，前臺再運行上面的js代碼（當然要做相應的修改）將數據顯示成報表的形式。好了，根據這個流程，先把后臺做好。
2. 完成后臺查詢的邏輯
首先在service層完成查詢功能，這個查詢時查詢兩項的：商品和商品銷售數量。看一下代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
//sorderService接口public interface SorderService extends BaseService<Sorder> { //省去不相關的代碼…… //查詢熱點商品的銷售量 public List<Object> querySale(int number);}//sorderServiceImpl實現類@Service("sorderService")@SuppressWarnings("unchecked")public class SorderServiceImpl extends BaseServiceImpl<Sorder> implements SorderService { //省去不相關的代碼…… @Override public List<Object> querySale(int number) { //不用fecth查出來的就是兩項 String hql = "select s.name, sum(s.number) from Sorder s join s.product group by s.product.id"; return getSession().createQuery(hql) // .setFirstResult(0) // .setMaxResults(number) // .list(); }} |
然后我們來完成action的部分：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
@Controller@Scope("prototype")public class SorderAction extends BaseAction<Sorder> { public String addSorder() { //省去不相關代碼…… //返回熱門商品及其銷售量 public String querySale() { List<Object> jsonList = sorderService.querySale(model.getNumber()); //將查詢出來的list放到值棧的頂端，為什么這樣做呢？看下面的解釋 ActionContext.getContext().getValueStack().push(jsonList); return "jsonList"; }} |
BaseAction中有個`List`對象，但是我們不能使用這個對象，因為這里jsonList是個`List`對象，不是BaseAction中的`List`對象，所以我們要在這個Action中定義一個`List`對象并實現get方法，然后在struts.xml文件中配置一下root即可，不過這有點麻煩。 這里介紹個更加簡便的方法，struts2在轉json如果找不到配置的root，就會從值棧的棧頂拿出來數據來轉json，所以我們只要將現在拿到的jsonList扔到值棧的棧頂，然后在配置文件中寫好result就可以了。 所以struts.xml中如下： 
3. 完成前端的jsp頁面
后臺的邏輯寫完了，現在我們要完成前臺的跳轉邏輯以及接收后臺傳過來的json數據后的邏輯了。sale.jsp頁面如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head> <%@ include file="/public/head.jspf" %> <script type="text/javascript" src="${shop }/js/jquery-1.11.1.js"></script> <script type="text/javascript" src="${shop }/js/jscharts.js"></script> <script type="text/javascript"> $(function(){ $("#submit").click(function(){ var colorArr = ['#44A622','#A7B629','#CAD857','#E4DB7B','#ECDE49','#ECC049','#EC9649','#D97431','#D95531','#E4DB7B']; //發送Ajax請求 $.post($("#sale").val(), {number:$("#number").val()}, function(data){ var myChart = new JSChart('chart_container', $("#type").val(), ''); myChart.setDataArray(data); myChart.colorize(colorArr.slice(0,data.length));//選擇幾個就顯示幾個 myChart.setSize(100*$("#number").val(), 400); myChart.setBarValues(false); myChart.setBarSpacingRatio(45); myChart.setBarOpacity(1); myChart.setBarBorderWidth(1); myChart.setTitle('商城銷售報表'); myChart.setTitleFontSize(10); myChart.setTitleColor('#607985'); myChart.setAxisValuesColor('#607985'); myChart.setAxisNameX('商品名稱', false); myChart.setAxisNameY('銷量', true); myChart.setGridOpacity(0.8); myChart.setAxisPaddingLeft(50); myChart.setAxisPaddingBottom(40); myChart.set3D(true); myChart.draw(); }, "json"); }); }); </script></head><body style="margin:10px;"> 請選擇報表類型： <select id="sale"> <option value="sorder_querySale.action">年度銷售報表</option> </select> 查詢數量： <select id="number"> <option value="5">5</option> <option value="7">7</option> <option value="10">10</option> </select> 類型： <select id="type"> <option value="bar">柱狀型</option> <option value="line">線型</option> <option value="pie">餅狀型</option> </select> <input type="button" id="submit" value="查詢"> <div id="chart_container">Loading Chart...</div></body></html> |
主要是幾個選擇框，可以根據用戶選擇做出相應的顯示，$.post();中有四個參數，第一個是指定接收的action，我寫在選擇標簽中了，直接通過定位dom元素來獲取的，第二個參數是要傳送的參數，這里是要顯示的數目，第三個參數是接收后臺json數據后要執行的函數，第四個參數是指定接收數據類型，這里是json類型。
下面看一下接收后臺數據后執行的函數，這個主要是之前自動生成的js代碼，主要是要生成報表，但是做了一點修改，比如圖標的類型改成了用戶選擇的類型，顯示的數量也改掉了，不過這都是一些小改，問題不大。下面看一下不同類型的圖標的顯示效果吧：
效果還是挺不錯的，所以如果有需要制作報表的朋友，推薦使用這個JsChart工具，很好用~整個項目基本就寫這么多了吧~后面再做個總結，再上傳一下源碼，就差不多結束了。
原文地址：http://blog.csdn.net/eson_15/article/details/51506334
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
