Ext 拆线图 LiveAnimated

发布时间：2020-06-11 11:25:00 作者：舜华
来源：网络阅读：472
<!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 p_w_picpath?', function(choice){  
							if(choice == 'yes'){  
								chart.save({  
									type: 'p_w_picpath/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>
Ext 拆线图 LiveAnimated

相关阅读
