快捷導(dǎo)航

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

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

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

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

1. JsChart工具的介紹

　　　JsChart是一款優(yōu)秀的制作報(bào)表的工具，生成的代碼是js，所以是前端jsp頁(yè)面很好的使用工具，可以看一下JsChart的官網(wǎng)，打開后點(diǎn)擊Online Edit，然后隨便選擇一個(gè)報(bào)表點(diǎn)擊進(jìn)入，可以在線編輯我們想要的圖表類型和格式，如下： ![jsChart](http://img.blog.csdn.net/20160526130623846) 　　再往下翻，可以設(shè)置我們想要的類型： ![jsChart](http://img.blog.csdn.net/20160526130958645) 　　都設(shè)置好了后，就可以點(diǎn)擊上面那個(gè)生成js代碼的button了，然后把對(duì)應(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('商城銷售報(bào)表');
 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代碼了，下面我們來(lái)分析一下整個(gè)流程：首先前臺(tái)jsp頁(yè)面發(fā)送一個(gè)Ajax請(qǐng)求，然后后臺(tái)從數(shù)據(jù)庫(kù)中取出相應(yīng)的數(shù)據(jù)，這里的數(shù)據(jù)我們只需要取出賣了哪些商品以及相應(yīng)的賣出數(shù)量即可，也就是說(shuō)我們得從訂單項(xiàng)的表中取，另外，前臺(tái)還得傳過(guò)去一個(gè)參數(shù)，告訴后臺(tái)取多少條數(shù)據(jù)。后臺(tái)取好了后將數(shù)據(jù)以json的格式發(fā)送到前臺(tái)，前臺(tái)再運(yùn)行上面的js代碼（當(dāng)然要做相應(yīng)的修改）將數(shù)據(jù)顯示成報(bào)表的形式。好了，根據(jù)這個(gè)流程，先把后臺(tái)做好。

2. 完成后臺(tái)查詢的邏輯

　首先在service層完成查詢功能，這個(gè)查詢時(shí)查詢兩項(xiàng)的：商品和商品銷售數(shù)量?？匆幌麓a：

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

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

 //省去不相關(guān)的代碼……
 @Override
 public List<Object> querySale(int number) {
  //不用fecth查出來(lái)的就是兩項(xiàng)
  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();
 }
}

然后我們來(lái)完成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());
  //將查詢出來(lái)的list放到值棧的頂端，為什么這樣做呢？看下面的解釋
  ActionContext.getContext().getValueStack().push(jsonList);
  return "jsonList";
 }
}

　　BaseAction中有個(gè)`List`對(duì)象，但是我們不能使用這個(gè)對(duì)象，因?yàn)檫@里jsonList是個(gè)`List`對(duì)象，不是BaseAction中的`List`對(duì)象，所以我們要在這個(gè)Action中定義一個(gè)`List`對(duì)象并實(shí)現(xiàn)get方法，然后在struts.xml文件中配置一下root即可，不過(guò)這有點(diǎn)麻煩。　　這里介紹個(gè)更加簡(jiǎn)便的方法，struts2在轉(zhuǎn)json如果找不到配置的root，就會(huì)從值棧的棧頂拿出來(lái)數(shù)據(jù)來(lái)轉(zhuǎn)json，所以我們只要將現(xiàn)在拿到的jsonList扔到值棧的棧頂，然后在配置文件中寫好result就可以了。所以struts.xml中如下： ![struts.xml](http://img.blog.csdn.net/20160526133359517)

3. 完成前端的jsp頁(yè)面

　　后臺(tái)的邏輯寫完了，現(xiàn)在我們要完成前臺(tái)的跳轉(zhuǎn)邏輯以及接收后臺(tái)傳過(guò)來(lái)的json數(shù)據(jù)后的邏輯了。sale.jsp頁(yè)面如下：

 <%@ 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請(qǐng)求
    $.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));//選擇幾個(gè)就顯示幾個(gè)
     myChart.setSize(100*$("#number").val(), 400);
     myChart.setBarValues(false);
     myChart.setBarSpacingRatio(45);
     myChart.setBarOpacity(1);
     myChart.setBarBorderWidth(1);
     myChart.setTitle('商城銷售報(bào)表');
     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;">

 請(qǐng)選擇報(bào)表類型：
 <select id="sale">
  <option value="sorder_querySale.action">年度銷售報(bào)表</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>

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

柱狀圖