【SSH網上商城項目實戰29】使用JsChart技術在後臺顯示商品銷售報表

原創 liuyang_deve 2018-09-02 02:38

   這個項目終於接近尾聲了，註冊功能我就不做了，關於註冊功能我的另一篇博客詳細的介紹了一下註冊的表單驗證，可以直接把功能加到本項目中，修改一下相關的跳轉即可，就不再做了。另外，目前這個項目只有action層和service層，dao層我還沒抽取，做完這個報表，我把dao層抽取一下，再對整個項目做個總結，差不多就可以上傳源碼了，到時候歡迎大家下載~ 

　　這一節主要做一下最後一個功能：使用JsChart這個工具來顯示商品的銷售報表，JsChart是很好用的一款製作報表的工具，之所以好用，是因爲它的官方實例做的非常好，可以直接在圖形化界面操作後生成相應的代碼，我們修改一下，然後放到我們自己項目的邏輯裏面即可。

1. JsChart工具的介紹
　
　　JsChart是一款優秀的製作報表的工具，生成的代碼是js，所以是前端jsp頁面很好的使用工具，可以看一下JsChart的 官網，打開後點擊Online Edit，然後隨便選擇一個報表點擊進入，可以在線編輯我們想要的圖表類型和格式，如下：
　　
jsChart
　　再往下翻，可以設置我們想要的類型：
jsChart
　　都設置好了後，就可以點擊上面那個生成js代碼的button了，然後把對應的代碼複製到我們的jsp中。如下是我生成的js代碼（截取有用部分即可）： 

<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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
　　這樣我們就有了生成圖表的js代碼了，下面我們來分析一下整個流程：首先前臺jsp頁面發送一個Ajax請求，然後後臺從數據庫中取出相應的數據，這裏的數據我們只需要取出賣了哪些商品以及相應的賣出數量即可，也就是說我們得從訂單項的表中取，另外，前臺還得傳過去一個參數，告訴後臺取多少條數據。後臺取好了後將數據以json的格式發送到前臺，前臺再運行上面的js代碼（當然要做相應的修改）將數據顯示成報表的形式。好了，根據這個流程，先把後臺做好。

2. 完成後臺查詢的邏輯
　　　首先在service層完成查詢功能，這個查詢時查詢兩項的：商品和商品銷售數量。看一下代碼：
//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();
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
然後我們來完成action的部分：
@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";
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

　　BaseAction中有個List<T>對象，但是我們不能使用這個對象，因爲這裏jsonList是個List<Object>對象，不是BaseAction中的List<T>對象，所以我們要在這個Action中定義一個List<Object>對象並實現get方法，然後在struts.xml文件中配置一下root即可，不過這有點麻煩。
　　這裏介紹個更加簡便的方法，struts2在轉json如果找不到配置的root，就會從值棧的棧頂拿出來數據來轉json，所以我們只要將現在拿到的jsonList扔到值棧的棧頂，然後在配置文件中寫好result就可以了。

struts.xml

3. 完成前端的jsp頁面

　　後臺的邏輯寫完了，現在我們要完成前臺的跳轉邏輯以及接收後臺傳過來的json數據後的邏輯了。sale.jsp頁面如下：

<%@ 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>
  • 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
  • 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

　　主要是幾個選擇框，可以根據用戶選擇做出相應的顯示，$.post();中有四個參數，第一個是指定接收的action，我寫在選擇標籤中了，直接通過定位dom元素來獲取的，第二個參數是要傳送的參數，這裏是要顯示的數目，第三個參數是接收後臺json數據後要執行的函數，第四個參數是指定接收數據類型，這裏是json類型。
　　下面看一下接收後臺數據後執行的函數，這個主要是之前自動生成的js代碼，主要是要生成報表，但是做了一點修改，比如圖標的類型改成了用戶選擇的類型，顯示的數量也改掉了，不過這都是一些小改，問題不大。下面看一下不同類型的圖標的顯示效果吧：
柱狀圖
折線圖
餅圖
　　效果還是挺不錯的，所以如果有需要製作報表的朋友，推薦使用這個JsChart工具，很好用~整個項目基本就寫這麼多了吧~後面再做個總結，再上傳一下源碼，就差不多結束了~

　　整個項目的源碼下載地址：http://blog.csdn.net/eson_15/article/details/51479994


發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

【SSH網上商城項目實戰06】基於DataGrid的數據顯示

轉自：http://blog.csdn.net/eson_15/article/details/51322262  EasyUI中DataGrid以表格形式展示數據，並提供了豐富的選擇、排序、分組和編輯數據的功能支持。DataGrid

liuyang_deve 2020-06-13 02:36:28

【SSH網上商城項目實戰07】Struts2和Json的整合

轉自：http://blog.csdn.net/eson_15/article/details/51332758        上一節我們完成了DataGrid顯示jason數據，但是沒有和後臺聯繫在一起，只是單純地顯示了我們自己弄的

liuyang_deve 2020-06-13 02:36:18

【SSH網上商城項目實戰03】使用EasyUI搭建後臺頁面框架

轉自： http://blog.csdn.net/eson_15/article/details/51312490 前面兩節，我們整合了SSH並且抽取了service和action部分的接口，可以說基本開發環境已經搭建好了，這一節我們

liuyang_deve 2020-06-13 02:36:18

【SSH網上商城項目實戰10】商品類基本模塊的搭建

liuyang_deve 2020-02-24 12:38:30

【SSH網上商城項目實戰05】完成數據庫的級聯查詢和分頁

liuyang_deve 2020-02-24 12:38:30

【SSH網上商城項目實戰09】添加和更新商品類別功能的實現

liuyang_deve 2020-02-24 12:38:30

【SSH網上商城項目實戰02】基本增刪查改、Service和Action的抽取以及使用註解替換xml

liuyang_deve 2020-02-24 12:38:30

【SSH網上商城項目實戰11】查詢和刪除商品功能的實現

liuyang_deve 2020-02-24 12:38:30

【SSH網上商城項目實戰08】查詢和刪除商品類別功能的實現

liuyang_deve 2020-02-24 12:38:19

【SSH】HTTP Status 500 - attempt to create saveOrUpdate event with null entity

卢彦聪 2018-09-13 03:08:17

【SSH】訂單編號類型引發的小問題

卢彦聪 2018-09-07 22:47:02

【SSH】nested exception is org.hibernate.exception.DataException:coud not insert :

卢彦聪 2018-09-06 10:16:32

【SSH】隨機生成字母加數字的混合字符串

卢彦聪 2018-09-06 10:16:32

SSH登錄一條線理解前因後果

王雪芬-Judy领袖 2018-09-03 09:06:43

【SSH網上商城項目實戰21】從Demo中看易寶支付的流程

liuyang_deve 2018-09-02 02:38:55