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="iniApp()" mouseOut="resize_handler(event)" mouseUp="resize_handler(event)" mouseMove="resize_handler(event)" viewSourceURL="srcview/index.html">
 <!-- 四条坐标轴的 -->
 <s:layout>
  <s:BasicLayout/>
 </s:layout>
 <fx:Style>
  .mystyle{
   fontSize:10px;
   fontFamily:"Arial";
   fontWeight:bold;
  }  
 </fx:Style>
 <fx:Script>
  <![CDATA[
   import com.adobe.serialization.json.JSON;
   
   import mx.charts.ChartItem;
   import mx.charts.chartClasses.IAxisRenderer;
   import mx.charts.series.items.LineSeriesItem;
   import mx.collections.ArrayCollection;
   import mx.controls.Alert;
   import mx.events.ResizeEvent;
   import mx.rpc.events.FaultEvent;
   import mx.rpc.events.ResultEvent;
   
   [Bindable]
   private var chardata:ArrayCollection = new ArrayCollection();
   [Bindable]
   private var clientHeight:Number ;
   [Bindable]
   private var clientWidth:Number ;
   [Bindable]
   private var title:String = "";
   [Bindable]
   private var colX:String = "";
   [Bindable]
   private var colY:String = "";
   [Bindable]
   private var unitX:String = "";
   [Bindable]
   private var unitY:String = "";
   [Bindable]
   private var MinVal:Number = 0;
   [Bindable]
   private var MaxVal:Number = 0;
   private var count:Number = 0;
   private var num:Number = 0;
   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 iniApp():void{
    this.addEventListener(ResizeEvent.RESIZE,resize_handler);
    clientHeight = ExternalInterface.call("function(){return document.body.clientHeight;}");
    clientWidth = ExternalInterface.call("function(){return document.body.clientWidth;}");
    var element:Object = getParams();
    if(typeof(element.url) != "undefined" && element.url != ""){
    //service3.url = "http://localhost:9100/rrams/baseinfo.do?method=getData_Rda_List&start=0&limit=10000";
    service3.url = decodeURIComponent(element.url)+"&start=0&limit=10000";//"http://localhost:8100/rrams/baseinfo.do?method=getData_Flood_List&floodseason=1&name_id=402880fa28d8e8590128d916bb6a0013";
    service3.send();
    //Alert.show(decodeURIComponent("http%3A%2F%2Flocalhost%3A8100%2Frrams%2Fbaseinfo.do%3Fmethod%3DgetData_Flood_List%26floodseason%3D1%26name_id%3D402880fa28d8e8590128d916bb6a0013"));
    }
   }
   private function charDataLoad(event:ResultEvent):void{
    var rawData:String = String(event.result); 
    if(rawData != ""){
     var arr:Array = (JSON.decode(rawData).root as Array);
     var totalProperty:Number = (JSON.decode(rawData).totalProperty as Number);
     var chartP:Array = JSON.decode(rawData).chart;
     this.colX = chartP[0].colX;
     this.colY = chartP[0].colY;
     this.unitX = chartP[0].unitX;
     this.unitY = chartP[0].unitY;
     
     if(totalProperty>50){
      this.num = Math.floor(totalProperty/10);
     }else if(totalProperty>20){
      this.num = Math.floor(totalProperty/5);
     }else if(totalProperty>10){
      this.num = Math.floor(totalProperty/2);
     }else{
      this.num = 1;
     }
     if(typeof(chartP[0].MinVal) != "undefined"){
      this.MinVal = chartP[0].MinVal;
     }
     if(typeof(chartP[0].MaxVal) != "undefined"){
      this.MaxVal =chartP[0].MaxVal;
     }
     
     this.chardata = new ArrayCollection(arr);
     this.chardata.filterFunction = priceFilter;
     this.chardata.refresh();
    }
   }
   private function priceFilter(item:Object):Boolean{
    var isMatch:Boolean = false;
    if(item.mycount <= 7){
     isMatch = true;
    }
    return true;
   }
   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;
   }
   private function dataTipFunc(item:Object):String {
    var curObj:Object = item.item;
    var curSeries:LineSeries = LineSeries(item.chartItem.element);
    var cSI:LineSeriesItem = item.chartItem as LineSeriesItem;
    var str:String =  "<font>库水位(m):"+cSI.xValue.toString()+ "<br>";
    str += curSeries.displayName+":"+cSI.yValue.toString();
    str+="</font>";
    return str;
   }
   private function chariniApp(){
    char_date.filters = [];
   }
   public function CategoryFunction(axis:CategoryAxis,item:Object):Object {
    return(item.Country.State);
   }
   function ccclabelFunction(axisRenderer:IAxisRenderer,label:String):String {
    count ++;
    if((count % this.num) == 0){
     return label;
    }else{
     return "";
    }
   }
   
  ]]>
 </fx:Script>
 <fx:Declarations>
  <mx:HTTPService id="service3" resultFormat="text" result="charDataLoad(event)"/>
  <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>
 </fx:Declarations>
 
 <mx:HBox backgroundColor="White" id="char_date"  width="100%" height="{this.clientHeight}" textAlign="center" initialize="chariniApp" >
  <mx:LineChart styleName="mystyle" id="linechart1" dataProvider="{this.chardata}"  width="{this.clientWidth - this.legendbox.width-10}" height="{this.char_date.height}"  seriesFilters="[]" dataTipFunction="dataTipFunc" showDataTips="true">
   <mx:backgroundElements>
    <mx:GridLines horizontalChangeCount="1">
     <mx:horizontalAlternateFill>
      <mx:SolidColor color="haloSilver" alpha="0.25" />
     </mx:horizontalAlternateFill>
     <mx:verticalAlternateFill>
      <mx:SolidColor color="haloSilver" alpha="0.25" />
     </mx:verticalAlternateFill>
    </mx:GridLines>
   </mx:backgroundElements>
   <mx:horizontalAxis>
    <mx:CategoryAxis id="h1" categoryField="water_table" title="库水位" />
   </mx:horizontalAxis>
   <mx:verticalAxis > 
    <mx:LinearAxis  id="second" minimum="{0}" /> 
   </mx:verticalAxis> 
   <!-- horizontal axis renderer 横轴渲染器-->
   <mx:horizontalAxisRenderers>
    <mx:AxisRenderer labelFunction="ccclabelFunction" highlightElements="true" placement="bottom" labelRotation="90" showLabels="true" canStagger="false" axis="{h1}"/> 
   </mx:horizontalAxisRenderers>
   <mx:series> 
    <mx:LineSeries creationCompleteEffect="showEffects"  form="curve" id="first"  xField="water_table"  yField="subtotal" displayName="泄流小计(m³/s)">
     <mx:lineStroke>
      <mx:Stroke  color="red" weight="1" alpha="0.5" caps="round" />
     </mx:lineStroke>
    </mx:LineSeries>
    <mx:LineSeries creationCompleteEffect="showEffects"  form="curve" id="second2"  xField="water_table"  yField="adbj" displayName="泄流底孔(m³/s)">
     <mx:lineStroke>
      <mx:Stroke  color="blue" weight="1" alpha="0.5" caps="round" />
     </mx:lineStroke>
    </mx:LineSeries>
    <mx:LineSeries creationCompleteEffect="showEffects"  form="curve" id="second3"  xField="water_table"  yField="floodbarrage" displayName="溢洪堰(m³/s)">
     <mx:lineStroke>
      <mx:Stroke  color="#FF11FF" weight="1" alpha="0.5" caps="round" />
     </mx:lineStroke>
    </mx:LineSeries>
    <mx:LineSeries creationCompleteEffect="showEffects"  form="curve" id="second4"  xField="water_table"  yField="maros" displayName="副溢洪道(m³/s)">
     <mx:lineStroke>
      <mx:Stroke  color="Green" weight="1" alpha="0.5" caps="round" />
     </mx:lineStroke>
    </mx:LineSeries>
   </mx:series> 
  </mx:LineChart>
  <mx:VBox id="legendbox">
   <mx:Legend  styleName="mystyle" dataProvider="{linechart1}" id="legend"  direction="vertical" />
  </mx:VBox>
 </mx:HBox>
</s:Application>