建议用chrome或firefox打开 ie有可能有兼容性问题
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>独乐不如众乐</title> <link href='http://cdn.sencha.io/ext-4.2.0-gpl/resources/css/ext-all.css' rel='stylesheet' type='text/css' /> <script type="text/javascript" charset="utf-8" src="http://cdn.sencha.io/ext-4.2.0-gpl/ext-all.js"></script> <script type="text/javascript"> Ext.onReady(function() { // 随机测试数据的生成 var generateData = (function() { var data = [], i = 0, last = false, date = new Date(2011, 1, 1), seconds = +date, min = Math.min, max = Math.max, random = Math.random; return function() { data = data.slice(); data.push({ date : Ext.Date.add(date, Ext.Date.DAY, i++), visits : min(100, max(last ? last.visits + (random() - 0.5) * 20 : random() * 100, 0)), views : min(100, max(last ? last.views + (random() - 0.5) * 10 : random() * 100, 0)), veins : min(100, max(last ? last.veins + (random() - 0.5) * 20 : random() * 100, 0)) }); last = data[data.length - 1]; return data; }; })(); var store = Ext.create('Ext.data.JsonStore', { fields : ['date', 'visits', 'views', 'veins'], data : generateData() }); var win = Ext.create('Ext.window.Window', { width : 800, height : 600, minHeight : 400, minWidth : 550, maximizable : true, title : 'Live Updated Chart', layout : 'fit', items : [{ xtype : 'chart', style : 'background:#fff', store : store, itemId : 'chartCmp', animate : true, // y轴 axes : [{ type : 'Numeric', minimum : 0, maximum : 100, position : 'left', fields : ['views', 'visits', 'veins'], title : 'Number of Hits', grid : { odd : { fill : '#dedede', stroke : '#ddd', 'stroke-width' : 0.5 } } }, // 时间轴 { type : 'Time', position : 'bottom', fields : 'date', title : 'Day', dateFormat : 'M d', constrain : true, fromDate : new Date(2011, 1, 1), toDate : new Date(2011, 1, 7) }], // 折线 series : [{ type : 'line', axis : ['left', 'bottom'], xField : 'date', yField : 'visits', label : { display : 'none', field : 'visits', renderer : function(v) { return v >> 0; }, 'text-anchor' : 'middle' }, markerConfig : { radius : 5, size : 5 } }, { type : 'line', axis : ['left', 'bottom'], xField : 'date', yField : 'views', label : { display : 'none', field : 'visits', renderer : function(v) { return v >> 0; }, 'text-anchor' : 'middle' }, markerConfig : { radius : 5, size : 5 } }, { type : 'line', axis : ['left', 'bottom'], xField : 'date', yField : 'veins', label : { display : 'none', field : 'visits', renderer : function(v) { return v >> 0; }, 'text-anchor' : 'middle' }, markerConfig : { radius : 5, size : 5 } }] }] }).show(); var chart, timeAxis; // 获取chart chart = win.child('#chartCmp'); // 获取时间轴 timeAxis = chart.axes.get(1); // store定期加载测试数据 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(timeAxis.fromDate, Ext.Date.DAY, 1); chart.markerIndex = markerIndex; } store.loadData(gs); }, 1000); }); </script> </head> <body> </body> </html>