续: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} "
    }
  }
}

 

 

 

评论

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柱状图的宽度呢？