ExtJS Chart 扩展 - 增加对数据的过滤等操作 - 天猪部落阁 - (ExtJS && AS3 && Java)

atian25

浏览: 462343 次
性别:
来自: 广州

最近访客更多访客>>

akingde

Rock_ftk

sqllib

bigdog001

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

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

博客分类：

ExtJS

EXT Windows Chrome IE YUI

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

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

Test.rar (911.8 KB)
描述: 勉强算是GroupingChart吧...(完整代码,包括类库)
下载次数: 489

Test-only.rar (3.7 KB)
描述: 简化版,仅包含的Test.js
下载次数: 141

查看图片附件

分享到：

续:ExtJS Chart 扩展(重构了下,并写了个 ... | ExtJS Menu嵌套Combo时,下拉菜单被遮盖的 ...

2009-07-24 17:41
浏览 9116
评论(9)
查看更多

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

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中可以出来。不清楚是什么问题？

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

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

[4.x] Ext.ux.button.AutoRefresher

ExtJS 4.x 定制你的js

ExtJS4.x 随笔(2011-04-29更新)

ExtJS 4.0 改善Ext.grid.plugin.RowEditing (重构,v1.4版本,2011-09-11)

ExtJS Tree刷新后自动展开并选择节点

仅供纪念,曾做过的一些界面截图

ExtJS3.x 随笔(2010-07-08更新)

Ext JS 3.2.0发布 -- 不少令人振奋的特性(更新翻译后的release-notes)

ExtJS EditorGridPanel中时间日期编辑问题的总结

Ext 3.0.1 Release Notes

也谈谈Ext.Grid之记录用户使用习惯—隐藏列

ExtJS 常见问题 - by tz

ExtJS 3.0 优秀扩展简介 (持续更新)

ExtJS 2.3/3.0 定制你所需要的模块

ExtJS Combo 下拉列表正常显示HTML标签内容

ExtJS 3.0 Designer Preview (官方的IDE可视化工具)

ExtJS Menu嵌套combo等控件时,自动隐藏/遮盖等bug的解决方案

ExtJS 输入框/MessageBox.prompt 禁止粘贴

ExtJS 修复3.0里面的LovCombo(下拉多选框)的Bug

续:ExtJS Chart 扩展(重构了下,并写了个新的示例--内存监控)

最近访客更多访客>>