extjs 4 chart 时间轴格式的处理
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
new Ext.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) { //格式化呈现数据的方法
var timeText = 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; //控制是否显示曲线图上数据的变量 function loadDayData() { //重新加载曲线图数据
var yearMonthText = selectedYearStoreItem.get('name');
if(yearMonthText != null && yearMonthText.length == 6) {
yearMonthText = yearMonthText.substring(0, 5) + '0' + yearMonthText.substr(5); //从其他图表获取年月信息的格式化字串
}
var dayText = selectedMonthStoreItem.get('name');
if(dayText < 10) {
dayText = '0' + dayText; //从其他图表数据获取格式化过的日期数据
}
var dateText = yearMonthText + '.' + dayText; //整合出当天的年月日信息
var datehistoryFrom = Ext.Date.parse(dateText, "Y.m.d"); //格式化成Javascript的Date对象
var datehistoryTo = 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。
extjs 4 chart 时间轴格式的处理的更多相关文章
- 使用Java8提供的Duration类制作字幕时间轴调整工具
网上下载的字幕有时和片源的时间轴不一致.我们能够自己写一个工具来调整,也就是总体向前移动几秒,或者向后移动几秒.Java8中提供的Duration类使得这样的时间计算极其方便.以下就以最简单的srt字 ...
- [DevExpress]ChartControl之时间轴示例
关键代码: using System; using System.Data; using System.Windows.Forms; using DevExpress.XtraCharts; name ...
- DevExpress之ChartControl实现时间轴实例 z
using System; using System.Data; using System.Windows.Forms; using DevExpress.XtraCharts; namespace ...
- fiddler笔记:TimeLine时间轴选项卡
1.TimeLine选项卡介绍 TimeLine选项卡支持使用"瀑布"模型查看1~250个选中的Session.主要用于帮助性能分析和理解请求之间的关联.选项卡的主体内容是数据流视 ...
- JQuery+HTML5+CSS3制作时间轴插件,支持响应式布局
一.效果图预览 (图一) (图二) 附注说明: 图一是浏览器宽度像素大于560px下的展示效果,图二是在浏览器宽度像素小于560px下的展现效果.使用的是CSS3的Media Query(媒体查询)实 ...
- 4-Highcharts曲线图之时间轴折线图
鼠标按住左键 左右移动可以试试<!DOCTYPE> <html lang='en'> <head> <title>4-Highcharts曲线图之时间轴 ...
- Android 类似时间轴的实现
想要实现图片中的的时间轴的效果,设定了三种颜色,但是出来的只有一个黑色,还不是设定好的,而且长度很长的话不能滚动,下面上代码: 布局文件: <LinearLayout xmlns:android ...
- 超炫的时间轴jquery插件Timeline Portfolio
Timeline Portfolio是一款按时间顺序专业显示事件的jquery时间轴插件,可以根据时间的先后嵌入各种媒体包括微博,视频和地图等.这个展现的模式非常适合设计师的作品集和个人简历的展示.T ...
- 使用canvas编写时间轴插件
使用canvas编写时间轴插件 背景 项目中有一个视频广场的功能,需要一个时间轴类似视频播放中进度条功能一样显示录像情况,并且可以点击.拖动.放大缩小展示时间轴,获取到时间轴的某个时间.原来的时间轴是 ...
随机推荐
- 【转载】HashMap实现原理浅析
HashMap和Hashtable的区别 两者最主要的区别在于Hashtable是线程安全,而HashMap则非线程安全Hashtable的实现方法里面都添加了synchronized关键字来确保线程 ...
- Git文件不显示图标/标识
初次使用Git服务功能,做了很多探路事情,记录下刚刚遇到的问题 情况:安装了Git应用程序,或者也安装了TortoiseGit-1.8.16.0-64bit(类似SVN工具)后,上传下载文件没有问题, ...
- C/C++常用头文件 以及简单应用介绍
C/C++头文件一览 C #include <assert.h> //设定插入点#include <ctype.h> //字符处理#include <errno.h> ...
- 题解报告:hdu 2647 Reward(拓扑排序)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2647 Problem Description Dandelion's uncle is a boss ...
- SVN异常处理(五)-状态小图标不见了
1.发现问题 装了Win10,再装了Office2016等一些最新软件后,发现SVN状态小图标竟然就不见了 2.分析问题 在Window系统中,当UAC启动时,有些应用程序的图标上会显示一个盾牌,像这 ...
- jQuery——开关灯
js对象与jquery对象的相互转化: 1.$(js对象) 2.$(selector).get(索引).$(selector)[索引] <!DOCTYPE html> <html l ...
- PowerDesigner16逆向工程生成PDM列注释(My Sql5.0模版)
一.编辑当前DataBase 选择DataBase——>edit Current DBMS...弹出如下对话框: 如上图,先解释一下: 根据红颜色框从上往下解释一下. 第一个红框是对应的修改的 ...
- 大白_uva10795_新汉诺塔
题意:给出所有盘子的初态和终态,问最少多少步能从初态走到终态,其余规则和老汉诺塔一样. 思路: 若要把当前最大的盘子m从1移动到3,那么首先必须把剩下的所有盘子1~m-1放到2上,然后把m放到3上. ...
- C#鸡翁百鸡
一个for static void Main(string[] args) { int x, y, z; ; x <= ; x++) { - * x) % == ) { y = ( - * x) ...
- Python 之mysql类封装
import pymysql class MysqlHelper(object): conn = None def __init__(self, host, username, password, d ...