SSH 電商專案實戰（二十九）：整合 JsChart 繪製銷售報表圖表

專案尾聲新增銷售報表功能，選用 JsChart（JavaScript 圖表庫），優點：官方提供線上編輯器，可視化配置後直接生成 JS 代碼，極大降低前端圖表開發門檻。

1. 後端：Service 層查詢熱銷商品

public interface SorderService extends BaseService<Sorder> {
    List<Object> querySale(int number); // 回傳 [商品名, 銷量] 陣列列表
}

@Service("sorderService")
public class SorderServiceImpl extends BaseServiceImpl<Sorder> implements SorderService {
    @Override
    public List<Object> querySale(int number) {
        String hql = "select s.name, sum(s.number) from Sorder s join s.product group by s.product.id";
        return getSession().createQuery(hql)
                .setMaxResults(number)
                .list(); // 回傳 List，每個 Object[] 含 name、sum
    }
}

2. Action 層：將結果推入 ValueStack 頂端供 JSON 插件序列化

@Controller
@Scope("prototype")
public class SorderAction extends BaseAction<Sorder> {
    private int number; // 前端傳入：顯示筆數

    public String querySale() {
        List<Object> data = sorderService.querySale(number);
        // 關鍵技巧：手動推入 ValueStack 棧頂，struts2-json-plugin 會自動序列化棧頂物件
        ActionContext.getContext().getValueStack().push(data);
        return "jsonList";
    }
    // getter/setter for number
}

3. struts.xml 配置 JSON 結果

<action name="sorder_*" class="sorderAction" method="{1}">
    <result name="jsonList" type="json">
        <!-- 無需指定 root，預設取 ValueStack 頂端 -->
    </result>
</action>

4. 前端 sale.jsp：參數化圖表配置

<%@ page pageEncoding="UTF-8"%>
<html>
<head>
    <script src="${shop}/js/jquery-1.11.1.js"></script>
    <script src="${shop}/js/jscharts.js"></script>
    <script>
    $(function(){
        $("#submit").click(function(){
            var colorArr = ['#44A622','#A7B629','#CAD857','#E4DB7B','#ECDE49','#ECC049','#EC9649','#D97431','#D95531'];

            $.post($("#sale").val(), {number: $("#number").val()}, function(data){
                // data 格式：[["商品A", 100], ["商品B", 80], ...]
                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>
    報表類型：
    <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>

5. 效果展示

用戶選擇筆數與圖表類型，點擊查詢 → AJAX 獲取 JSON → JsChart 即時渲染長條圖/折線圖/圓餅圖，視覺效果優良，互動流暢。

關鍵技巧總結

• ValueStack 棧頂技巧： 避免在 Action 額外定義 List 屬性與 getter，直接 push(data) 讓 JSON 插件自動序列化。
• JsChart 線上編輯器： 官網 Online Edit 可視化調整顏色、尺寸、標題、軸標籤、3D 效果等，生成代碼複製微調即用。
• 前端參數化： 圖表類型、筆數、顏色均由下拉框控制，單頁支援多種報表視圖。

若專案需更豐富的圖表（如 ECharts、HighCharts），同樣可採用「後端提供 JSON、前端渲染」架構平滑遷移。