`
atian25
  • 浏览: 468807 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

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

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

 

  • 大小: 88.2 KB
  • Test.rar (911.8 KB)
  • 描述: 勉强算是GroupingChart吧...(完整代码,包括类库)
  • 下载次数: 489
  • Test-only.rar (3.7 KB)
  • 描述: 简化版,仅包含的Test.js
  • 下载次数: 141
分享到:
评论
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中可以出来。不清楚是什么问题?

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

相关推荐

    adapter-extjs.rar_extjs chart_highchart_javascript

    在结合ExtJS和Highcharts时,JavaScript不仅用于控制页面的行为,还负责处理数据的加载、过滤、格式化,以及调用图表库的API来绘制和更新图表。 总结来说,`adapter-extjs.js`可能是一个关键的桥梁,它实现了ExtJS...

    Ext用户扩展控件---------googlechart 利用google画图

    Ext用户扩展控件——Google Chart,是一种将Google的图表服务与EXTJS框架相结合的技术,用于在Web应用中创建丰富的、动态的数据可视化效果。EXTJS是一个强大的JavaScript库,它提供了丰富的用户界面组件,而Google ...

    extjs实现报表

    - **图表集成**:利用ExtJS的Chart组件,可以将数据可视化,如柱状图、折线图和饼图。 - **自定义渲染器(Renderer)**:为列值设置自定义格式或逻辑,增强数据展示效果。 4. **排序与过滤** - **列排序**:允许...

    ssh+extjs4小项目

    描述中提到了采用ExtJS Chart进行统计,这表明ExtJS的图表功能被用来展示数据。 2. **分页和查询功能**:ExtJS提供了内置的分页组件,可以轻松地实现数据网格的分页显示。查询功能可能通过ExtJS的FormPanel和Store...

    Extjs4.0视频教程和源代码,另附文档翻译

    - **数据加载和过滤**:演示了如何通过Store加载数据,并实现基于条件的数据过滤功能。 ### 事件机制(Event) #### 第七讲: Extjs4.0的事件机制(Event) - **事件系统概述**:介绍了Extjs中的事件系统,该系统允许...

    一个非常好的用extjs开发的股票信息显示的例子

    ExtJS的图表组件(Ext.chart)是其强大功能之一,可以用于创建各种动态数据可视化图表,如折线图、柱状图、饼图等。在这个股票信息显示的例子中,很可能使用了柱状图或折线图来呈现股票的价格走势。通过绑定数据源,...

    ext-6.2.0-gpl

    1. **Grid Panel**:用于展示表格数据,支持复杂的分组、过滤、排序等功能。 2. **Form Panel**:包含多种输入控件,如文本框、下拉列表等,方便用户输入和编辑数据。 3. **Tree Panel**:适用于展示层次结构数据,...

    extjs4代码

    - MVC架构:ExtJS 4采用了Model-View-Controller模式,将应用程序逻辑、界面和数据分离,提高了代码的可维护性和可扩展性。 - 动态数据绑定:数据模型与视图之间的双向绑定,使得UI能够实时反映数据变化。 - 功能...

    很不错的ExtJs PPT

    3. **Grid**:表格组件,用于显示和操作大量数据,支持分页、排序、过滤等功能。 4. **Tree**:树形组件,用于展示层次结构数据。 5. **Toolbar**:工具栏,常用于放置按钮、菜单和分隔符等。 6. **Panel**:面板...

    使用extjs写的时间轴

    9. **扩展性**:为了增加时间轴的功能,可以编写插件或扩展。例如,添加搜索功能查找特定事件,或者添加过滤器只显示特定时间段的事件。 10. **3DTimeline组件**:虽然标题中没有明确提及,但“3DTimeline”可能是...

    Ext入门教程

    3. **Grid**:展示数据表格,支持排序、过滤等功能。 4. **Form**:用于收集用户输入信息,支持表单验证。 5. **Window**:弹出窗口或对话框,常用于显示额外的信息或进行复杂的交互操作。 #### 六、进阶特性 1. *...

    Ext Js权威指南(.zip.001

    7.6.3 store的数据操作 / 379 7.7 本章小结 / 384 第8章 模板与组件基础 / 385 8.1 模板 / 385 8.1.1 模板概述 / 385 8.1.2 ext.template的创建与编译 / 385 8.1.3 格式化输出数据:ext.string、ext.number、...

    40个实用的轻量级JavaScript库

    1. **Underscore.js**:一个提供多种实用函数的JavaScript实用程序库,如数组操作、对象处理和函数辅助等。 2. **Lo-Dash**:与Underscore.js类似,Lo-Dash优化了性能,并提供了更全面的功能集,特别适合处理大型...

Global site tag (gtag.js) - Google Analytics