このプロジェクトはついに終了しているので、登録機能は行いません。登録関数に関する別の記事では、登録フォームの検証を詳細に導入しました。このプロジェクトに関数を直接追加して、関連するジャンプを変更できます。そのため、もうそれを行いません。さらに、現在、このプロジェクトにはアクションレイヤーとサービスレイヤーのみがあります。 DAO層をまだ抽出していません。このレポートを完了した後、DAOレイヤーを抽出してから、プロジェクト全体を要約しました。ソースコードをアップロードできます。その時にダウンロードすることを歓迎します〜
このセクションでは、主に最後の関数を作成します。JSChartを使用して、製品販売レポートを表示するツールとして使用します。 JSChartは、レポートを作成するための非常に便利なツールです。使いやすい理由は、その公式の例が非常によくできているためです。グラフィカルインターフェイスで動作した後、対応するコードを直接生成できます。私たちはそれを変更し、それから私たち自身のプロジェクトの論理に入れます。
1。JSCHARTツールの紹介
JSChartは優れたレポート作成ツールです。生成されたコードはJSであるため、フロントエンドJSPページを使用するための優れたツールです。 JSChartの公式Webサイトをご覧になり、[オンライン編集]を開いた後、[オンライン編集]をクリックしてから、レポートを選択してクリックして入力します。次のように、オンラインで必要なチャートの種類と形式を編集できます。！[jschart]（http://img.blog.csdn.net/20160526130623846） ！[jschart]（http://img.blog.csdn.net/20160526130958645）結局のところ、上記のJSコードを生成するボタンをクリックして、対応するコードをJSPにコピーできます。これが私が生成したJSコードです（便利な部分を傍受するだけです）：
<div id = "chart_container"> loading chart ... </div> <script = "text/javascript"> var mychart = new jschart（ 'chart_container'、bar '' '、' '）; myChart.setDataArray（['＃44A622'、 '＃A7B629'、 '＃CAD857'、 '＃E4DB7B'、 '＃ECDE49'、 '＃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（ 'Mall Sales Report'）; mychart.settitlefontsize（10）; mychart.settitlecolor（ '＃607985'）; myChart.setAxisValuesColor（ '＃607985'）; myChart.SetAxisNamex（ 'Product Name'、False）; mychart.setaxisnamey（ 'sales'、true）; myChart.setGridopacity（0.8）; mychart.setaxispaddingleft（50）; mychart.setaxispaddingbottom（40）; mychart.set3d（true）; mychart.draw（）; </script>
このようにして、チャートを生成するJSコードがあります。プロセス全体を分析しましょう。まず、フロントエンドJSPページがAJAXリクエストを送信し、バックエンドがデータベースから対応するデータを取得します。ここでは、どの製品が販売されているかと対応する販売数量をここで取得するだけで、ラインアイテムテーブルから取得する必要があります。さらに、フロントエンドはパラメーターを渡して、バックエンドにいくつのデータを取得するかを伝える必要があります。背景が取得された後、データはJSON形式で前景に送信され、前景は上記のJSコード（もちろん、対応する変更が必要です）を実行してレポートの形式でデータを表示します。このプロセスによると、最初にバックエンドを実行します。
2。バックグラウンドクエリのロジックを完了します
まず、クエリ関数はサービスレイヤーで完了します。このクエリ中に、製品の製品と販売量という2つのアイテムがクエリされています。コードを見てください：
// sorderServiceインターフェースパブリックインターフェイスsordererservice拡張baseService <sorder> {//無関係なコードを保存... //ホット製品の販売量パブリックリスト<オブジェクト> querysale（int number）;} // sordererviceimpl実装クラス @service（ "sorderservice"） @sitpresswarnings "） BaseServiceImpl <Sorder>を実装しているsorderService {//無関係なコードを保存... @Override public List <Object> querySale（int number）{//感情なしで見つかった2つの項目は、string hql = "Select s.name、sum（s.number）from surder s s.product group by s.product.id"; return getsession（）。create query（hql）// .setfirstreSult（0）// .setMaxResults（number）// .list（）; }}次に、アクションパーツを完了します。
@Controller@Scope（ "Prototype"）Public Class Sodraction Extends BaseAction <Sorder> {Public String AddSorder（）{//無関係なコード... //人気のある製品とその販売String QuerySale（）{list <object> jsonList = soorderservice.querysale（model.getnumber（））; //クエリリストを値スタックの一番上に配置しますが、なぜこれを行うのですか？以下の説明を参照してくださいactionContext.getContext（）。getValueStack（）。push（jsonList）; 「jsonlist」を返します。 }} BaseActionには「リスト」オブジェクトがありますが、このオブジェクトを使用することはできません。ここでは、JSONLISTはBaseActionの「リストオブジェクトではなく「リスト」オブジェクトではないため、このアクションで「リスト」オブジェクトを定義し、struts.xmlファイルにルートを設定する必要がありますが、これは少し面倒です。 これがより簡単な方法です。 Struts2のときに構成されたルートが見つからない場合は、Valueスタックの上部からデータを取り出してJSONを変換します。したがって、ここにあるjsonListを値スタックの一番上にスローし、結果を構成ファイルに書き込みます。したがって、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" src = "$ {shop} /js/jquery-11.1.1.js"> </script> <script type = "text/javascript" src = "src =" $ {shop} /js/jscharts.js "> </script> <script type =" text/javascript "> $（function（）{$" " ['＃44a622'、 '＃a7b629'、 '＃cad857'、 '＃e4db7b'、 '＃ecde49'、 '＃ec9649'、 '＃d97431'、 '＃d95531'、 '＃e4db7b']; $ .post（$（ "＃sale"）。val（）、{number：$（ "＃number"）。val（）}、function（data）{var mychart = new jschart（ 'chart_container'、$（ "＃type"）。 mychart.colorize（0、length）; mychart.settitle（ 'Mall Sales Report'）; mychart.settitlecolor（ '＃607985'）; myChart.setAxisValuesColor（ '＃607985'）; myChart.SetAxisNamex（ 'Product Name'、False）; mychart.setaxisnamey（ 'sales'、true）; myChart.setGridopacity（0.8）; mychart.setaxispaddingleft（50）; mychart.setaxispaddingbottom（40）; mychart.set3d（true）; mychart.draw（）; }、 "json"）; }）; }）; }）; </script> </head> <body style = "margin：10px;">レポートタイプを選択してください：<選択id = "sale"> <option value = "sorder_querysale.action">年次販売レポート</option> </select> queries数：<選択id = "番号"> <option値= "5"> 5 </option値タイプ：<選択id = "type"> <option値= "bar">列タイプ</option> <option value = "line"> line type </option> <option value = "pie"> pie shapedタイプ</option> </select> <input> <input> <入力タイプ "ID =" "value =" query "> <div id =" chartainer "主にユーザーの選択に応じて表示できるいくつかの選択ボックスがあります。 $ .post（）;に4つのパラメーターがあります。最初のものは、受信アクションを指定することです。私はそれを選択タグに書きました、そして、それはDOM要素を配置することによって直接取得されます。 2番目のパラメーターは、送信されるパラメーターです。これが表示される番号です。 3番目のパラメーターは、バックグラウンドJSONデータを受信した後に実行される関数です。 4番目のパラメーターは、受信したデータ型を指定することです。これがJSONタイプです。
背景データを受信した後に実行された関数を見てみましょう。これは主に、以前に自動的に生成されたJSコードです。主にレポートを生成する必要がありますが、アイコンのタイプがユーザーが選択したタイプに変更され、表示されたアイテムの数も変更されたなど、少し変更が行われました。ただし、これらはいくつかの小さな変更であり、大きな問題はありません。さまざまなタイプのアイコンの表示効果を見てみましょう。
効果は非常に良いので、レポートを作成する必要がある友人がいる場合は、このJSChartツールを使用することをお勧めします。これは非常に便利です〜私は基本的にプロジェクト全体で非常に多く書かれています〜後で要約を作成し、ソースコードをアップロードします。
元のアドレス：http：//blog.csdn.net/eson_15/article/details/51506334
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。