Ext 拆线图 LiveAnimated

2025-02-09 技术教程

<!DOCTYPEhtml><htmlxmlns="http://www.w3.org/1999/xhtml"><head><title></title><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><metahttp-equiv="X-UA-Compatible"content="IE=edge"/><linkrel="stylesheet"type="text/css"href="./ext-4.2.1/css/ext-theme-classic-all.css"/><scripttype="text/javascript"src="./ext-4.2.1/bootstrap.js"></script><scripttype="text/javascript"src="./ext-4.2.1/ext-lang-zh_CN.js"></script><scripttype="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';varnumAxis,chart;vargenerateData=(function(n,floor){vardata=[],i=0;returnfunction(){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)});returndata;};})();varstore1=Ext.create('Ext.data.JsonStore',{fields:['num','unit','decade','hundreds'],data:generateData()});varinitr=setInterval(function(){vargs=generateData();varmin=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);varaxesRecords=[{type:"Numeric",fields:['unit','decade','hundreds'],position:"left",title:"NumberofHits",minimum:0,minorTickSteps:1,maximum:9},{type:"Numeric",fields:["num"],position:"bottom",minimum:1,minorTickSteps:1,maximum:10,title:"MonthoftheYear",aggregateOp:"sum",constrain:true,}]varseriesRecords=[{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){varaxesArr=[];for(vari=0;i<axesRecords.length;i++){varlabel=axesRecords[i].label?eval("("+axesRecords[i].label+")"):{};varaxis={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);}returnaxesArr;},createSeries:function(seriesRecords){varseriesArr=[];for(vari=0;i<seriesRecords.length;i++){varser={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);}returnseriesArr;},createChart:function(axesRecords,seriesRecords){varaxes=this.createAxes(axesRecords);varseries=this.createSeries(seriesRecords);varchart=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'}});returnchart;}});varwin=Ext.create('Ext.window.Window',{width:800,height:600,minHeight:400,minWidth:550,hidden:false,maximizable:true,title:'ColumnChart',autoShow:true,layout:'fit',tbar:[{text:'SaveChart',handler:function(){Ext.MessageBox.confirm('ConfirmDownload','Wouldyouliketodownloadthechartasanp_w_picpath?',function(choice){if(choice=='yes'){chart.save({type:'p_w_picpath/png'});}});}},{text:'ReloadData',handler:function(){store1.loadData(generateData());}}],items:newExt.custom.CustChart().createChart(axesRecords,seriesRecords)});chart=win.child("#chartCmp");numAxis=chart.axes.get(1);//store1.loadData(generateData());});</script></head><body><divid="mydiv"></div></body></html>