專刊內文

當前位置:首頁>專刊分享>內文

瀏覽次數 : 4622



 

EEP JQuery如何實現統計圖表

訊光科技

前言

在ERP專案開發過程中,統計圖表(chart)普遍應用於各種統計和報表中,其形象直觀,內容清晰。EEP的JQuery網站項目使用了Easyui 外掛程式並且進行了包裝,但是easyui並沒有提供圖表相關的元件和實現方法。為了實現圖表功能,需要使用另一些協力廠商JQuery圖表外掛程式來實現圖表的功能。本文使用基於jQuery的開源javascript繪圖庫外掛程式Flot,並結合EEP的N-Tier架構來實現簡單的柱狀圖(barchart)和餅狀圖(piechart)設計。


準備工作

資料來源:使用SQL Server 範例資料庫Northwind 的Orders表與Order Details表。

  

 

EEP2012:使用EEP2012的JQWebClient網站。

Flot外掛程式下載:http://code.google.com/p/flot/ 並且將需要使用的JS檔加入到EEP的JQWebClient網站中。
 

Bar chart實例

(1)   實現功能:統計1997年訂單的每月銷售額, 並以Barchart做比較。

(2)   資料庫語句:
select month(orders.OrderDate) as Month,sum(Orders.TotalAmout) as TotalAmount from orders where year(orders.OrderDate)=1997 group by month(orders.OrderDate)

(3)   建立Server端:使用SSingle模版加入一個Server端命名為SBarChart,然後將以上資料庫語句複製到Master(infocommand元件)的CommandText屬性上,build這個Server端工程。然後在EEPNetServer的Package Manager上加入build好的SBarChart.dll。

(4)   建立Client端:在JQWebClient網站下建立一個ChartExample資料夾存放我們範例的網頁,在這個資料夾下加入一個空白網頁BarChart.aspx。然後加入EEP使用的js,以及Flot使用的js的參考。

<!-- infolight and easyui js -->

    <link href="../js/themes/default/easyui.css" rel="stylesheet" />

    <link href="../js/themes/icon.css" rel="stylesheet" />

    <script src="../js/jquery-1.8.0.min.js"></script>

    <script src="../js/jquery.easyui.min.js"></script>

    <script src="../js/jquery.json.js"></script>

    <script src="../js/jquery.infolight.js"></script>

    <script type="text/javascript" src="../js/datagrid-detailview.js"></script> 

    <!-- flot js -->

    <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../flot-master/excanvas.min.js"></script><![endif]-->

      <script language="javascript" type="text/javascript" src="../flot-master/jquery.flot.js"></script>

      <script language="javascript" type="text/javascript" src="../flot-master/jquery.flot.categories.js"></script>

    <script language="javascript" type="text/javascript" src="../flot-master/jquery.flot.pie.js"></script>

 

(5)   加入一個div用作圖表的顯示區域,加入id等屬性,以及EEP使用的參數選項infolight-options

 <div id="chartid" style="width:auto;height:500px"     infolight-options="remoteName:'SBarChart.Master',tableName:'Master',xField:'Month',yField:'TotalAmount'">

     </div>

 

(6)   加入繪製圖表的JS代碼。

<script type="text/javascript">

          $(document).ready(function () {

              var data = [];

              var target = $('#chartid');

              //獲取參數

              var remoteName = getInfolightOption(target).remoteName; //Serverremote

              var tableName = getInfolightOption(target).tableName; //Servertable

              var xField = getInfolightOption(target).xField; //X軸欄位

              var yField = getInfolightOption(target).yField; //Y軸欄位

              var url = getRemoteUrl(remoteName, tableName, false); //呼叫Server取得數據的url

              var queryWord = new Object(); //查詢條件

              $.ajax({

                  type: "POST",

                  url: url,

                  data: "queryWord=" + $.toJSONString(queryWord),

                  cache: false,

                  async: false,

                  success: function (returndate) {

                      if (returndate != null) {

                          var rows = $.parseJSON(returndate)//將回傳的字串轉換成json

                          for (var i = 0; i < rows.length; i++) {

                              data[i] = [rows[i][xField], rows[i][yField]]; //data數組賦值

                          }

                      }

                  },

                  error: function () {

                      alert('error');

                  }

              });

              $.plot(target, [data], {//將顯示的資料内容給予顯示的div

                  series: {

                      bars: {

                          show: true,

                          barWidth: 0.8,

                          align: "center"

                      }

                  },

                  xaxis: {

                      mode: "categories",

                      tickLength: 0

                  }

              });

          })

      </script>

 

