ExtJs4實戰流量統計系統----系統核心是圖表，曲線數量不固定怎麼辦？（二）

能最直觀的展現流量數據的，當屬各類圖表了，神馬折線圖、柱狀圖、餅圖......

這也是我選擇ExtJs來重構這個項目的緣由，由於ExtJs有一套圖表控件，雖然功能較FusionCharts略弱~，

但ExtJs還有其餘諸如Grid、Tree、Form等一系列用於開發一個完整系統的控件，這對於一個界面要靠本身的設計盲來講......不說大家也知道。

------------------------------我是分隔線-----------------------------------

剛開始動手，就發現Ext的折線圖中，一條曲線就是一個字段，由該字段的多個值繪成一條曲線。

好比說：今天的流量數據，從0點到23點，那麼要實現PV一條曲線，UV一條曲線，那再簡單不過了。

建立個Chart，設置好對應的字段名就OK了，這像這樣子↓。

------------------------------我是分隔線-----------------------------------

但除此類圖表外，我還須要的是：只顯示PV數據，但要的是一天一條曲線，好比昨天一條，今天一條，都是PV數據，都是0點到23點的數據，好對比嘛，

這就麻煩了，使勁研究API後，仍是得抓後腦勺......

問了下度娘和google，卻是查了好幾個，點進去一看，其實也就一兩個，其餘都是複製粘貼，解決辦法也同樣：那就是在服務器端處理好數據，格式化爲Ext能解析的樣式。

好比這樣的數據：

目的是：X軸是小時（VTime），Y軸天然是PV了，而後23號一條張，24號一條線，固然，也可能要繼續增長：25號一條，26號一條......

這樣Ext原生就沒法支持了，以Ext對數據格式的要求："2013-02-23"和"2013-02-24"得是字段名，字段值是PV，主鍵是VTime。

若是在服務端處理的話，"2013-02-23"這樣的東西，顯然不能作爲對象的屬性。

那要返回json給Ext就只能拼字符串了，着實麻煩，直接放棄。

------------------------------我是分隔線-----------------------------------

那就只能用腳原本從新轉換數據格式了。

本來我是但願能建立一個新的Reader，就像JsonReader同樣，接受到數據後，經過此Reader轉換數據，多方便；無奈以我目前的功能，實在沒法參透Ext的源碼。

沒辦法了，只能先從服務端獲取原生數據，而後再逐條格式化，最後從新組合。

new一個新的store，設置好fields，將組合好的新格式數據，填充到store裏，建立Chart，將store綁定到Chart。

OK，雖然笨拙了點，但好歹是實現了。

下邊就是代碼了，由於是就着需求來寫這功能，本來看着還能夠配置下參數實現通用。

但隨着需求的變化，好比，須要從返回的日期字段裏，分離出日，後來又要分離出月，這下好了，着急實現效果，顧不上通用不通用了，直接改之。

------------------------------我是分隔線-----------------------------------

首先，這個沒疑問，Ajax獲取數據。格式如上邊的數據庫截圖。

而後即是轉換數據格式了，思路大概是這樣：

　　經過三個配置屬性：

　　　　屬性1：須要作爲X軸值的字段名（如小時）；

　　　　屬性2：須要作爲曲線數據的字段（如PV）；

　　　　屬性3：再就是須要作爲一條曲線的字段（如日期）。

　　轉換過程：循環全部返回的原生數據，逐條分析。

1. 根據配置，找到屬性3的值，把它放進一個數組（這個數組用來存屬性3的值，也就是全部曲線，數組有多少條數據，就會有多少條曲線，不重複是確定的），再new object()，屬性3的值就是此對象的一個屬性，屬性的值，是以屬性2爲名的字段值，固然，X軸怎麼能忘了呢，獲取屬性1爲個人字段值，也作爲此對象的一個屬性值，屬性名嘛能夠經過配置也能夠固定死。
2. 這樣，當第一條數據走完上述步驟後，新的數據組合裏，已經有一條記錄了，假設這第新記錄是這樣的：「VHour:5,2013-02-23:15555」，接下來再循環其餘原生數據時，就得作判斷了，好比若是新組合裏，已經有小時=5的數據了，而當前循環到的數據，也是小時=5的數據，但日期是另外一天，那麼就不須要new object()，直接給已經存在的數據新增一個屬性就是了，就是這樣：「VHour:5,2013-02-23:15555,2013-02-24:3214」。
3. 如此循環處理完全部原生數據，那麼上邊的截圖數據，就會變成這樣的格式，固然，新數據是json格式的。

   VHour	2013-02-23	2013-02-24
   0	30311	27480
   1	19363	17506
   2	12401	11292
   3	9064	9449
   4	7680	8631
   5	12818	9248

