09.07.27 , 重構了下,詳見:http://atian25.iteye.com/blog/433882
看了下CHART的源碼... 貌似作者是寫as出身的...
refresh那段感覺寫得不夠完美,於是自己對chart做了下擴展.
當然...如果你覺得我寫的沒用...你也可以跳過該文....不送~
主要改變:
- 可以對每個series的數據進行處理
- 重寫refresh... 感覺原來的寫法看起來不爽... as-like
-
需要多個數據呈現在一張圖上的,不需要定義N多個fields了..
(不知道如何說明這點...還是看示例代碼吧)
- 需要把一個store中的某部分數據顯示爲一條線,另一部分顯示爲另一條...
- 除了store本身的內容外,還需要在chart上添加新的一條線,用自己定義的數據array
- etc.....
代碼如下:
Ext.chart.Chart.refresh的源函數實現:http://extjs.com/deploy/dev/docs/source/Chart.html#method-Ext.chart.Chart 搜索refresh
Ext.override(Ext.chart.Chart,{
/**
* override the as-like code, and add some interface for filter data
*/
refresh : function(){
var dataProvider = [];
if(!this.series){
dataProvider.push({
type: this.type,
dataProvider: this.collectData(this.store)
});
}else{
var styleChanged = false;
var seriesCount = this.series.length;
for(var i = 0; i < seriesCount; i++){
var currentSeries = this.series[i];
//make a copy of the series definitions so that we aren't editing them directly.
var item = {};
Ext.apply(item,currentSeries,{
type:this.type,
queryFn:this.queryFn,
prepareData:this.prepareData,
collectData: this.collectData
});
//encode the style
if(currentSeries.style){
item.style = Ext.encode(currentSeries.style);
styleChanged = true;
}
//collect the data for this series
item.dataProvider = item.collectData(this.store);
dataProvider.push(item);
item=null;
}
}
this.swf.setDataProvider(dataProvider);
},
/**
* Function which can be overridden to provide custom formatting for each Record
* ^_^ some code in DataView
*/
prepareData:function(obj,index,record){
return obj;
},
/**
* filter some data for some series
*/
queryFn:function(record,id){
return true;
},
/**
* Use for each series, if u want to filter some data for some series.notify these is function queryFn
* ^_^ also from DataView,and make some changes.
*/
collectData:function(store){
var records = store.queryBy(this.queryFn).getRange();
var r = [];
for(var i = 0, len = records.length; i < len; i++){
r[r.length] = this.prepareData(records[i].data, i, records[i]);
}
return r;
}
});
用法示例:
1)示例圖:
2)代碼:
//採集的數據
var data = {
data:[
{monitorTime:"2009-07-23 17:00:00",imageName:"explorer.exe",pid:"3012",memUsage:"1,804 K",userName:"TZ-Administrator",cpuTime:"0:48:14",title:"暫缺"},
{monitorTime:"2009-07-23 17:00:00",imageName:"iexplore.exe",pid:"4408",memUsage:"7,372 K",userName:"TZ-Administrator",cpuTime:"0:03:06",title:"ExtJS Test - Windows Internet Explorer"},
{monitorTime:"2009-07-23 17:10:00",imageName:"explorer.exe",pid:"3012",memUsage:"11,824 K",userName:"TZ-Administrator",cpuTime:"0:48:25",title:"暫缺"},
{monitorTime:"2009-07-23 17:10:00",imageName:"iexplore.exe",pid:"4408",memUsage:"77,372 K",userName:"TZ-Administrator",cpuTime:"0:03:11",title:"ExtJS Test - Windows Internet Explorer"},
{monitorTime:"2009-07-23 17:20:00",imageName:"explorer.exe",pid:"3012",memUsage:"18,824 K",userName:"TZ-Administrator",cpuTime:"0:48:25",title:"暫缺"},
{monitorTime:"2009-07-23 17:20:00",imageName:"iexplore.exe",pid:"4408",memUsage:"97,372 K",userName:"TZ-Administrator",cpuTime:"0:03:11",title:"ExtJS Test - Windows Internet Explorer"},
{monitorTime:"2009-07-23 17:30:00",imageName:"explorer.exe",pid:"3012",memUsage:"25,824 K",userName:"TZ-Administrator",cpuTime:"0:48:25",title:"暫缺"},
{monitorTime:"2009-07-23 17:30:00",imageName:"iexplore.exe",pid:"4408",memUsage:"87,372 K",userName:"TZ-Administrator",cpuTime:"0:03:11",title:"ExtJS Test - Windows Internet Explorer"},
{monitorTime:"2009-07-23 17:40:00",imageName:"explorer.exe",pid:"3012",memUsage:"10,824 K",userName:"TZ-Administrator",cpuTime:"0:48:25",title:"暫缺"},
{monitorTime:"2009-07-23 17:40:00",imageName:"iexplore.exe",pid:"4408",memUsage:"110,372 K",userName:"TZ-Administrator",cpuTime:"0:03:11",title:"ExtJS Test - Windows Internet Explorer"}
]
};
var store = new Ext.data.GroupingStore({
reader: new Ext.data.JsonReader({
root:'data'
},[
'imageName','pid','sessionName','sessionNum',
{name:'memUsage',type:'int',convert:function(v,r){return parseInt(v.replace(/[^0-9]/g,''))*1024;}},
{name:'monitorTime',type:'date',dateFormat:'Y-m-d H:i:s'},
'status','userName','cpuTime','title'
]),
groupField:'pid',
sortInfo:{field: 'monitorTime', direction: "ASC"}
});
store.loadData(data);
var grid = new Ext.grid.GridPanel({
region:'center',
store:store,
sm:new Ext.grid.RowSelectionModel({}),
cm:new Ext.grid.ColumnModel({
defaults:{
sortable: false,
css:"text-align:center;"
},
columns:[
{
header:'PID',
dataIndex:'pid',
width:30,
groupRenderer:function(value,unused,record,rowIndex,colIndex,store){
return String.format('{0} (PID:{1})',record.get('imageName'),value);
}
},
{header:'映像名稱',dataIndex:'imageName',width:50},
{header:'窗口標題',dataIndex:'title'},
{
header:'內存佔用',
dataIndex:'memUsage',
width:40,
renderer:Ext.util.Format.fileSize
},
{header:'CPU時間',dataIndex:'cpuTime',width:30},
{header:'用戶名',dataIndex:'userName',width:50},
{header:'採樣時間',dataIndex:'monitorTime',renderer:Ext.util.Format.dateRenderer('y-m-d H:i'),width:50}
]
}),
view: new Ext.grid.GroupingView({
forceFit:true,
hideGroupedColumn:true,
showGroupName:false,
groupTextTpl: '{text}'
})
});
var chart = new Ext.chart.LineChart({
store: store,
url: '/js/extjs/3.0/resources/charts.swf',
tipRenderer : function(chart, record, index, series){
return String.format('ImageName: {0}\nPID:{3} \nMemUsage: {1} \nAt: {2} ',series.displayName,Ext.util.Format.fileSize(record.get('memUsage')),record.get('monitorTime').format('y-m-d H:i'),record.get('pid'));
},
xField:'monitorTime',
xAxis: new Ext.chart.TimeAxis({labelRenderer:Ext.util.Format.dateRenderer('y-m-d H:i')}),
yField: 'memUsage',
yAxis: new Ext.chart.NumericAxis({labelRenderer:Ext.util.Format.fileSize}),
//定義的不同的series,這裏你可以通過監聽某些事件,自動生成series
series:[{
type: 'line',
displayName: 'explorer.exe',
//過濾方法
queryFn:function(record,id){
return record.get('pid')==3012;
},
style: {
color:0xAACCBB
}
},{
type: 'line',
displayName: 'iexplorer.exe',
queryFn:function(record,id){
return record.get('pid')==4408;
},
style: {
color:0x99BBE8
}
}],
chartStyle: {
padding: 10,
animationEnabled: true,
legend:{
display: "top"
},
font: {
name: 'Tahoma',
color: 0x444444,
size: 11
},
//style of tip
dataTip: {
padding: 5,
border: {
color: 0x99bbe8,
size:1
},
background: {
color: 0xDAE7F6,
alpha: .9
},
font: {
name: 'Tahoma',
color: 0x15428B,
size: 10,
bold: true
}
},
xAxis: {
color: 0x69aBc8,
majorTicks: {color: 0x69aBc8, length: 4},
minorTicks: {color: 0x69aBc8, length: 2},
majorGridLines: {size: 1, color: 0xeeeeee}
},
yAxis: {
color: 0x69aBc8,
majorTicks: {color: 0x69aBc8, length: 4},
minorTicks: {color: 0x69aBc8, length: 2},
majorGridLines: {size: 1, color: 0xdfe8f6}
}
}
});
3)說明:
本來想做一個GroupingChart的,即改變分組的時候,自動改變圖表上的線條數.
於是重寫了個Ext.ux.data.GroupingStore,但是監聽groupchanged,生成series的時候碰到了點小問題...
一下糊塗了...暫時放下...改天再繼續寫吧...
有時候，需要離開自己的計算機一段時間，留點時間給自己，好好思考一下，即使思考正在寫的那段代碼。
09.07.25晚上更新實現後的代碼:
功能:根據Grid的分組自動重繪chart
代碼如附件中Test.rar ,由於yui chart是編譯爲網絡權限的,所以需要放在web容器中才能運行.
代碼是臨時寫的測試代碼,沒有進一步封裝...等下次有空再重構下~
