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

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

阅读更多

续前文:http://atian25.iteye.com/blog/432513

 

 

新的效果图:


 

 

用到了Ext.ux.form.LovCombo,不过在3.0它有个小bug,如下fixed掉:

详细原因看http://atian25.iteye.com/blog/433901

var combo = new Ext.ux.form.LovCombo({
      width:600,
      hideOnSelect:false,
      maxHeight:200,
      store:new Ext.data.SimpleStore({
        id:0,
        fields:['pid', 'imageName']
      }),
      triggerAction:'all',
      valueField:'pid',
      displayField:'imageName',
      mode:'local',
      //下面这一句即可,原因是3.0beforeBlur里面findRecord不到record,就setValue(getRawValue())了.
      beforeBlur:function(){}

    });
 

 

对Ext.chart.Chart的改写如下:

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;
  },
  /**
   * add if
   */
  setSeries : function(series){
    this.series = series;
    if(this.isInitialized){
      this.refresh();
    }
  },
  tz:''
});
 

完整源码如附件,

高手请无视~

 

如图中的需求,其实还有一种传统做法,就是自己构造一个chartstore,根据grid.store和combo的变化去更新chartStore的field.

 

 

顺便附上生成数据的Groovy源码,很简单的一段测试代码:

import java.util.TimerTask
import java.util.Timer
import java.util.GregorianCalendar

/**
 * @author TZ
 *
 */
public class MonitorThread{
  public static void main(def args){
    def timerTask = new TimerTaskExample();
    def timer = new Timer();
    timer.scheduleAtFixedRate(timerTask,new Date(),1000*60*10);
  }
}
class TimerTaskExample extends TimerTask {
  public void run() {
    //  "图像名    ","PID","会话名      ","会话#   ","内存使用 ","状态  ","用户名   ","CPU 时间","窗口标题    "
    def process = "tasklist /nh /v /fo csv /fi \"MEMUSAGE gt 30000\"".execute();
    def result = [];
    def dateStr = String.format('%tY-%<tm-%<td', GregorianCalendar.getInstance()) +" "+ String.format('%tH:%<tM:00', GregorianCalendar.getInstance());
    process.in.eachLine {line -> 
      def arr = line.split(",(?![0-9])")
      if(arr.length>=9 && arr[6].indexOf("TZ")!=-1){
        def json = "{monitorTime:\"${dateStr}\",imageName:${arr[0]},pid:${arr[1]},memUsage:${arr[4]},userName:${arr[6].replace('\\','-')},cpuTime:${arr[7]},title:${arr[8]}}";
        result.push(json);
      }
    }
    
    new File("monitor.log").withWriterAppend{ out ->
      result.each() {value ->
        out.writeLine("${value},");
      }
      out.writeLine("");
      println "log at ${dateStr} "
    }
  }
}
 

 

 

  • 大小: 174.3 KB
  • Test2.rar (1 MB)
  • 描述: 完整源码
  • 下载次数: 437
分享到:
评论
7 楼 atian25 2010-08-05  
fengshengshijie 写道
想问问图表的 numericAxis 如何将其竖起来展示

?
6 楼 fengshengshijie 2010-08-05  
想问问图表的 numericAxis 如何将其竖起来展示
5 楼 dhtiger 2010-02-23  
不错,学习了
4 楼 love_cy 2009-09-24  
但是感觉他有一个最大值,不管size设置多大,都不会大于默认的最大值。
3 楼 love_cy 2009-09-24  
OK  找到了

line 设置  lineSize
column 直接设置 size
2 楼 atian25 2009-09-24  
love_cy 写道
怎么设置columnChart柱状图的宽度呢?


[url]http://developer.yahoo.com/yui/charts/ [/url]
1 楼 love_cy 2009-09-24  
怎么设置columnChart柱状图的宽度呢?

