第六章 其他功能第六章 其他功能\6-16 JQPivotTable樞紐分析

6-16 JQPivotTable樞紐分析

EEP PivotTable樞紐分析元件,如同Excel的樞鈕分析表一樣地強大與彈性,只需簡單的設定,即可在Runtime過程中讓User自行拖拉樞紐欄位及所要統計的欄位,最後選擇呈現方式,如以統計圖的方式來呈現。 

Step1>        EEPServer端先準備好需要的資料來源(InfoCommand),我們使用先前建立好的Server程式:sOrders裡的Orders這個InfoCommand,做為資料來源。

 

 

 

Step2>        建立一個空的網頁,命名為JQPivot.aspx,並從工具箱JQClientTools下拖拉進一個JQScriptManager元件和JQPivotTable元件。

 

 

設定JQScriptManager元件的UsePivottable屬性為True

 

 

Step3>        設定JQPivotTable元件的資料來源,RemoteNameDataMember屬性。

 

 

Step4>        設定ShowColumns屬性,選擇所要呈現的欄位有哪些。

 

 

 

Step5>        接著在Columns屬性中,設定樞紐分析表中預設的X軸欄位,Rows屬性則是設定Y軸欄位,User可以在Runtime時動態拖動這些欄位。當然X軸與Y軸預設欄位可以不必設定,代表所有欄位都可以作為X軸與Y軸欄位。

 

 

 

Step6>        設定PivotTableRenderers屬性,將需要呈現的表格或統計圖類型從左邊選到右邊,UserRuntime時可以根據這個設定來選擇各種呈現方式。

 

 

Step7>        設定PivotTableAggregators屬性,將需要計算的彙總類型(通常以計數與總和為主),從左邊選到右邊,讓UserRuntime時選擇彙總的方式。 

 

 

Step8>        將表單掛至EEPManager上執行,呈現結果如下:

(1)   透過"表格"的呈現方式,可以呈現資料內容。將表頭上面的欄位拉到X軸或Y軸上作為統計的樞鈕欄位,如X軸選擇為員工編號,彙總模式為"計數",呈現如下:

 

http://www.infolight.com.tw/WebClient/journal/file/BOOK97.files/P9.jpg

 

(2)   將表頭上面的"客戶號碼"拖拉到Y軸中,並將彙總模式改為"總和",選擇"訂單金額"作為欄位,代表要分析員工與客戶的交叉統計,呈現如下:

 

http://www.infolight.com.tw/WebClient/journal/file/BOOK97.files/P10.jpg

 

(3)   如果要呈現資料的大小區隔,可以將"表格"改為"熱力圖",如下圖的效果:

 

http://www.infolight.com.tw/WebClient/journal/file/BOOK97.files/P11.jpg

 

(4)   再將"表格"改成"堆疊圖",如下呈現的統計圖:

 

http://www.infolight.com.tw/WebClient/journal/file/BOOK97.files/P12.jpg

 

Step9>        若要將樞紐分析的結果匯出成Excel,我們有提供一個方法可以呼叫。先在網頁上加入一個HTMLButton,用來匯出Excel

 

 

切換到原始檔模式,在按鈕裡定義一個OnClick方法,比如:exportX,在此方法中寫一行匯出ExcelJS

 

 

Step10>     執行結果如下:按下Excel按鈕,即會產生出一個Excel檔案了。

 

 


 

Top of Page