Extjs4 中Line chart使用Ajax資料來源繪圖

在ExtJS 4 LiveAnimated.html 例子中，動態繪製了曲線圖，很是漂亮，例子中是用前端javascript產生的測試資料來繪圖，如果用ajax的方式從後台取資料去繪圖，出現了曲線無法繪製(座標軸已繪製)的問題，結果如下：

代碼如下：

  Ext.require('Ext.chart.*');function Content(ncId, ipAddress) { var nowTime = new Date(); var intervalId = -1; var arrayCount = 30; var step = 1; var storeLength = ""; var generateData = (function() { var data = [], i = 0, date = nowTime; min = Math.min, max = Math.max, random = Math.random; return function() { Ext.Ajax.request({ url: 'getVMUsedMemory.php', params: {ncId:ncId, ipAddress: ipAddress}, success: function(response, options){ var jsonData = Ext.decode(response.responseText); //data = data.slice(); if(data.length == arrayCount){ data.shift(); //remove the first data of array } data.push({ date: new Date(jsonData.date), usedMemory: parseInt(jsonData.usedMemory/1024) }); } }); return data.slice(); }; })(); var store = Ext.create('Ext.data.JsonStore', { fields: ['date', 'usedMemory'], data: generateData() }); Ext.create('Ext.Window', { width: 800, height: 600, hidden: false, maximizable: true, title: 'Live Animated Chart', renderTo: Ext.getBody(), layout: 'fit', items: [{ xtype: 'chart', style: 'background:#fff', id: 'chartCmp', store: store, animate: true, axes: [{ type: 'Numeric', grid: true, minimum: 0, maximum: 8192, position: 'left', fields: ['usedMemory'], title: 'Memory of used(MB)', grid: { odd: { fill: '#dedede', stroke: '#ddd', 'stroke-width': 0.5 } } }, { type: 'Time', position: 'bottom', fields: 'date', title: 'Day', step: [Ext.Date.SECOND, 1], dateFormat: 'i:s',groupBy: 'year,month,day,hour,minute,second',//aggregateOp: 'sum', constrain: true, fromDate: Ext.Date.add(nowTime, Ext.Date.SECOND, 1), toDate: Ext.Date.add(nowTime, Ext.Date.SECOND, 30), grid: true }], series: [{ type: 'line', axis: 'left', xField: 'date', yField: 'usedMemory', label: { display: 'none', field: 'usedMemory', renderer: function(v) { return v >> 0; }, 'text-anchor': 'middle' }, markerConfig: { radius: 5, size: 5 } }] }], listeners: { afterrender: function() { var chart = Ext.getCmp('chartCmp'); var timeAxis = chart.axes.get(1);intervalId = setInterval(function() { var gs = generateData(); var toDate = timeAxis.toDate, lastDate = gs[gs.length - 1].date, markerIndex = chart.markerIndex || 0; if (+toDate < +lastDate) { markerIndex = 1; timeAxis.toDate = lastDate; timeAxis.fromDate = Ext.Date.add(Ext.Date.clone(timeAxis.fromDate), Ext.Date.SECOND, step); chart.markerIndex = markerIndex; } store.loadData(gs); storeLength += store.data.items.length;}, step*1000); }, destroy: function(){ clearInterval(intervalId); } } });}Ext.onReady(function () {var con = new Content("10.0.21.1");});

分析代碼，沒有發現缺陷，但一直無法繪製曲線，後來跟蹤代碼到 Ext.chart.axis.Time中，發現了問題所在：Ext在繪製圖形時，先繪製了Time時間軸。繪製時間軸時，首先為chart對象建立了substore，它與store的結構一樣，先看看drawSeries這個函數的代碼(Ext.chart.series.Line)

//Ext.chart.series.LinedrawSeries: function() {var me = this,chart = me.chart,store = chart.substore || chart.store, ……} 

從代碼中可以看出drawSeries使用的資料來源是chart.substore和chart.store “邏輯或”，邏輯或的結果是“第一個不為空白就是第一個,第一個為空白就是第二個”，而此時的substore不為null，因此繪製曲線的資料來源也是substore，而substore的資料與時間軸的刻度一一對應，constrainDates( Ext.chart.axis.Time)函數中產生了substore的資料，從下面的代碼可以看出，其資料來源與store有關。

var getRecordByDate = (function() { var index = 0, l = store.getCount(); return function(date) { var rec, recDate; for (; index < l; index++) { rec = store.getAt(index); recDate = rec.get(field); if (+recDate > +date) { return false; } else if (+recDate == +date) { return rec; } } return false; }; })(); 

 

時間軸可以繪製出來，但曲線就是不能繪製出來，經過尋找，發現substore中的usedMemory的值全部為false，此為問題所在。上面的代碼是從store中尋找date欄位，如果2個時間相等，則將rec的資料返回給substore。

 

關注for迴圈中的else if 部分，發現沒有任何兩個時間相等，所以substore中的usedMemory的值全部為false。ajax返回的資料格式為{"usedMemory":163576,"date":"2011 05 31 22:11:02"} ，不相等的原因在於nowtime中含有微秒值，而ajax傳回值中無微秒值，所以 else if (+recDate == +date) 永遠不成立，找到問題所在後，解決十分簡單，將nowtime中的微秒值去除，可以使用nowTime.setMilliseconds(0);

 

 

經驗：時間值的比較可以採用如下方式：

date = new Date();

+date操作可直接將date轉換為int值，兩個Date類型的比較，一定要注意精度(秒、微秒)！