程式師世界 >> 編程語言 >> JAVA編程 >> 關於JAVA >> SSH框架網上商城項目第29戰之應用JsChart技巧顯示商品發賣報表

SSH框架網上商城項目第29戰之應用JsChart技巧顯示商品發賣報表

編輯：關於JAVA

SSH框架網上商城項目第29戰之應用JsChart技巧顯示商品發賣報表。本站提示廣大學習愛好者：（SSH框架網上商城項目第29戰之應用JsChart技巧顯示商品發賣報表）文章只能為提供參考，不一定能成為您想要的結果。以下是SSH框架網上商城項目第29戰之應用JsChart技巧顯示商品發賣報表正文

這個項目終究接近序幕了，注冊功效我就不做了，關於注冊功效我的另外一篇文章具體的引見了一下注冊的表單驗證，可以直接把功效加到本項目中，修正一下相干的跳轉便可，就不再做了。別的，今朝這個項目只要action層和service層，dao層我還沒抽取，做完這個報表，我把dao層抽取一下，再對全部項目做個總結，差不多便可以上傳源碼了，到時刻迎接年夜家下載~
這一節重要做一下最初一個功效：應用JsChart這個對象來顯示商品的發賣報表，JsChart是很好用的一款制造報表的對象，之所以好用，是由於它的官方實例做的異常好，可以直接在圖形化界面操作後生成響應的代碼，我們修正一下，然後放到我們本身項目標邏輯外面便可。

1. JsChart對象的引見

　　　JsChart是一款優良的制造報表的對象，生成的代碼是js，所所以前端jsp頁面很好的應用對象，可以看一下JsChart的官網，翻開後點擊Online Edit，然後隨意選擇一個報表點擊進入，可以在線編纂我們想要的圖表類型和格局，以下： ![jsChart](http://img.blog.csdn.net/20160526130623846) 　　再往下翻，可以設置我們想要的類型： ![jsChart](http://img.blog.csdn.net/20160526130958645) 　　都設置好了後，便可以點擊下面誰人生成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>

　　如許我們就有了生成圖表的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();
 }
}

然後我們來完成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";
 }
}

　　BaseAction中有個`List`對象，然則我們不克不及應用這個對象，由於這裡jsonList是個`List`對象，不是BaseAction中的`List`對象，所以我們要在這個Action中界說一個`List`對象並完成get辦法，然後在struts.xml文件中設置裝備擺設一下root便可，不外這有點費事。　　這裡引見個加倍輕便的辦法，struts2在轉json假如找不到設置裝備擺設的root，就會從值棧的棧頂拿出來數據來轉json，所以我們只需將如今拿到的jsonList扔到值棧的棧頂，然後在設置裝備擺設文件中寫好result便可以了。所以struts.xml中以下： ![struts.xml](http://img.blog.csdn.net/20160526133359517)

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 >

 請選擇報表類型：
 <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

以上就是本文的全體內容，願望對年夜家的進修有所贊助，也願望年夜家多多支撐。

關於JAVA