Extjs 4 动态显示折线图 按秒显示
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<jsp:include page="/common/Extjs.jsp"></jsp:include>
<link rel="stylesheet" type="text/css" href="/css/storageSpaceBar.css" />
<script type="text/javascript" src="/app/plugins/jquery.min.js"></script>
<script> Ext.onReady(function () {
var chart, timeAxis;
var nowDate = new Date(Ext.Date.format(new Date(),'Y-m-d H:i:s')); //当前时间
//产生数据
var generateData = (function() {
var data = [], i = 0,
last = false,
date = nowDate,
min = Math.min,
max = Math.max,
random = Math.random;
return function() {
data = data.slice();
data.push({
date: Ext.Date.add(date, Ext.Date.SECOND, i++),
visits: min(100, max(last? last.visits + (random() - 0.5) * 20 : random() * 100, 0))
});
last = data[data.length -1];
return data;
};
})(); var store = Ext.create('Ext.data.JsonStore', {
fields: ['date', 'visits'],
data: generateData()
}); //每隔一秒执行
var intr = setInterval(function() {
var gs = generateData(); //产生数据
var toDate = timeAxis.toDate,//时间轴结束时间
lastDate = gs[gs.length - 1].date, //获取最后一个时间点
markerIndex = chart.markerIndex || 0;
if (+toDate < +lastDate) {
markerIndex = 1;
timeAxis.toDate = lastDate; //修改截至时间
timeAxis.fromDate = Ext.Date.add(Ext.Date.clone(timeAxis.fromDate), Ext.Date.SECOND, 1);//修改开始时间+1
chart.markerIndex = markerIndex;
}
store.loadData(gs);
}, 1000); var win = Ext.create('Ext.window.Window', {
width: 800,
height: 300,
autoShow: true,
layout: 'fit',
items: [{
xtype: 'chart',
style: 'background:#fff',
itemId: 'chartCmp',
store: store,
shadow: false,
animate: true,
axes: [{
type: 'Numeric',
minimum: 0,
maximum: 100,
position: 'left',
grid:true,
fields: ['visits']
}, {
type: 'Time',
position: 'bottom',
fields: 'date',
dateFormat: 'H:i:s',//时
groupBy: 'year,month,day,hour,minute,second',
step: [Ext.Date.SECOND, 1], //默认为天
grid:true,
aggregateOp: 'sum',
constrain: true,
fromDate: nowDate, //当前时间
toDate: Ext.Date.add(nowDate,Ext.Date.SECOND,20)//6秒后时间
}],
series: [{
type: 'line',
showMarkers:false,
smooth: false,
axis: ['left', 'bottom'],
xField: 'date',
yField: 'visits'
}]
}]
});
chart = win.child('#chartCmp');
timeAxis = chart.axes.get(1);
});
</script>
</head>
<body>
</body>
</html>
官方example按天数走得，稍微修改了一下弄成了时分秒，按秒更新的（留存参考）
效果图：
Extjs 4 动态显示折线图 按秒显示的更多相关文章
- echarts、higncharts折线图或柱状图显示数据为0的点
echarts.higncharts折线图或柱状图只需要后端传到前端一段json数据,接送数据的x轴与y周有对应数据,折线图或柱状图就会渲染出这数据. 比如,x轴表示美每天日期,y轴表示数量.他们的数 ...
- 微信小程序echart 折线图legend不显示的问题
最近使用小程序echart折线图,遇到表头一直不显示问题,查询之后解决方案:
- echarts - 折线图 - 每秒刷新数据并显示
function randomData() { now = new Date(+now + oneDay); value = value + Math.random() * 21 - 10; var ...
- python 绘图---2D、3D散点图、折线图、曲面图
python中绘制2D曲线图需要使用到Matplotlib,Matplotlib 是一个 Python 的 2D绘图库,它以各种硬拷贝格式和跨平台的交互式环境生成出版质量级别的图形,通过 Matplo ...
- [Python Study Notes]折线图绘制
''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' ...
- excel怎么制作实线虚线混排的折线图
excel怎么制作实线虚线混排的折线图 excel怎么制作实线虚线混排的折线图?excel表格中想要设计的图表是实线的,想要让图标同时显示虚线和实线,该怎么操? 通常在在使用折线图描述数据的趋势时,前 ...
- react-echarts之折线图的显示
react中想要实现折线图和饼图的功能,需要引入react-echarts包,然后再实现折线图的功能.我这里引用的版本是:0.1.1.其他的写法参echarts官网即可.下面详细讲解的是我在react ...
- python中matplotlib画折线图实例（坐标轴数字、字符串混搭及标题中文显示）
最近在用python中的matplotlib画折线图,遇到了坐标轴 "数字+刻度" 混合显示.标题中文显示.批量处理等诸多问题.通过学习解决了,来记录下.如有错误或不足之处,望请指 ...
- excel在一个图表内，显示折线图和柱状图
折线图和柱状图,在同一个图表中拆分显示 一个图,设置主坐标轴 另外一个图,设置次坐标轴 拆分,通过调整纵坐标的最小值和最大值来实现 关于图表的标题,选中图表,选择布局,然后图表 ...
随机推荐
- 使用awstat分析Nginx的访问日志
在我的上一篇文章<使用 Nginx 提升网站访问速度>中介绍了 Nginx 这个 HTTP 服务器以及如何通过它来加速网站的访问速度.在实际的网站运营中,我们经常需要了解到网站的访问情况, ...
- HZAU 18——Array C——————【贪心】
18: Array C Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 586 Solved: 104[Submit][Status][Web Boar ...
- newInstance和new的区别(good)
从JVM 的角度看,我们使用关键字new创建一个类的时候,这个类可以没有被加载.但是使用newInstance()方法的时候,就必须保证:1.这个 类已经加载:2.这个类已经连接了.而完成上面两个步骤 ...
- Android界面编程--使用活动条（ActionBar）--添加Action View
ActionBar除了显示Action Item 外,还能显示普通的ui组件 2种方式添加Action View 1.指定ActionView的实现类 2.指定ActionView对应的视图资源 实现 ...
- oracle之数据同步：Oracle Sql Loader使用说明（大批量快速插入数据库记录）
1.准备表数据 select * from emp10; create sequence seq_eseq increment start maxvalue ; --得到序列的SQL语句 select ...
- javascript对象(3)
这个对象,不是那个对象,第三哦! 对象之间会存在继承,所以,来说一下他们之间存在的三种三种继承方式: 1.冒用继承 //创建了孙悟空构造函数 function Sun(change,weapon,gf ...
- 纯css 简单网页
<div id="wrapper"> <header> <section> <h1>Web Design<h1> < ...
- 003Linux常用命令
文件操作 01 命令 : list----列出目录信息 命令格式: ls [-选项] [目录] 选项 : -a --all 不忽略以"."开头的隐藏文件 : -d --direc ...
- 标头停止点不能位于宏或#if块中.
使用VS2010在项目中编写C++头文件**.h时提示: PCH 警告: 标头停止点不能位于宏或#if块中 原因:vs2010的智能感知要求.h必须以非#if系列的预编译指令打头 正确方法:将所有含有 ...
- XUtils3 的 环境搭建与简单使用
XUtils3 的 环境搭建 环境搭建三部曲 ----------------------- 说明 : author 修雨轩陈 使用andorid Studio 已经创建了一个项目 并且自己需要使用 ...