extjs 4 chart 时间轴格式的处理

来源：互联网发布：linux鸟哥私房菜 pdf 编辑：程序博客网时间：2024/05/06 16:29

var dayStore = Ext.create('Ext.data.JsonStore', {
    fields: [{ name:'name', type:'date', dateFormat:'Y-m-d H:i:s' }, 'data'],   //Field Array, name用date类型 
    proxy: {
        type:'ajax', 
        url :'HistoryChart'
    }
}); 
  
var dayHistogram = Ext.create('Ext.panel.Panel', {
    layout:'fit', 
    listeners: {
        'afterrender':function(comp) {   //添加一个LoadMask，当dayStore加载数据的时候在Panel上显示LoadMask
            newExt.LoadMask(comp.getEl(), { store: dayStore }); 
        }
    },
    items: {
        xtype:'chart',   //xtype chart 
        id:'dayChart',
        animate:true,    //动画效果 
        store: dayStore,   //对应的store 
        axes: [{   //坐标轴定义 
          type:'Numeric',   //数据类型坐标轴 
          position:'left',   //左边，纵坐标 
          fields:'data',   //绑定对应dayStore中的Field 
          title:'Power(W)',   //坐标轴名称 
          minimum: 0,   //坐标轴最小值 
          grid:true    //是否在图表上显示横向网格 
        }, {
          type:'Time',   //Time类型坐标轴，时间轴 
          position:'bottom',   //作为横坐标显示 
          fields:'name',   //为该坐标轴绑定dayStore中的 "name" Field 
          step: [Ext.Date.MINUTE, 30],   //时间轴，坐标点，步进距离 
  
          dateFormat:'H:i',    //坐标轴刻度格式化 
          groupBy:'year,month,day,hour,minute,second',   //忘记了，应该是精确度吧，API中已经没有相关说明，或者可以不要了 
          aggregateOp:'sum',    //忘记了。。或者一直没弄懂过， 原谅我。。。API中已经没有相关说明，或者可以不要了 
  
          fromDate: historyDayFromDate,   //JavaScript Date对象，起始日期 
          toDate: historyDaytoDate,   //JavaScript Date对象，截止日期 
  
          grid:true    //是否显示纵向网格 
      }],
      series: [{
        type:'line', 
        axis: ['left','bottom'],   //4.0早起的版本貌似只写"left"就好，4.0.7貌似一定要写两个，不然会出错，官方例子也改了
        smooth:true,    //字面理解，平滑曲线或者转折明显的曲线 
        fill:true,    //曲线内部是否填充颜色 
        tips: {   //鼠标移动到曲线图的点上时显示的提示信息，如图中11:52:30 
            trackMouse:true,    //实时追踪鼠标 
            width: 80,   //提示面板宽度 
            height: 40,   //提示面板高度 
            renderer:function(storeItem, item) {   //格式化呈现数据的方法 
                vartimeText = Ext.Date.format(storeItem.get('name'),'H:i:s'); 
                this.setTitle(storeItem.get('data') + ' W<br />' + timeText); 
            }
        },
        highlight: {   //鼠标移动到点上的时候的显示样式 
            size: 4,   //忘了 
            radius: 4   //点半径 
        },
        style: {   //曲线样式，参数比较多参考API 
            'stroke-width': 2   //定义曲线粗细 
        },
        markerConfig: {   //详细参数请参考API 
            radius: 1   //曲线图上点的样式 
        },
        xField:'name', 
        yField:'data'
      }]
    }
}); 
  
var historyDayTimeAxis = false;   //存储时间轴对象 
var historyDayFromDate = new Date();    //时间轴起始时间 
var historyDaytoDate = new Date();    //时间轴截止时间 
  
var dayChartShow = true;   //控制是否显示曲线图上数据的变量 
  
