标签：
<%@ 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按天数走得，稍微修改了一下弄成了时分秒，按秒更新的（留存参考）
效果图：
标签：
原文地址：http://www.cnblogs.com/shinubi/p/5207343.html
