FLEX 图表

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
      xmlns:s="library://ns.adobe.com/flex/spark"
      xmlns:mx="library://ns.adobe.com/flex/mx"
      minWidth="955" minHeight="600"
      creationComplete="initApp()" >
 <fx:Script>
  <![CDATA[
   import com.adobe.serialization.json.JSON;
   
   import mx.charts.series.items.LineSeriesItem;
   import mx.collections.ArrayCollection;
   import mx.collections.IList;
   import mx.controls.Alert;
   import mx.events.FlexEvent;
   import mx.events.ResizeEvent;
   import mx.rpc.events.FaultEvent;
   import mx.rpc.events.ResultEvent;
   
   import spark.events.DropDownEvent;
   
   private var goog:Boolean = true;
   [Binable]
   private var Qstcd:String = "";
   [Binable]
   private var Qbtime:String = "";
   [Binable]
   private var Qetime:String = "";
   public var pagecount:int=15;//表示每页记录的条数,默认10条,可以由用户自行定义
   public var curpage:int = 0;//当前的页码
   public var totalpage:int = 0;//一共的页数
   public var totalcount:int;//一共的记录条数
   [Bindable]
   private var griddata:ArrayCollection = new ArrayCollection();
   [Bindable]
   private var chardata:ArrayCollection = new ArrayCollection();
   private var QstrVirtualAppName:String = "";
   [Bindable]
   private var clientHeight:Number ;
   [Bindable]
   private var clientWidth:Number ;
   [Bindable]
   private var element:Object = new Object();
   [Bindable]
   private var maxz:Number ;
   [Bindable]
   private var minz:Number;
   [Bindable]
   private var maxq:Number;
   [Bindable]
   private var minq:Number;
   private function resize_handler(event:Event):void{
    clientHeight = ExternalInterface.call("function(){return document.body.clientHeight;}");
    clientWidth = ExternalInterface.call("function(){return document.body.clientWidth;}");
   }
   /**
    * 初始化方法
    */
   private function initApp():void
   {
    this.element = getParams();
    this.addEventListener(ResizeEvent.RESIZE,resize_handler);
    clientHeight = ExternalInterface.call("function(){return document.body.clientHeight;}");
    clientWidth = ExternalInterface.call("function(){return document.body.clientWidth;}");
    
    //获取应用虚拟目录
    var strVirtualAppName:String = ExternalInterface.call("window.location.href.substring", 0);
    strVirtualAppName = strVirtualAppName.replace("http://","");
    var aryTemp:Array = strVirtualAppName.split("/");
    if(aryTemp.length>=1){
     strVirtualAppName = aryTemp[1].toString();
    }
    QstrVirtualAppName = strVirtualAppName;
    
    //向服务器请求测站数据
    //var strUrl2:String = "http://localhost:8100/cjst/sjwh.do?method=getStbprpBList";
    var strUrl2:String = "/"+QstrVirtualAppName+"/sjwh.do?method=getStbprpBList";
    service2.url = strUrl2;
    service2.send();
   }
   
   /**
    * 图表全屏显示
    **/
   protected function char_date_doubleClickHandler(event:MouseEvent):void
   {
    var clientHeight:Number = ExternalInterface.call("function(){return document.body.clientHeight;}");
    var clientWidth:Number = ExternalInterface.call("function(){return document.body.clientWidth;}");
    if(goog == true){
     this.vboxCondition.height = 0;
     this.panel_data.height = 0;
     this.char_date.height = clientHeight - 20;
     
     goog = false;
    }else{
     this.vboxCondition.height = 30;
     this.panel_data.height = 180;
     this.char_date.height = clientHeight - 210;
     goog  = true;
    }
   }
   
   /**
    * 选择stnm
    */
   protected function cbxStnm_closeHandler(event:DropDownEvent):void
   {
    Qstcd = ComboBox(event.target).selectedItem.stcd;
   }
   
   /**
    * 查询
    */
   protected function btnSelect_clickHandler(event:MouseEvent):void
   {
    this.Qetime = this.dfEtime.text;
    this.Qbtime = this.dfStime.text;
    gridServcieSend(this.Qbtime,this.Qetime,this.Qstcd,0,pagecount);
    charServcieSend(this.Qbtime,this.Qetime,this.Qstcd);
   }
   
   /**
    * 重置
    */
   protected function btnrefse_clickHandler(event:MouseEvent):void
   {
    this.dfEtime.text = "";
    this.dfStime.text = "";
   }
   
   /**
    * 页面跳转
    */
   public function setPager(value:int):void
   {
    if(value<0 || value>totalpage-1) return;
    this.curpage = value;
    var curNum:int = value*pagecount;//计算出要跳转到的页面种的第一条记录在所有的记录种是第几条记录
    gridServcieSend(this.Qbtime,this.Qetime,this.Qstcd,curNum,pagecount);
   }
   /**
    * 向服务器请求grid的实测数据
    */
   protected function gridServcieSend(startTime:String = "",endTime:String = "",stcd:String = "",start:int = 0,limit:int = 15):void{
    //var strUrl:String = "http://localhost:8100/cjst/sjwh.do?method=river_r_list&stcd="+stcd+"&btime="+startTime+"&etime="+endTime+"&start="+start+"&limit="+limit;
    var strUrl:String = "/"+QstrVirtualAppName+"/sjwh.do?method=river_r_list&stcd="+stcd+"&btime="+startTime+"&etime="+endTime+"&start="+start+"&limit="+limit;
    
    service.url = strUrl;
    service.send();
   }
   /**
    * 向服务器请求char的实测数据
    */
   protected function charServcieSend(startTime:String = "",endTime:String = "",stcd:String = "",start:int = 0,limit:int = 15):void{
    //var strUrlchar:String = "http://localhost:8100/cjst/sjwh.do?method=river_r_list&stcd="+stcd+"&btime="+startTime+"&etime="+endTime;
    var strUrlchar:String = "/"+QstrVirtualAppName+"/sjwh.do?method=river_r_list&stcd="+stcd+"&btime="+startTime+"&etime="+endTime;
    service3.url = strUrlchar;
    service3.send();
   }
   //实测数据加载完成--datagrid and char
   private function onJSONLoad(event:ResultEvent):void{
    var rawData:String = String(event.result); 
    var arr:Array = (JSON.decode(rawData).root as Array); 
    this.griddata  = new ArrayCollection(arr);
    this.totalcount = Number(JSON.decode(rawData).totalProperty);
    this.totalpage = (totalcount + pagecount - 1) / pagecount;
    pagedetail.text = "第"+(curpage+1)+"页/共"+totalpage+"页   共"+totalcount+"条记录";
   }
   //测站数据加载完成---combox
   private function comboxDataLoad(event:ResultEvent):void{
    var rawData:String = String(event.result); 
    var arr:Array = (JSON.decode(rawData).root as Array); 
    var dp:ArrayCollection = new ArrayCollection(arr);
    
    cbxStnm.dataProvider = dp;
    var flag:Boolean = true;
    for(var i:int =0;i<dp.length;i++){
     if(dp.getItemAt(i).stcd== element.stcd){
      this.cbxStnm.selectedIndex = i;
      this.Qstcd = dp.getItemAt(i).stcd;
      flag = false;
     }
    }
    if(flag){
     this.cbxStnm.selectedIndex = 0;
     this.Qstcd = dp.getItemAt(0).stcd;
    }
    var timeend:Date = new Date();
    var n:Number = 1000*60*60*24*10;
    var timestart:Date = new Date(timeend.time - n);
    
    this.dfStime.text = dateFormatter2.format(timestart);
    this.dfEtime.text = dateFormatter2.format(timeend);
    if(element.stcd=="" || typeof(element.stcd)=="undefined"){
     gridServcieSend(dateFormatter.format(timestart),dateFormatter.format(timeend),this.Qstcd,0,pagecount);
     charServcieSend(dateFormatter.format(timestart),dateFormatter.format(timeend),this.Qstcd);
    }else{
     gridServcieSend(dateFormatter.format(timestart),dateFormatter.format(timeend),element.stcd,0,pagecount);
     charServcieSend(dateFormatter.format(timestart),dateFormatter.format(timeend),element.stcd);
    }
   }
   //char实测数据加载完成
   private function charDataLoad(event:ResultEvent):void{
    var rawData:String = String(event.result); 
    var arr:Array = (JSON.decode(rawData).root as Array); 
    this.maxz = JSON.decode(rawData).maxZ;
    this.maxq = JSON.decode(rawData).maxQ;
    this.minz = JSON.decode(rawData).minZ;
    this.minq = JSON.decode(rawData).minQ;
    this.chardata  = new ArrayCollection(arr);
   }
   private function axisDateLabel(categoryValue:Object, previousCategoryValue:Object, axis:CategoryAxis, categoryItem:Object):String
   {
    var strs:Array = dateFormatterAbbr.format(categoryValue).split("/");
    return strs[0]+"/n"+strs[1]+"/n"+strs[2];
   }
   private function dataTipFunc(item:Object):String {
    var cSI:LineSeriesItem = item.chartItem as LineSeriesItem;
    var str:String =  "<font size='12'>"+item.element.displayName+"<br>年份:"+cSI.item.tm+ "<br>";
    if(item.element.displayName == "水位"){
     str += "水位:"+cSI.item.z;
    }else{
     str += "流量:"+cSI.item.q;
    }
    str+="</font>";
    return str;
   }
   //得到url参数
   private function getParams():Object {
    var params:Object;
    params = {};
    var query:String = ExternalInterface.call("window.location.search.substring", 1);
    if(query) {
     var pairs:Array = query.split("&");
     for(var i:uint=0; i < pairs.length; i++) {
      var pos:int = pairs[i].indexOf("=");
      if(pos != -1) {
       var argname:String = pairs[i].substring(0, pos);
       var value:String = pairs[i].substring(pos+1);
       params[argname] = value;
      }
     }
    }
    return params;
   }
  ]]>
 </fx:Script>
 <s:layout>
  <s:VerticalLayout horizontalAlign="center"/>
 </s:layout>
 <fx:Declarations>
  <mx:HTTPService id="service" resultFormat="text" result="onJSONLoad(event)"  />
  <mx:HTTPService id="service2" resultFormat="text" result="comboxDataLoad(event)" />
  <mx:HTTPService id="service3" resultFormat="text" result="charDataLoad(event)" />
  <mx:SolidColor id="sc1" color="blue" alpha=".3"/> 
  <mx:DateFormatter id="dateFormatterAbbr" formatString="MM/DD/HH" />
  <mx:Sequence id="itemsChangeEffect1">
   <mx:Blur blurYTo="12" blurXTo="12" duration="300" perElementOffset="150" filter="removeItem"/>
   
   <!-- Define the effects -->
   <mx:Parallel id="showEffects">
    <mx:WipeRight duration="5000"/>
    <mx:Pause duration="1000" />
    <mx:Blur startDelay="410" blurXFrom="18" blurYFrom="18" blurXTo="0" blurYTo="0" duration="300" filter="addItem"/>  
    <mx:Dissolve id="dissolveIn" duration="1000" alphaFrom="2.0" alphaTo="3.0"/>
    
    <mx:Fade alphaFrom="10" alphaTo="10" duration="5000"/>
   </mx:Parallel>
  </mx:Sequence>
  <mx:DateFormatter id="dateFormatter"
        formatString="YYYY-MM-DD HH:NN:SS" />
  <mx:DateFormatter id="dateFormatter2"
        formatString="YYYY-MMDD" />
 </fx:Declarations>
 
 <mx:VDividedBox id="vdividedbox_main" textAlign="center" height="{this.clientHeight}" width="{this.clientWidth}">
  <mx:VBox width="100%"  paddingTop="5" id="vboxCondition" height="30">
   <s:Group width="100%">
    <s:layout>
     <s:HorizontalLayout horizontalAlign="center"/>
    </s:layout>
    <s:Label text="选择测站" textAlign="left"  />
    <s:ComboBox id="cbxStnm" labelField="stnm" close="cbxStnm_closeHandler(event)" />
    <s:Label text="开始时间"/>
    <mx:DateField id="dfStime" yearNavigationEnabled="true"/>
    <s:Label text="结束时间"/>
    <mx:DateField id="dfEtime" yearNavigationEnabled="true"/>
    <mx:Button label="确定" id="btnSelect" click="btnSelect_clickHandler(event)"/>
    <mx:Button label="重置" id="btnrefse" click="btnrefse_clickHandler(event)"/>
   </s:Group>
  </mx:VBox>
  <mx:HBox id="char_date" width="100%" height="{this.clientHeight-210}" textAlign="center" doubleClickEnabled="true" doubleClick="char_date_doubleClickHandler(event)">
   <mx:LineChart seriesFilters="{[]}" dataProvider="{chardata}"  id="linechart1" width="100%" height="{char_date.height}" dataTipFunction="dataTipFunc"  showDataTips="true">
    <mx:horizontalAxis>
     <mx:CategoryAxis id="h1" categoryField="tm_source"  title="日期(月 日 时)" labelFunction="axisDateLabel" />
    </mx:horizontalAxis>
    
    
    
    
    <!-- horizontal axis renderer 横轴渲染器-->
    <mx:horizontalAxisRenderers>
     <mx:AxisRenderer placement="bottom" labelRotation="{90}" axis="{h1}"/> 
    </mx:horizontalAxisRenderers>
    <!-- vertical axis renderer 竖轴渲染器-->
    <mx:verticalAxisRenderers>
     <mx:AxisRenderer placement="right" axis="{second}" labelRotation="30"/>
     <mx:AxisRenderer placement="left" axis="{first}" labelRotation="30"/>
    </mx:verticalAxisRenderers>
    
    <mx:series> 
     <mx:LineSeries  showDataEffect="showEffects" yField="q" form="curve" displayName="流量">
      <mx:verticalAxis> 
       <mx:LinearAxis  id="second" minimum="{this.minq -100}" maximum="{this.maxq +100}" title="流量(立方米/秒)"/> 
      </mx:verticalAxis> 
      <mx:lineStroke>
       <mx:Stroke
        color="red"
        weight="1"
        alpha="1"
        />
      </mx:lineStroke>
     </mx:LineSeries>
     <mx:LineSeries showDataEffect="showEffects"  yField="z" form="curve" displayName="水位" >
      <mx:verticalAxis> 
       <mx:LinearAxis  id="first" minimum="{this.minz -10}" maximum="{this.maxz + 10}" title="水位(米)"/> 
      </mx:verticalAxis>
      <mx:lineStroke>
       <mx:Stroke
        color="blue"
        weight="1"
        alpha="2"
        />
      </mx:lineStroke>
     </mx:LineSeries>
    </mx:series> 
   </mx:LineChart>
   <mx:VBox height="100%">
    <mx:Legend dataProvider="{linechart1}"  direction="vertical"
         labelPlacement="right"  />
    
    
    
    
   </mx:VBox>
  </mx:HBox>
  <mx:Panel title="实测数据列表" width="100%" height="180" headerHeight="30" id="panel_data">
   <mx:DataGrid id="grid" dataProvider="{griddata}" width="100%" height="{panel_data.height-70}" >
    <mx:columns>
     <mx:DataGridColumn dataField="stcd" headerText="测站编号"/>
     <mx:DataGridColumn dataField="stnm" headerText="测站名称"/>
     <mx:DataGridColumn dataField="tm" headerText="时间"/>
     <mx:DataGridColumn dataField="z" headerText="水位"/>
     <mx:DataGridColumn dataField="q" headerText="流量"/>
    </mx:columns>
   </mx:DataGrid>
   <mx:HBox width="100%" horizontalAlign="left" verticalAlign="middle" height="30">
    <!--<mx:LinkButton label="全选"/>
    <mx:LinkButton label="全不选"/>-->
    <mx:Spacer width="100%" height="1"></mx:Spacer>
    <mx:Label text="第0页/共0页" id="pagedetail"/>
    <mx:LinkButton label="首页" click="setPager(0)"/>
    <mx:LinkButton label="上一页" click="setPager(curpage-1)"/>
    <mx:LinkButton label="下一页" click="setPager(curpage+1)"/>
    <mx:LinkButton label="末页" click="setPager(totalpage-1)"/>
    <mx:NumericStepper id="inputpage" stepSize="1" minimum="0" maximum="1000" cornerRadius="0"/>
    <mx:LinkButton label="跳转" click="setPager(inputpage.value-1)"/>
   </mx:HBox>
  </mx:Panel>
 </mx:VDividedBox>
 
 
 
</s:Application>