functionloadDayData() {    //重新加载曲线图数据
    varyearMonthText = selectedYearStoreItem.get('name');
    if(yearMonthText !=null && yearMonthText.length == 6) {
        yearMonthText = yearMonthText.substring(0, 5) +'0' + yearMonthText.substr(5);   //从其他图表获取年月信息的格式化字串 
    }
    vardayText = selectedMonthStoreItem.get('name');
    if(dayText < 10) {
        dayText ='0' + dayText;   //从其他图表数据获取格式化过的日期数据 
    }
    vardateText = yearMonthText + '.'+ dayText;    //整合出当天的年月日信息
    vardatehistoryFrom = Ext.Date.parse(dateText, "Y.m.d");   //格式化成Javascript的Date对象 
    vardatehistoryTo = Ext.Date.parse(dateText, "Y.m.d");   //格式化成Javascript的Date对象 
    datehistoryTo.setHours(23, 30, 0, 0);   //将当天截止时间的对象设置为晚上11点半 
    if(historyDayTimeAxis) {   //检测时间轴是否已经初始化 
        historyDayTimeAxis.fromDate = datehistoryFrom;   //重置时间轴的起始时间 
        historyDayTimeAxis.toDate = datehistoryTo;   //重置时间轴的结束时间 
    }
    dayStore.load({   //重新加载dayStore中的数据，新加载的数据会自动替换掉原来的图形 
        //但是4.0.7版本疑似有一个BUG，如果新加载的数据为空的话，之前的曲线图不会消失，下面的代码有解决方案
        params: {   //取数据HTTP里的参数 
            param:'day', 
            nodeId: getCurrentNodeId(),
            date: dateText
        },
        callback:function(records) {   //成功获取到数据后的回调函数，处理数据为空时之前的曲线图不会消失的BUG 
            if(records.length > 0) {   //如果数据集不为空 
                if(!dayChartShow) {
                    Ext.getCmp('dayChart').series.get(0).showAll();   //显示曲线 
                    dayChartShow =true; 
                }
            }else if(dayChartShow) {   //如果数据集为空，并且之前已经有曲线在显示 
                Ext.getCmp('dayChart').series.get(0).hideAll();   //隐藏之前的曲线图，曲线救国策略 
                dayChartShow =false; 
            }
        }
    });
} 
  
//最后需要在上面的组件加载完毕后，运行初始化时间轴对象的语句
historyDayTimeAxis = Ext.getCmp('dayChart').axes.get(1);

2. Server端实现

详细的逻辑因为源代码部分处理比较复杂，就不写了，展示部分关键代码结构，完整结构请参考另一篇柱状图的文章。

1
2
3
obj.put(WebConstants.NAME, DateTool.formatDate(midCalendar.getTime()));//"name", "2012-09-20 13:42:30" 
obj.put(WebConstants.DATA, pacAvg);
dataArray.add(obj);

最终反馈给Web端的数据如下：

[{"name":"2012-09-20 10:47:30","data":15484.6},{"name":"2012-09-20 10:52:30","data":15484.6},{"name":"2012-09-20 10:57:30","data":15484.6},{"name":"2012-09-20 11:02:30","data":15484.6},{"name":"2012-09-20 11:07:30","data":15484.6},{"name":"2012-09-20 11:12:30","data":0},{"name":"2012-09-20 11:17:30","data":0},{"name":"2012-09-20 11:22:30","data":0},{"name":"2012-09-20 11:27:30","data":0},{"name":"2012-09-20 11:32:30","data":0},{"name":"2012-09-20 11:37:30","data":9282.2},{"name":"2012-09-20 11:42:30","data":18869.8},{"name":"2012-09-20 11:47:30","data":594},{"name":"2012-09-20 11:52:30","data":17729.2},{"name":"2012-09-20 11:57:30","data":18821.3},{"name":"2012-09-20 12:02:30","data":17393.3},{"name":"2012-09-20 12:07:30","data":19075.2},{"name":"2012-09-20 12:12:30","data":17564.8},{"name":"2012-09-20 12:17:30","data":18909.7},{"name":"2012-09-20 12:22:30","data":18270.9},{"name":"2012-09-20 12:27:30","data":18413.1},{"name":"2012-09-20 12:32:30","data":19156.4},{"name":"2012-09-20 12:37:30","data":20013.4},{"name":"2012-09-20 12:42:30","data":17941.8},{"name":"2012-09-20 12:47:30","data":343.3},{"name":"2012-09-20 12:52:30","data":20080.2},{"name":"2012-09-20 12:57:30","data":0},{"name":"2012-09-20 13:02:30","data":0},{"name":"2012-09-20 13:07:30","data":0},{"name":"2012-09-20 13:12:30","data":0},{"name":"2012-09-20 13:17:30","data":0},{"name":"2012-09-20 13:22:30","data":0},{"name":"2012-09-20 13:27:30","data":0},{"name":"2012-09-20 13:32:30","data":0},{"name":"2012-09-20 13:37:30","data":0},{"name":"2012-09-20 13:42:30","data":0},{"name":"2012-09-20 13:47:30","data":0},{"name":"2012-09-20 13:52:30","data":19893.5}]

因为我们在dayStore中定义了”name” Field的类型为date，及与上面数据相同的日期格式，所以上面的日期字串会被自动解析为Javascript的Date对象，用与在时间轴中精确显示其实际位置。

因为项目需要，示例中的时间点都是固定间隔的，实际应用中你可以定位到任意一个点。

另外Extjs4的Time axis中有一个constrain参数，该参数标识如果接收到的数据时间点超过了时间轴的起始点，那么该点是否显示出来，该参数默认值为false。