ExtJS Chart 扩展 - 增加对数据的过滤等操作

最新推荐文章于 2017-12-28 15:23:35 发布

最新推荐文章于 2017-12-28 15:23:35 发布 · 156 阅读

文章标签：

#EXT #Windows #Chrome #IE #YUI

ExtJS 专栏收录该内容

40 篇文章

订阅专栏

本文介绍了一个ExtJS图表的扩展，使用户能够更灵活地处理和展示数据。通过自定义查询函数，可以为不同系列的数据应用特定的过滤条件，实现更精细的数据呈现。

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容器中才能运行.

代码是临时写的测试代码,没有进一步封装...等下次有空再重构下~