快捷導(dǎo)航

SSH框架網(wǎng)上商城項目第29戰(zhàn)之使用JsChart技術(shù)顯示商品銷售報表

更新時間：2016年06月07日 14:16:40 投稿：lijiao

這篇文章主要為大家詳細(xì)介紹了SSH框架網(wǎng)上商城項目第29戰(zhàn)之使用JsChart技術(shù)顯示商品銷售報表，感興趣的小伙伴們可以參考一下

這個項目終于接近尾聲了，注冊功能我就不做了，關(guān)于注冊功能我的另一篇文章詳細(xì)的介紹了一下注冊的表單驗證，可以直接把功能加到本項目中，修改一下相關(guān)的跳轉(zhuǎn)即可，就不再做了。另外，目前這個項目只有action層和service層，dao層我還沒抽取，做完這個報表，我把dao層抽取一下，再對整個項目做個總結(jié)，差不多就可以上傳源碼了，到時候歡迎大家下載~
這一節(jié)主要做一下最后一個功能：使用JsChart這個工具來顯示商品的銷售報表，JsChart是很好用的一款制作報表的工具，之所以好用，是因為它的官方實例做的非常好，可以直接在圖形化界面操作后生成相應(yīng)的代碼，我們修改一下，然后放到我們自己項目的邏輯里面即可。

1. JsChart工具的介紹

　　　JsChart是一款優(yōu)秀的制作報表的工具，生成的代碼是js，所以是前端jsp頁面很好的使用工具，可以看一下JsChart的官網(wǎng)，打開后點擊Online Edit，然后隨便選擇一個報表點擊進(jìn)入，可以在線編輯我們想要的圖表類型和格式，如下： ![jsChart](http://img.blog.csdn.net/20160526130623846) 　　再往下翻，可以設(shè)置我們想要的類型： ![jsChart](http://img.blog.csdn.net/20160526130958645) 　　都設(shè)置好了后，就可以點擊上面那個生成js代碼的button了，然后把對應(yīng)的代碼復(fù)制到我們的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>

　　這樣我們就有了生成圖表的js代碼了，下面我們來分析一下整個流程：首先前臺jsp頁面發(fā)送一個Ajax請求，然后后臺從數(shù)據(jù)庫中取出相應(yīng)的數(shù)據(jù)，這里的數(shù)據(jù)我們只需要取出賣了哪些商品以及相應(yīng)的賣出數(shù)量即可，也就是說我們得從訂單項的表中取，另外，前臺還得傳過去一個參數(shù)，告訴后臺取多少條數(shù)據(jù)。后臺取好了后將數(shù)據(jù)以json的格式發(fā)送到前臺，前臺再運行上面的js代碼（當(dāng)然要做相應(yīng)的修改）將數(shù)據(jù)顯示成報表的形式。好了，根據(jù)這個流程，先把后臺做好。

2. 完成后臺查詢的邏輯

　首先在service層完成查詢功能，這個查詢時查詢兩項的：商品和商品銷售數(shù)量。看一下代碼：

//sorderService接口
public interface SorderService extends BaseService<Sorder> {
 //省去不相關(guān)的代碼……
 //查詢熱點商品的銷售量
 public List<Object> querySale(int number);
}

//sorderServiceImpl實現(xiàn)類
@Service("sorderService")
@SuppressWarnings("unchecked")
public class SorderServiceImpl extends BaseServiceImpl<Sorder> implements
  SorderService {

 //省去不相關(guān)的代碼……
 @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的部分：

@Controller
@Scope("prototype")
public class SorderAction extends BaseAction<Sorder> {
 public String addSorder() {

 //省去不相關(guān)代碼……

 //返回?zé)衢T商品及其銷售量
 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`對象并實現(xiàn)get方法，然后在struts.xml文件中配置一下root即可，不過這有點麻煩。　　這里介紹個更加簡便的方法，struts2在轉(zhuǎn)json如果找不到配置的root，就會從值棧的棧頂拿出來數(shù)據(jù)來轉(zhuǎn)json，所以我們只要將現(xiàn)在拿到的jsonList扔到值棧的棧頂，然后在配置文件中寫好result就可以了。所以struts.xml中如下： ![struts.xml](http://img.blog.csdn.net/20160526133359517)

3. 完成前端的jsp頁面

　　后臺的邏輯寫完了，現(xiàn)在我們要完成前臺的跳轉(zhuǎn)邏輯以及接收后臺傳過來的json數(shù)據(jù)后的邏輯了。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'];
    //發(fā)送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>
 查詢數(shù)量：
 <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>

　　主要是幾個選擇框，可以根據(jù)用戶選擇做出相應(yīng)的顯示，$.post();中有四個參數(shù)，第一個是指定接收的action，我寫在選擇標(biāo)簽中了，直接通過定位dom元素來獲取的，第二個參數(shù)是要傳送的參數(shù)，這里是要顯示的數(shù)目，第三個參數(shù)是接收后臺json數(shù)據(jù)后要執(zhí)行的函數(shù)，第四個參數(shù)是指定接收數(shù)據(jù)類型，這里是json類型。
　　下面看一下接收后臺數(shù)據(jù)后執(zhí)行的函數(shù)，這個主要是之前自動生成的js代碼，主要是要生成報表，但是做了一點修改，比如圖標(biāo)的類型改成了用戶選擇的類型，顯示的數(shù)量也改掉了，不過這都是一些小改，問題不大。下面看一下不同類型的圖標(biāo)的顯示效果吧：

柱狀圖