您的位置：首页 > Web前端 > JavaScript

Extjs 4 动态显示折线图按秒显示

2016-02-22 15:40 597 查看

<%@ 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 动态显示折线图 按秒显示

Extjs 4 动态显示折线图按秒显示