SSH框架網上商城項目第29戰之應用JsChart技巧顯示商品發賣報表。本站提示廣大學習愛好者：（SSH框架網上商城項目第29戰之應用JsChart技巧顯示商品發賣報表）文章只能為提供參考，不一定能成為您想要的結果。以下是SSH框架網上商城項目第29戰之應用JsChart技巧顯示商品發賣報表正文
這個項目終究接近序幕了，注冊功效我就不做了，關於注冊功效我的另外一篇文章具體的引見了一下注冊的表單驗證，可以直接把功效加到本項目中，修正一下相干的跳轉便可，就不再做了。別的，今朝這個項目只要action層和service層，dao層我還沒抽取，做完這個報表，我把dao層抽取一下，再對全部項目做個總結，差不多便可以上傳源碼了，到時刻迎接年夜家下載~
這一節重要做一下最初一個功效：應用JsChart這個對象來顯示商品的發賣報表，JsChart是很好用的一款制造報表的對象，之所以好用，是由於它的官方實例做的異常好，可以直接在圖形化界面操作後生成響應的代碼，我們修正一下，然後放到我們本身項目標邏輯外面便可。
1. JsChart對象的引見
JsChart是一款優良的制造報表的對象，生成的代碼是js，所所以前端jsp頁面很好的應用對象，可以看一下JsChart的 官網，翻開後點擊Online Edit，然後隨意選擇一個報表點擊進入，可以在線編纂我們想要的圖表類型和格局，以下：  再往下翻，可以設置我們想要的類型：  都設置好了後，便可以點擊下面誰人生成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中以下： 
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
以上就是本文的全體內容，願望對年夜家的進修有所贊助，也願望年夜家多多支撐。