相关推荐

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

    在给定的标题“ExtJS Chart 扩展 - 增加对数据的过滤等操作”中,我们关注的是ExtJS图表组件的功能扩展,特别是关于数据处理,如过滤和操作。 在ExtJS中,图表(Chart)是数据可视化的关键组成部分,它允许用户以...

    EXTJS 折线 chart action 代码示例

    这个示例展示了如何使用EXTJS创建一个与Java后端交互的折线chart,动态加载数据并显示。你可以根据实际需求调整chart的样式和交互效果,如添加工具提示、轴配置、图例等。 通过理解EXTJS的store、proxy、model和...

    EXTJS4.0视频教程配套代码

    看到其它地方 分太高,问大家省点分. 只有代码,视频请百度看. 第一讲:extjs4.0概述和HELLO WORD程序 [01]EXTJS4.0的概述和HELLOWORD... 第二十九讲:extjs4.0的高级组件chart下 第三十讲:extjs4.0的desktop使用讲解

    Extjs教程源码

    Extjs教程源码 介: ***************第一部分基础知识**************** ...第二十九讲: EXTJS4.0的高级组件Chart下 第三十讲: EXTJS4.0的Desktop使用讲解 本资料共包含以下附件: EXTJS4.0视频教程配套代码.zip

    EXTJS扩展例子集

    这个"EXTJS扩展例子集"显然是一个包含EXTJS3.0相关扩展组件的资源包,旨在帮助开发者理解和学习如何使用这些扩展。 在EXTJS中,扩展(Extensions)通常是指对框架原有功能的增强或定制,它们可以是新的组件、小部件...

    免费 Extjs4.0教程视频

    ### 免费Extjs 4.0教程视频知识点概览 #### 第一讲:Extjs 4.0概述与Hello World程序 - **Extjs 4.0简介**: - Extjs是一款基于JavaScript的开源前端框架,用于构建交互式的Web应用程序。 - 版本4.0引入了许多新...

    ExtJs:收集基于ExtJs扩展的一些控件

    这可能是对另一批ExtJs扩展控件的介绍,可能包含了一些新的或更新的组件。例如,可能有用于地图集成的地图控件,或者用于数据分析的复杂表格组件。这些控件的引入有助于开发者更好地应对不同业务场景,提供更专业化...

    Extjs6示例中文版

    - **设置ExtJS**:安装完成后,通过Sencha Cmd可以轻松搭建一个新的ExtJS项目,并配置必要的文件结构和依赖关系。 - **应用体系结构**:了解ExtJS应用的基本结构是非常重要的,这有助于开发者更有效地组织代码和管理...

    语言程序设计资料:ExtJs学习笔记-2积分.doc

    语言程序设计资料:ExtJs学习笔记-2积分.doc

    ExtJS 7.7 SDK trial

    12. **示例和教程**:ExtJS 7.7 SDK可能包含了丰富的示例代码和教程,帮助开发者快速理解和学习新功能。 总的来说,"ExtJS 7.7 SDK trial"为开发者提供了一个功能强大且易于使用的开发环境,它结合了最新的...

    extjs 4chart

    2. 创建基本配置:定义一个Ext.container.Viewport,作为应用的主要容器,并在其内部创建一个Ext.chart.Chart实例。设置必要的配置项,如宽度、高度、标题、背景等。 ```javascript Ext.application({ name: 'MyApp...

    Extjs4.2 Chart柱状图

    ExtJS 是一个强大的JavaScript应用程序框架,专用于构建富客户端Web应用。它提供了丰富的组件库,包括图表(Chart)功能,让开发者能够创建交互式的、数据驱动的可视化元素。在4.2版本中,ExtJS 的图表功能得到了...

    资料:包括extjs2.0源码

    不过,由于EXTJS后续版本(如EXTJS 4.x、6.x及更高版本)引入了许多新特性和优化,因此,理解EXTJS 2.0的源码也是为升级到更高版本打基础的过程。对于初学者,建议先从官方文档和教程开始,逐步了解EXTJS的基本概念...

    extjs最新版 3.2版本

    EXTJS是一个基于JavaScript的用户界面库,主要用于构建富互联网应用程序(RIA)。3.2版本是EXTJS的一个重要里程碑,发布于2009年。在本文中,我们将深入探讨EXTJS 3.2版本的关键特性、改进以及它如何助力开发者构建...

    ExtJS 组件扩展

    - **解决方案**:充分利用xtype机制,特别是在动态创建大量组件的情况下,避免直接使用`new`操作符创建组件实例,以减少内存消耗并提高性能。 #### 三、扩展组件的两个层级 1. **Level 0(基础组件扩展)** - **...

    extjs-4.1.1完整压缩包

    EXTJS 4.1.1 的完整包可能包括了源码、示例、文档、资源文件等多个部分,使得开发者能够全面了解和利用EXTJS的强大功能。学习和掌握EXTJS 4.1.1,不仅可以提升Web应用的用户体验,也为后续升级到更高版本打下坚实...

    ExtJs DWR扩展 DWRProxy、DWRTreeLoader、DWRGridProxy

    ExtJs和Direct Web Remoting (DWR) 是两种在Web应用程序中实现富客户端交互的技术。ExtJs是一个强大的JavaScript框架,用于构建用户...这个压缩包文件可能包含了这些扩展的示例代码或者配置文件,供开发者参考和学习。

    extjs3.0开发包含示例api

    这个开发包包含了EXTJS 3.0的核心API、示例代码和源文件,是学习和开发EXTJS应用程序的重要资源。 一、EXTJS 3.0 API EXTJS 3.0的API是其核心组成部分,提供了大量的可重用组件,如表格、面板、窗口、菜单、按钮等...

Global site tag (gtag.js) - Google Analytics