(7)   EEPManager中將這個頁面掛在Menu上並且設定許可權,然後通過VS開啟Logon.aspx登陸瀏覽這個頁面。

 

Pie chart實例


(1)   實現功能:根據不同產品代號,計算單一產品的訂單總額,取產品代號1-10做成餅狀圖。

(2)   資料庫語句:
select [Order Details].ProductID,sum([Order Details].UnitPrice*[Order Details].Quantity) as Amout from [Order Details] group by [Order Details].ProductID

(3)   建立Server端:使用SSingle模版加入一個Server端命名為SPieChart,然後將以上資料庫語句複製到Master(infocommand元件)的CommandText屬性上,build這個Server端工程。然後在EEPNetServer的Package Manager上加入build好的SPieChart.dll。(如同SBarChart.dll的操作方式)

(4)   建立Client端:在JQWebClient網站下的資料夾ChartExample存放我們範例的網頁,在這個資料夾下加入一個空白網頁PieChart.aspx。然後加入EEP使用的js,以及Flot使用的js引用。(EEP的js同BarChart.aspx的範例)

  <script language="javascript" type="text/javascript" src="../flot-master/jquery.flot.js"></script>

  <script language="javascript" type="text/javascript" src="../flot-master/jquery.flot.categories.js"></script>

    <script language="javascript" type="text/javascript" src="../flot-master/jquery.flot.pie.js"></script>

 

(5)   加入一個div用作圖表的顯示區域,加入id等屬性,以及EEP使用的參數選項infolight-options:

 <div id="chartid" style="width:auto;height:500px"     infolight-options="remoteName:'SPieChart.Master',tableName:'Master',labelField:'ProductID',valueField:'Amout'"></div>

(6)   加入繪製圖表的JS代碼: 

<script type="text/javascript">

function labelFormatter(label, series) {

   return "<div style='font-size:8pt; text-align:center; padding:2px; color:white;'>ProcuctID: "

             + label + "<br/> TotalAmout: " + series.data[0][1] + "</div>";

   }

    $(document).ready(function () {

        var data = [];

        var target = $('#chartid');

        //獲取參數

        var remoteName = getInfolightOption(target).remoteName; //Serverremote

        var tableName = getInfolightOption(target).tableName; //Servertable

        var labelField = getInfolightOption(target).labelField; //顯示的label欄位

        var valueField = getInfolightOption(target).valueField; //值的欄位

        var url = getRemoteUrl(remoteName, tableName, false); //呼叫Server取得數據的url

        var queryWord = new Object();

        queryWord.whereString = "ProductID >=1 and ProductID <10"; // 查詢條件

        

        $.ajax({

            type: "POST",

            url: url,

            data: "queryWord=" + $.toJSONString(queryWord),

            cache: false,

            async: false,

            success: function (returndata) {

                if (returndata != null) {

                    var rows = $.parseJSON(returndata)

                    for (var i = 0; i < rows.length; i++) {

                        data[i] = {

                            label: rows[i][labelField],

                            data: rows[i][valueField]

                        }

                    }

                }

            },

            error: function () {

                alert('error');

            }

        });

        //flot自身方法

        $.plot(target, data, {//將顯示的資料内容給予顯示的div

            series: {

                pie: {

                    show: true,

                    radius: 1,

                    label: {

                        show: true,

                        radius: 1,

                        formatter: labelFormatter,

                        background: {

                            opacity: 0.8

                        }

                    }

                }

            },

            legend: {

                show: false

            }

        });

     })

  </script>

 

EEPManager中將這個頁面掛在Menu上並且設定許可權,然後通過VS開啟Logon.aspx登陸瀏覽這個頁面。

結語

以上是EEP結合Flot外掛程式繪製柱狀圖和餅狀圖的簡易範例,在設計專案的過程中我們可能不是如此簡單的單一幅圖,也可能並不是使用flot外掛程式,但是方法是通用的。以此範例抛磚引玉,可以看出此類控件的3個重點,第一加入需要使用到的js引用;第二,設定先是圖表的div,注意infolight-option裏設定顯示統計圖的資料源以及圖表上的所要顯示的欄位;第三,通過js程式讀取div上設定的資料源以及顯示欄位(讀取後轉成JSON格式),并將其内容顯示在div上。由此可見,利用EEP的N-Tier架構從Server端獲取到資料之後,前端只要將資料轉換成需要的資料形式(如JSON)交給繪圖外掛組件,就能輕鬆完成統計圖表了。