代碼在這（這是我根據本身的需求實現的，看不懂的能夠留言）：

  1 /// <reference path="../../Scripts/ext4.2/ext-all.js" />
  2 Ext.define('Yiqi.Show.Chart.MultiDiyLine', {
  3     extend: 'Ext.panel.Panel',
  4     //requires: ['Yiqi.Chart.DiyJson'],
  5 
  6     BottomTitle: '小時',
  7     BaseFieldName: 'VTime', //--基本字段，以此字段爲基礎，將全部該字段值同樣的數據，進行處理。
  8     TurnFieldName: 'VDate', //--須要將值轉爲新的字段名的字段
  9     NewTurnFieldFormat: '',
 10     IsSplitTurnFieldDate: false, //--將轉換字段，拆分爲month及day
 11     LineFormat: 'Y-m',
 12     ReturnDateFormat: 'MS',//--MVC返回的時間值，須要這樣的格式來解析
 13     xFormat: 'd',
 14     ValueToField: 'PV', //--做爲新字段值的原字段。
 15     ConstFields: [], //--
 16     root: 'listdata',
 17 
 18     lineFields: [],
 19 
 20     firstLoad: true,
 21 
 22     url: '/CatagoryStatics/GetHourDataByDateBetween',
 23     catagoryId: 6,
 24     dtBegin: '',
 25     dtEnd: '',
 26 
 27     initComponent: function () {
 28         var me = this;
 29         this.loadMask = new Ext.LoadMask(this, { msg: "加載中...", removeMask: true }),
 30         Ext.apply(this, {
 31             layout: 'fit'
 32         });
 33 
 34         this.callParent(arguments);
 35     },
 36     afterRender: function () {
 37         this.loadData();
 38         this.callParent(arguments);
 39     },
 40     buildTbarItems: function () {
 41         this.beginDateField = Ext.create('Ext.form.field.Date', {
 42             name: 'dtbegin',
 43             format: 'Y-m-d',
 44             fieldLabel: '起止日期',
 45             labelWidth: 60,
 46             labelAlign: 'right',
 47             width: 170,
 48             value: Ext.Date.add(new Date(), Ext.Date.DAY, -1)
 49         });
 50         this.endDateField = Ext.create('Ext.form.field.Date', {
 51             name: 'datefield',
 52             format: 'Y-m-d',
 53             value: new Date()
 54         });
 55     },
 56     loadData: function (dateBegin, dateEnd) {
 57         var me = this;
 58         me.loadMask.show();
 59         if (dateBegin) {
 60             me.dtBegin = dateBegin;
 61         }
 62         if (dateEnd) {
 63             me.dtEnd = dateEnd;
 64         }
 65         //--先獲取數據
 66         Ext.Ajax.request({
 67             url: me.url,
 68             params: {
 69                 catagoryId: me.catagoryId,
 70                 dtBegin: me.dtBegin,
 71                 dtEnd: me.dtEnd
 72             },
 73             success: function (response) {
 74                 if (response.responseText == "unauth") {
 75                     Yiqi.Common.Tools.IsLogin(response);
 76                 }
 77                 else {
 78                     //--解析並建立圖表
 79                     var allData = Ext.decode(response.responseText);
 80                     me.buildAll(allData);
 81                     me.loadMask.hide();
 82                 }
 83             },
 84             failure: function (response) {
 85                 Yiqi.Common.Tools.DealAjaxError(response);
 86             }
 87         });
 88     },
 89     getParamsValue: function () {
 90         this.params.dtBegin = this.beginDateField.getValue();
 91         this.params.dtEnd = this.endDateField.getValue();
 92         this.params.catagoryId = this.catagoryId;
 93     },
 94     buildAll: function (allData) {
 95         if (!this.firstLoad) {
 96             this.removeAll(true);
 97         }
 98         this.firstLoad = false;
 99         this.buildStore(allData);
100         var objFields = Ext.Array.remove(this.lineFields, this.BaseFieldName);
101         objFields = Ext.Array.sort(objFields);
102         this.buildChart(objFields);
103         this.add(this.lineChart);
104     },
105     buildStore: function (orgData) {
106         //--從新轉換數據格式
107         var newData = this.readRecords(orgData);
108         this.dataStore = Ext.create('Ext.data.JsonStore', {
109             autoDestroy: true,
110             fields: this.lineFields,
111             data: newData
112         });
113     },
114     buildChart: function (fields) {
115         this.buildChartSeries(fields);
116         this.lineChart = Ext.create('Ext.chart.Chart', {
117             style: 'background:#fff',
118             animate: true,
119             //shadow: false,
120             theme: 'Category2',
121             legend: {
122                 position: 'right'
123             },
124             axes: [{
125                 type: 'Numeric',
126                 position: 'left',
127                 fields: fields,
128                 title: 'PV',
129                 grid: true
130             }, {
131                 type: 'Category',
132                 position: 'bottom',
133                 fields: [this.BaseFieldName],
134                 title: this.BottomTitle
135             }],
136             series: this.series,
137             store: this.dataStore
138         });
139 
140     },
141     buildAxes: function (fields) {
142         this.axes = [{
143             type: 'Numeric',
144             position: 'left',
145             fields: fields,
146             grid: true
147         }, {
148             type: 'Category',
149             position: 'bottom',
150             fields: [this.BaseFieldName],
151             title: this.BottomTitle
152         }]
153     },
154     buildChartSeries: function (fields) {
155         //--循環建立
156         var me = this;
157         var objSeries = [];
158         Ext.Array.each(fields, function (obj, idx, all) {
159             objSeries[idx] = {
160                 type: 'line',
161                 smooth: true,
162                 highlight: {
163                     size: 2,
164                     radius: 2
165                 },
166                 style: {
167                     'stroke-width': 1
168                 },
169                 xField: me.BaseFieldName,
170                 yField: [String(obj)],
171                 tips: {
172                     trackMouse: true,
173                     renderer: function (storeItem, item) {
174                         this.update(storeItem.get(me.BaseFieldName) + '： ' + Ext.util.Format.number(storeItem.get(String(obj)), '0,0'));
175                     }
176                 }
177             };
178         });
179         this.series = objSeries;
180     },
181     readRecords: function (data) {
182         var me = this;
183         //--是否須要從日期字段中分離數據
184         if (me.IsSplitTurnFieldDate) {
185             me.BaseFieldName = "VDay";
186         }
187         this.lineFields = new Array();
188         this.lineFields.push(me.BaseFieldName);
189         var newData = [];
190         var listData = data[me.root];
191         var newTurnFieldName = me.TurnFieldName;
192         //--從新轉換數據
193         Ext.each(listData, function (obj, idx, all) {
194             var objBaseField = obj[me.BaseFieldName];
195             //--針對日期數據的處理，由於MVC返回的時間字段數據格式是new Data(/12345465/)
196             if (me.IsSplitTurnFieldDate) {
197                 objBaseField = Ext.Date.format(Ext.Date.parse(obj[me.TurnFieldName], me.ReturnDateFormat), me.xFormat);
198             }
199             if (!Ext.isEmpty(me.NewTurnFieldFormat)) {
200 
201             }
202             //--從已分析好的數據中，查看是否已經存在
203             var newObj = me.findItemByBaseField(newData, objBaseField);
204             //--若是已經存在，那就刪除，由於接下來的操做會修改數據
205             newData = Ext.Array.remove(newData, newObj);
206             for (var key in obj) {
207                 if (key == me.BaseFieldName) {
208                     newObj[key] = obj[key];
209                 }
210                 else if (key == me.TurnFieldName) {
211                     var objVal = obj[key];
212                     //--針對日期數據的處理
213                     if (me.IsSplitTurnFieldDate) {
214                         objVal = Ext.Date.parse(objVal, me.ReturnDateFormat);
215 
216                         newObj[me.BaseFieldName] = objBaseField;
217                         objVal = Ext.Date.format(objVal, me.LineFormat);
218                     }
219                     //--將解析獲取的值（如多是一個日期2013-02-23）做爲對象的一個新屬性，屬性值也是以前配置的一個字段值
220                     newObj[String(objVal)] = obj[me.ValueToField];
221                     me.InsertToModelFields(String(objVal));
222                 }
223             }
224             //--修改完，從新放入數據中
225             newData = Ext.Array.push(newData, newObj);
226         });
227         newData = Ext.Array.sort(newData, function (a, b) {
228             return (a[me.BaseFieldName] - b[me.BaseFieldName]);
229         });
230         return newData;
231     },
232     findItemByBaseField: function (array, val) {
233         var newObj = {};
234         var me = this;
235         Ext.Array.each(array, function (obj, idx, all) {
236             if (obj[me.BaseFieldName] == val) {
237                 newObj = obj;
238                 return false;
239             }
240         });
241         return newObj;
242     },
243     InsertToModelFields: function (modelName) {
244         var me = this;
245         var existsFlag = false;
246         Ext.Array.each(this.lineFields, function (field, idx, all) {
247             var fieldName = undefined;
248             var typeName = typeof (field);
249             if (typeName == "string") {
250                 fieldName = field;
251             }
252             else if (typeName == "object") {
253                 fieldName = field["name"];
254             }
255             if (fieldName == modelName) {
256                 existsFlag = true;
257                 return false;
258             }
259         });
260 
261 
262         if (!existsFlag) {
263             this.lineFields.push(modelName);
264         }
265     }
266 });

View Code

 

------------------------------我是分隔線-----------------------------------

這就符合Ext圖表空間要求的數據格式了。

接下來就是建立圖表了，循環步驟1裏的數組，逐一建立曲線，最後綁定數據，就OK了。。。

------------------------------我是分隔線-----------------------------------

PS：能實現的方法確實有不少，我這樣作，也是時間所迫，來不及去想更簡單方便的方法，如今項目已經上線了，卻又沒什麼精力再返回去繼續研究。