<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!--ExtJs框架开始--> <link rel="stylesheet" type="text/css" href="./ext-4.2.1/css/ext-theme-classic-all.css" /> <script type="text/javascript" src="./ext-4.2.1/bootstrap.js"></script> <script type="text/javascript" src="./ext-4.2.1/ext-lang-zh_CN.js"></script> <!--ExtJs框架结束--> <script type="text/javascript"> Ext.onReady(function () { //QuickTips的作用是初始化标签中的Ext:Qtip属性,并为它赋予显示提示的动作。 Ext.QuickTips.init(); //TextField的提示方式为:在右边缘,如上图所示,参数枚举值为"qtip","title","under","side",id(元素id), //side方式用的较多,右边出现红色感叹号,鼠标上去出现错误提示。 Ext.form.Field.prototype.msgTarget = ‘side‘; var numAxis, chart; var generateData = (function(n, floor){ var data = [], i = 0; return function(){ data = data.slice(); data.push({ num: ++i, unit: Math.floor(Math.random()*10), decade: Math.floor(Math.random()*10), hundreds: Math.floor(Math.random()*10) }); return data; } ; })(); var store1 = Ext.create(‘Ext.data.JsonStore‘, { fields: [‘num‘, ‘unit‘, ‘decade‘, ‘hundreds‘], data: generateData() }); var initr = setInterval(function(){ var gs = generateData(); var min = numAxis.minimum , last = gs[gs.length-1].num, max = numAxis.maximum, markeIndex = chart.markerIndex || 0; if(max < last){ markerIndex =1 ; numAxis.maximum = last; numAxis.minimum = min+1; chart.markerIndex = markerIndex; } store1.loadData(gs); },1000); var axesRecords =[ {type:"Numeric",fields:[‘unit‘, ‘decade‘, ‘hundreds‘],position:"left",title:"Number of Hits" ,minimum:0,minorTickSteps:1,maximum:9}, {type:"Numeric",fields:["num"],position:"bottom",minimum:1,minorTickSteps:1,maximum:10, title:"Month of the Year",aggregateOp:"sum",constrain:true,} ] var seriesRecords = [ {type:"line",xfield:"num",yfield:"unit",axis:"left"}, {type:"line",xfield:"num",yfield:"decade",axis:"left"}, {type:"line",xfield:"num",yfield:"hundreds",axis:"left"} ] Ext.define("Ext.custom.CustChart",{ //创建坐标轴 createAxes:function(axesRecords){ var axesArr = []; for(var i = 0; i < axesRecords.length; i++){ var label = axesRecords[i].label?eval("("+axesRecords[i].label+")"):{}; var axis = { type : axesRecords[i].type, fields : axesRecords[i].fields, position : axesRecords[i].position, title : axesRecords[i].title, label : label, grid : axesRecords[i].grid?axesRecords[i].grid:true, aggregateOp:axesRecords[i].aggregateOp?axesRecords[i].aggregateOp:‘‘, constrain:axesRecords[i].constrain?axesRecords[i].constrain:false, maximum : axesRecords[i].maximum?axesRecords[i].maximum:10, minimum : axesRecords[i].minimum?axesRecords[i].minimum:0, minorTickSteps : axesRecords[i].minorTickSteps?axesRecords[i].minorTickSteps:1 }; axesArr.push(axis); } return axesArr; }, createSeries:function(seriesRecords){ var seriesArr = []; for(var i = 0; i < seriesRecords.length; i++){ var ser = { type : seriesRecords[i].type, xField : seriesRecords[i].xfield, yField : seriesRecords[i].yfield, axis : seriesRecords[i].axis, smooth : true, markerConfig: { type: ‘circle‘, size: 4, radius: 4,‘stroke-width‘: 0}, tips : { trackMouse : true,width : 200,height : 30, renderer : function(storeItem, item) { this.setTitle(storeItem.get(item.series.xField)+":"+item.series.yField+":"+storeItem.get(item.series.yField)); } }, label: { display: ‘under‘, field: seriesRecords[i].yfield, renderer: Ext.util.Format.numberRenderer(‘0‘), color: ‘#333‘ } }; seriesArr.push(ser); } return seriesArr; }, createChart:function(axesRecords,seriesRecords){ var axes = this.createAxes(axesRecords); var series = this.createSeries(seriesRecords); var chart =Ext.create("Ext.chart.Chart",{ animate: true,shadow : false,itemId:"chartCmp", store: store1, axes: axes, series:series, renderTo: Ext.getBody(), style: ‘background:#fff‘, legend: { position: ‘top‘ } }); return chart; } }); var win = Ext.create(‘Ext.window.Window‘, { width: 800, height: 600, minHeight: 400, minWidth: 550, hidden: false, maximizable: true, title: ‘Column Chart‘, autoShow: true, layout: ‘fit‘, tbar: [{ text: ‘Save Chart‘, handler: function() { Ext.MessageBox.confirm(‘Confirm Download‘, ‘Would you like to download the chart as an image?‘, function(choice){ if(choice == ‘yes‘){ chart.save({ type: ‘image/png‘ }); } }); } }, { text: ‘Reload Data‘, handler: function() { store1.loadData(generateData()); } }], items: new Ext.custom.CustChart().createChart(axesRecords,seriesRecords) }); chart = win.child("#chartCmp"); numAxis = chart.axes.get(1); //store1.loadData(generateData()); }); </script> </head> <body> <!-- 看啥看 --> <div id = "mydiv"></div> </body> </html>
本文出自 “RayGaditer” 博客,请务必保留此出处http://raygaditer.blog.51cto.com/9212738/1688475
原文地址:http://raygaditer.blog.51cto.com/9212738/1688475