`
sailei1
  • 浏览: 127615 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

ext

 
阅读更多 

var seat_store,type_store,OD_store,obj_store,timetype_store,hour_store;
var  fa_store,time_store;

Ext.onReady(function() {
	var yxsj="";
	time_store=new Ext.data.JsonStore({
		fields : ["id", "name"]	
	});
	fa_store=new Ext.data.JsonStore({
		fields : ["id", "name"]	
	});
	HighStock.getAllfa(function(data) {
		fa_store.loadData(data);
	})
	obj_store= new  Ext.data.JsonStore({
		fields : ["id", "name"]	,
	
	});
	obj2_store= new  Ext.data.JsonStore({
		fields : ["id", "name"]	,
	data : [{id : "0",
		name : "总客流合计",	
	},{id : "1",name : "上行客流合计",
		
	},{id : "2", name : "下行客流合计",	
	},{id : "3", name : "单OD",}]
	});
	
	OD_store= new  Ext.data.JsonStore({
		fields : ["name", "value"],
		data : [{name : "沪宁线",
				value : "5733",
			}]
	});
	hour_store= new  Ext.data.JsonStore({
		fields : ["name", "value"],
		data : [{name : "0500-0530",
				value : "1",
			},{name : "0530-0600",
				value : "2",
			}
			,{name : "0600-0630",
				value : "3",
			}
			,{name : "0630-0700",
				value : "4",
			}
			,{name : "0700-0730",
				value : "5",
			}
			,{name : "0730-0800",
				value : "6",
			}
			,{name : "0800-0830",
				value : "7",
			}
			,{name : "0830-0900",
				value : "8",
			}
			,{name : "0900-0930",
				value : "9",
			},{name : "0930-1000",
				value : "10",
			},{name : "1000-1030",
				value : "11",
			},{name : "1030-1100",
				value : "12",
			}
			,{name : "1100-1130",
				value : "13",
			}
			,{name : "1130-1200",
				value : "14",
			}
			,{name : "1200-1230",
				value : "15",
			}
			,{name : "1230-1300",
				value : "16",
			}
			,{name : "1300-1330",
				value : "17",
			}
			,{name : "1330-1400",
				value : "18",
			}
			,{name : "1400-1430",
				value : "19",
			},{name : "1430-1500",
				value : "20",
			},{name : "1500-1530",
				value : "21",
			},{name : "1530-1600",
				value : "22",
			}
			,{name : "1600-1630",
				value : "23",
			}
			,{name : "1630-1700",
				value : "24",
			}
			,{name : "1700-1730",
				value : "25",
			}
			,{name : "1730-1800",
				value : "26",
			}
			,{name : "1800-1830",
				value : "27",
			}
			,{name : "1830-1900",
				value : "28",
			}
			,{name : "1900-1930",
				value : "29",
			},{name : "1930-2000",
				value : "30",
			},{name : "2000-2030",
				value : "31",
			},{name : "2030-2100",
				value : "32",
			}
			,{name : "2100-2130",
				value : "33",
			}
			,{name : "2130-2200",
				value : "34",
			},{name : "2200-2230",
				value : "35",
			}
			,{name : "2230-2300",
				value : "36",
			}				
			]
	}); 
	timetype_store= new  Ext.data.JsonStore({
		fields : ["name", "value"],
		data : [{name : "按天",
			value : "day"},
			
			{name : "按半小时",
				value : "min",
			}]
	});
	type_store=new Ext.data.JsonStore({
		fields : ["name", "value"],
		data : [
		        {
				name : "全部",
				value : "all",
			},{
			name : "高铁",
			value : "G"
		}]
	});
	seat_store = new Ext.data.JsonStore({
		fields : ["name", "value"],
		data : [{
			name : "全部",
			value : "all",
		}, {
			name : "一等座",
			value : "M"			
		}, {
			name : "二等座",
			value : "O"
		}]
	});
	new Ext.Viewport({

		layout : "border",
		items : [ {
			region : "north",
			height : 79,
			title : "预测精度监视/配置调整综合控制",
			xtype : 'tabpanel',
			activeTab:0,
			items : [{	title : 'OD客流方式',
				tbar:[{xtype : 'label',text:'线路/区段选择: '},{xtype : 'combo',id:'where1', emptyText:'请选择',
					 store:OD_store,mode : "local",triggerAction : "all",editable : false,
						selectOnFocus : true, displayField : "name",valueField : "value",
						listeners : {
							select : function() {
								var id = Ext.getCmp('where1').getValue();
								Ext.getCmp('where2').disable();
								Ext.getCmp('where6').disable();
								//alert(id);
								HighStock.getobj(id,function(data) {
									obj_store.loadData(data);
								});
								}},
						},
				      {xtype : 'label',text:'分析对象选择: '},
				      {xtype : 'combo',id:'where7', 
							 store:obj2_store,mode : "local",triggerAction : "all",editable : false,
								selectOnFocus : true, displayField : "name",valueField : "id",
									listeners : {
										select : function() {
											var id = Ext.getCmp('where7').getValue();
											//alert(id);
										if(id==3){
											Ext.getCmp('where2').enable(); 
										}else{
											Ext.getCmp('where2').disable(); 
										}
											}},
									},
				      {xtype : 'combo',id:'where2',emptyText:'请选择',
				    	  store:obj_store,mode : "local",triggerAction : "all",editable : false,
							selectOnFocus : true, displayField : "name",valueField : "id"},
				      {xtype : 'label',text:'列车等级选择:  '},{xtype : 'combo',id:'where3', value :'全部',
				    	  store:type_store,mode : "local",triggerAction : "all",editable : false,
							selectOnFocus : true, displayField : "name",valueField : "value"
				    	  },
				      {xtype : 'label',text:'座位等级选择:  '},{xtype : 'combo',value :'全部',id:'where4',
							store:seat_store,mode : "local",triggerAction : "all",editable : false,
							selectOnFocus : true, displayField : "name",valueField : "value"},
				],
			bbar : [{xtype : 'label',text:'数据统计时间单位:'},{xtype : 'combo',id:'where5', value :'按天',
				 store:timetype_store,mode : "local",triggerAction : "all",editable : false,
					selectOnFocus : true, displayField : "name",valueField : "value",
					listeners : {
						select : function() {
							var id = Ext.getCmp('where5').getValue();
							//alert(id);
						if(id=='day'){
							Ext.getCmp('where6').enable(); 
						}else{
							Ext.getCmp('where6').disable(); 
						}
							}},
					},
					{xtype : 'label',text:'指定时段:'},
					{xtype : 'combo',id:'where6', emptyText:'请选择',
						 store:hour_store,mode : "local",triggerAction : "all",editable : false,
							selectOnFocus : true, displayField : "name",valueField : "value"},

							{xtype:"button",id:"btnEnter",text:"<font color='blue'>生成图表</font>",
								 listeners:{
					                  "click":function(){
					                	  var xl = Ext.getCmp('where1').getValue();
					                	  var OD= Ext.getCmp('where2').getValue();
					                	  var train= Ext.getCmp('where3').getValue();
					                	  var seat= Ext.getCmp('where4').getValue();
					                	  alert(xl+OD+train+seat);
					                  }
					              },
								}
			        ]
				},
//			         {title : '区段客流密度方式',
//					tbar:[
//					      {xtype : 'label',text:'线路/区段选择: '},{xtype : 'combo',emptyText:'请选择',
//						 store:OD_store,mode : "local",triggerAction : "all",editable : false,
//							selectOnFocus : true, displayField : "name",valueField : "value"},
//					      {xtype : 'label',text:'列车等级选择: '},{xtype : 'combo',value :'全部',
//								store:type_store,mode : "local",triggerAction : "all",editable : false,
//								selectOnFocus : true, displayField : "name",valueField : "value"
//					    	  },
//					      {xtype : 'label',text:'座位等级选择: '},{xtype : 'combo',value :'全部',
//								store:seat_store,mode : "local",triggerAction : "all",editable : false,
//								selectOnFocus : true, displayField : "name",valueField : "value"},
//					      ],
//					      bbar : [{}],
//					}
			         ]
		},

		{
			region : "south",
         
			height : 50,
			html:'上海至苏州单OD的误差 为11%， 超出标准值5个百分点，建议调整预测配置',
			title : "<font color='red'>预警表示区域</font>"
		},

		{
			region : "center",
			width : 10000,
			height : 520,
			xtype : 'panel',
			items:[{
				html:'<div id="chart" style="width:100%;height:520px; margin: 0 auto"></div>'
			}],
			autoScroll:true,
			titleCollapse:true,
			title : "图表展示"
		},

		{
			region : "west",

			width : 160,
			height : 450,
			xtype : 'tabpanel',
			activeTab:0,
			items : [{
				title : '方案调整',
				items:[{tbar:[
				              {xtype : 'label',text:'方案选择: ' ,  autoWidth:true},
				              {xtype : 'combo',id:'plan',
									store:fa_store,mode : "local",triggerAction : "all",editable : false,
									selectOnFocus : true, displayField : "name",valueField : "id",width:120,
									listeners : {
										select : function() {
											id = Ext.getCmp('plan').getValue();
											HighStock.getTime(id,function(data) {
												Ext.getCmp('yxsj').setText('有效日期:'+data,true);
												//Ext.getCmp('cj').setText('场景:平时稳态',true);
												 myMask = new Ext.LoadMask("chart", {
														msg : "运算中，请稍候......"
													});
											});
											
											}},
									},
						 ]},
						 
						 {xtype : 'label',id:'yxsj',text:'有效日期:',}, 
						 
						
				]
			},
//			{
//				title : '数据修改',
//				items:[{xtype : 'label',text:'日期：'},
//				       {xtype : 'combo',emptyText:'2011-06-20'},
//				       {xtype : 'radio',boxLabel:'时间段方式：'},
//				       {xtype : 'combo',emptyText:'0600-0630'},
//				       {xtype : 'radio',boxLabel:'OD方式：'},
//				       {xtype : 'combo',emptyText:'上海-苏州'},
//				       {xtype : 'button',text:'数据修改>>'},
//				       {xtype : 'button',text:'数据保存<<'},
//				]
//			}
			],
			title : "左边面板"
		},

		{
			region : "east",

			width : 160,

			title : "对比分析信息表示区域",
			html:' <div id="show" >&nbsp;</div> '
		}

		]

	});	
	 myMask = new Ext.LoadMask("chart", {
		msg : "运算中，请稍候......"
	});
	myMask.show();
	var xList = new Array();
	var trueList= new Array();
	var guessList = new Array();
	var errorList=new Array();
	HighStock.getDateList(function(dateList){
		HighStock.getDateStringList(function(dateStringList){
			HighStock.getAllMapList(function(data) {
         
				for(var j=0;j<dateList.length;j++){
				//for(var j=0;j<1;j++){
					for(var i=0;i<data[dateStringList[j]].xList.length;i++){     //data[dateStringList[j]].xList.length 时间段
						
						var x=null;
						if(i%2==1){
						x=Date.UTC(dateList[j][0],dateList[j][1]-1,dateList[j][2],i/2+6,0);}
						else{
						x=Date.UTC(dateList[j][0],dateList[j][1]-1,dateList[j][2],i/2+5,30);}
						xList.push(data[dateStringList[j]].xList[i]);
						trueList.push([x,parseInt(data[dateStringList[j]].trueList[i])]);
						guessList.push([x,parseInt(data[dateStringList[j]].guessList[i])]);
						var tempTrue=parseInt(data[dateStringList[j]].trueList[i]);
						if(parseInt(data[dateStringList[j]].trueList[i])==0)tempTrue=1;
						
						temp=(parseInt(data[dateStringList[j]].guessList[i])-parseInt(data[dateStringList[j]].trueList[i]))/tempTrue*100;
						errorList.push([x,Math.round(temp*100)/100]);
					}

				}
				Array.prototype.indexOf=function(v) 
				{ 
				      for(var   i   in   this) 
				      { 
				            if(this[i]==v)   return   i; 
				      } 
				      return   -1; 
				}; 
				
				var chart = new Highcharts.StockChart({
					chart : {
						renderTo : 'chart',
						alignTicks: false,
						defaultSeriesType: 'line'//可选，默认为line。控制线条样式，line:折线;spline:平滑的线;area:折线、下边有颜色块儿;areaspline:平滑的线、下边有颜色块儿;column:柱状图;bar:横向条形图;pie:饼图;scatter:点状图;
					},
					global: {
						useUTC: true
					},
					title: {
						text: '数据对比分析图'
					},
					xAxis : {
						 type: 'datetime',
					        maxZoom:  3600000,
					        title: {
					            text: '日期'
					        }	
					},
					yAxis : [ {
						title : {
							text : '客流量（人）'
						},
						height : 200,
						lineWidth : 2
					}, {
						title : {
							text : '预测误差（%）'
						},
						labels: {
							formatter: function() {
								return this.value +'%'
							}
						},
						top : 300,
						height : 80,
						offset : 0,
						lineWidth : 2
					} ],
					navigator : {
						enabled : true
					},
					
					tooltip : {
						formatter: function(){
				            var point = this.points[0], 
								series = point.series, 
								unit = series.unit && series.unit[0], 
								format = '%A,%Y-%b-%e %H:%M', // with hours
				 				s;
                            var div=document.getElementById('show');
	                    	
	                    	
				            var temp=Highcharts.dateFormat(format,this.x);
				          
				            
				            
				            if (unit == 'day') { // skip hours
				                format = '%A,%Y-%b-%e';
				            }
				            var color="red";
				           if(parseInt(Highcharts.numberFormat(this.points[2].y, 1))<0) color="green"; else if(parseInt(Highcharts.numberFormat(this.points[2].y, 1))==0) color="black";
				            var html= '<b>' +temp+'</b>' +
				            
				            	'<br/><span style="color:' + this.points[0].series.color + '">'+this.points[0].series.name+': </span>' + Highcharts.numberFormat(this.points[0].y, 0) +'人'+
				            	'<br/><span style="color:' + this.points[1].series.color + '">'+this.points[1].series.name+': </span>' + Highcharts.numberFormat(this.points[1].y, 0) +'人'+
				            	//'<br/><span style="color:black">'+'相差人数'+': </span>' + Math.abs(parseInt(this.points[1].y)-parseInt(this.points[0].y)) +'人'+
				            	'<br/><span style="color:' + this.points[2].series.color + '">'+this.points[2].series.name+': </span><span style="color:' +color + '">'+Highcharts.numberFormat(this.points[2].y, 2) +'%</span>';
				           
				            var lenth=trueList.indexOf(this.x+","+this.points[0].y); 
				           if(lenth!=-1){
				        	   console.log(lenth);
					           var data=errorList[lenth];
					           var data2=errorList[lenth-1];
					           var data3=errorList[lenth-2];
					           console.log(data);
				            div.innerHTML='当前日期：'+temp+ '<br/> 前1：'+  data[1]+ '<br/> 前2：'+  data2[1]+ '<br/> 前3：'+  data3[1] ;}
				            return html;
						},
						shared : true,
						crosshairs:[{//控制十字线
							width:1,
							color:"red",
							dashStyle:"shortdot"
						},
						{
							width:1,
							color:"red",
							dashStyle:"shortdot"
						}]
					},
					plotOptions:{//绘图线条控制
						line:{
							marker:{
								enabled:false//是否显示点
							}
						},
						series: {
							cursor: 'pointer',
							point: {
								events: {
									click: function() {
										var str="人";
										var temp="客流量:";
										if(this.series.name=="预测误差"){str="%";temp="误差率:"};
										hs.htmlExpand(null, {
											pageOrigin: {
												x: this.pageX, 
												y: this.pageY
											},
											headingText: this.series.name,
											maincontentText: Highcharts.dateFormat('%A,%Y年 %b月 %e 号', this.x) +':<br/> '+temp+ 
											this.y +str,
											width: 200
										});
									}
								}
							},
							marker: {
								lineWidth: 1
							}
						}
					},
					rangeSelector : {
						enabled:true,
						buttons : [ {
							type : 'hour',
							count : 18,
							text : '一天'
						}, 
						{
							type : 'day',
							count : 7,
							text : '一周'
						},{
							type : 'all',
							text : '全部'
						}
						],
						selected : 1,
						inputEnabled : true
					},
					legend: {
						enabled:true,
						layout: 'vertical',
						verticalAlign: 'top',
						align: 'right',
						x:0,
						y:100,
						verticalAlign: 'top',
						borderWidth: 1,
						shadow:true
					},
					series : [ {
						name : '真实数据',
						data :trueList
					}, {
						name : '预测数据',
						data :guessList
					} , {
						type : 'column',
						name : '预测误差',
						data : errorList,
						yAxis : 1
					} ]
				});
			});
		});
	});
	

});
分享到：
| EXT控件类型
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Windows读写Ext2/Ext3/Ext4文件系统

    可以读写Ext2，以Ext2方式挂载Ext3文件系统（不支持Ext3日志），不支持中文！ It provides Windows NT4.0/2000/XP/2003/Vista/2008 with full access to Linux Ext2 volumes (read access andwrite access). This ...

    ext3.jar ext使用非常多

    EXT，全称EXT JS，是一种基于JavaScript的开源前端框架，主要应用于构建富互联网应用程序（Rich Internet Applications，简称RIA）。EXT3.jar是EXT框架的一个版本，它包含EXT库的Java版本，通常用于Java Web应用程序...

    Windows读取Ext4分区的工具 Ext2Read

    1. **支持多种EXT文件系统**: Ext2Read不仅支持EXT2，还支持更先进的EXT3和EXT4文件系统。EXT4是目前Linux发行版广泛采用的文件系统，其特点是速度快、支持大文件和大量文件。 2. **查看与复制**: 用户可以像在...

    在windows下使用Ext2Fsd访问EXT4分区

    在Windows操作系统中，由于默认不支持Linux文件系统如EXT4，因此无法直接读取或写入EXT4格式的分区。但有一些第三方工具可以帮助我们解决这个问题，其中之一就是Ext2Fsd。Ext2Fsd是一个免费的开源软件，专门设计用于...

    ext4_utils

    《深入理解ext4_utils：三星线刷ROM打包利器》 在Android系统开发和维护领域，三星线刷ROM的打包工具ext4_utils是一个不可或缺的实用程序。这个工具集专注于处理ext4文件系统，一种广泛用于Linux内核的高性能日志...

    Ext2IFS windows

    标题中的"Ext2IFS windows"表明我们正在讨论一个与Windows操作系统相关的软件，该软件的主要功能是支持挂载Linux的ext文件系统。在Windows环境中，通常无法直接读取或写入Linux系统的ext2、ext3或ext4分区，而Ext2...

    ext4文件系统源码

    EXT4，全称为Fourth Extended File System，是Linux操作系统中广泛使用的日志文件系统之一，它在2008年被引入Linux内核。EXT4在EXT3的基础上进行了多项改进，以提升性能、可靠性和可扩展性。这个源码包包含了EXT4...

    Windows 7下使用Ext2Fsd读取写入Linux Ext3&Ext4分区文件

    在Windows操作系统中，由于文件系统不兼容性，通常无法直接访问Linux系统中的Ext3或Ext4分区。然而，有了第三方工具如Ext2Fsd，Windows用户可以实现对这些Linux文件系统的读取和写入操作。本文将详细介绍如何在...

    EXT安装包4.2.1-1

    EXT4.2.1是一个广泛使用的JavaScript框架，主要用于构建用户界面和富互联网应用程序（RIAs）。这个安装包可能包含了EXT的各个组件、示例、文档和必要的库文件，以帮助开发者快速搭建功能丰富的Web应用。 EXT的核心...

    Windows读写Ext2/Ext3/Ext4文件系统4

    支持Ext2/Ext3/Ext4, HFS 和 ReiserFS，只读。 There are a number of evident merits of the program, which you should know. First of all,DiskInternals Linux Reader is absolutely free. Secondly, the ...

    ext4解压工具和操作方法.rar

    包含3个工具：make_ext4fs、simg2img、kusering.sh。 1. 解压system.img为system.img.ext4。命令：simg2img system.img system.img.ext4 2. 创建system.img.ext4挂载目录tmp； 命令：mkdir tmp； 3. 挂载system....

    ext4-util源代码——制作make_ext4fs和simg2img工具

    在Android系统中，对设备进行刷机或者系统更新时，经常需要处理ext4文件系统。本文将深入探讨如何使用`ext4-utils`工具集来创建`make_ext4fs`和`simg2img`这两个关键工具，这对于理解Android系统底层工作原理以及...

    ext4-exactor.zip

    在Android系统中，EXT4文件系统是广泛使用的主文件系统，用于存储应用程序、系统文件和其他数据。EXT4-extractor是一个专为Android设计的工具，它能够帮助开发者和故障排除人员解析EXT4格式的镜像文件，将其转换为一...

    基于EXT2.0.2表格间数据拖拽

    EXT是一个流行的JavaScript库，特别适用于构建富客户端应用。EXT2.0.2是EXT库的一个较早版本，它提供了一套完整的组件系统，包括表格（Grid）、面板（Panel）、窗口（Window）等，用于创建复杂的Web界面。在这个特定...

    android ext4文件系统打包详解

    在Android开发中，ext4文件系统打包是系统镜像制作的重要一环。本文档将详细介绍在Android平台上使用make_ext4fs工具打包ext4文件系统镜像的过程，并对相关的操作注意事项进行说明。同时，文档也会涉及使用simg2img...

    Ext.Store的获取方法

    在Ext.js中，`Ext.Store`是用来管理数据的类，它通常与各种UI组件（如Grid、ComboBox等）关联，用于存储和检索数据。然而，获取`Ext.Store`的方式并不像获取其他Ext组件那样直接，因为Store并不是一个具有可视界面的...

    Ext 4.0官方最新版下载

    Ext 4.0是Sencha公司开发的一个JavaScript框架的重要版本，专用于构建富客户端Web应用程序。这个框架基于组件模型，提供了丰富的用户界面组件和强大的数据管理能力，使得开发者能够创建功能强大、交互性强的Web应用...

    make_ext4fs.zip

    《深入理解make_ext4fs：构建EXT4文件系统的利器》 在Linux系统中，EXT4文件系统因其高效、稳定和广泛支持的特点，被广泛应用。在开发和维护过程中，有时我们需要手动创建EXT4文件系统，这时就需要用到`make_ext4fs...

    不错的ext日志管理系统

    EXT日志管理系统是一款高效、强大的日志管理工具，专为处理和分析大量系统、应用程序或网络设备的日志数据而设计。EXT在日志管理领域的应用广泛，尤其对于开发者和运维人员来说，它提供了便捷的方式来监控、排查问题...

    ext.net 1.x DEMO

    **EXT.NET 1.x 框架介绍** EXT.NET 是一个基于 .NET 平台的 Web 开发框架，它提供了一套丰富的用户界面组件，使得开发者可以构建出交互性强、性能优秀的网页应用。EXT.NET 1.x 版本是早期的一个稳定版本，包含了...

Magicbox
Global site tag (gtag.js) - Google Analytics