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

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

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

 

评论

9 楼 atian25 2011-08-29  

linxingqiqi 写道

您好，我在使用雷达图的过程中遇到了一个问题，想看看您是否能够帮我一下。问题是这样的：
打开网页初始化一个有4个轴线的雷达图之后，我通过单击xField和yField的交汇点，来实现向下钻取的功能，现在的问题是钻取的雷达图是3个轴线，但我使用chart.bindStore(store,true);chart.redraw(series);之后，多出来的一根轴线和交汇点消除不了。现在有个比较笨的方法就是重新创建一个chart来替代原本的这个。但是我还是想在原本的chart上来实现。请问您能给我一点提示吗？

chart我用的不多,不好意思. 4.x的chart就不错

8 楼 linxingqiqi 2011-08-29  

您好，我在使用雷达图的过程中遇到了一个问题，想看看您是否能够帮我一下。问题是这样的：
打开网页初始化一个有4个轴线的雷达图之后，我通过单击xField和yField的交汇点，来实现向下钻取的功能，现在的问题是钻取的雷达图是3个轴线，但我使用chart.bindStore(store,true);chart.redraw(series);之后，多出来的一根轴线和交汇点消除不了。现在有个比较笨的方法就是重新创建一个chart来替代原本的这个。但是我还是想在原本的chart上来实现。请问您能给我一点提示吗？

7 楼 atian25 2011-01-18  

qingtianxl 写道

请问双击时 才让他显示 tip 提示 怎么做？

监听下chart的双击事件:
itemmouseover
itemmouseout
itemclick
itemdoubleclick
itemdragstart
itemdrag
itemdragend

然后显示tip吧,要看下源码和swf的api,找下显示tip的函数.

6 楼 qingtianxl 2011-01-17  

请问双击时 才让他显示 tip 提示 怎么做？

5 楼 qingtianxl 2011-01-17  

请问能 在chart里  加个鼠标双击事件吗  或者改tipRenderer : 也可以  请指教！

4 楼 atian25 2010-03-08  

老实说,回头看来,我写的对chart的这2个扩展帖子是没多大用的.
直接用我说的另一种方法即可.

3 楼 atian25 2010-03-08  

你的代码是在web容器里面的,还是直接本地打开的?
如果是本地打开的,那是swf的安全性问题.

2 楼 wubian 2010-03-08  

呃。对，也碰到这个问题。火狐下可以出来。google chrome下也行。唯独ie下不出。

1 楼 hefan 2009-10-29  

您好，我怎样用远程的store就不会出来图表了？（ proxy:new Ext.data.HttpProxy({url: ''}),  ）、、、


把那个url中的地址直接访问，得到的json数据放到 data中可以出来。不清楚是什么问题？

你可以到你那边试一试吗，难道不支持远程数据