Flex： 实时曲线图(定时获取后台数据)

转载自：http://www.cnblogs.com/Fooo/archive/2009/11/11/1600733.html

 

 

<? xml version="1.0" encoding="utf-8" ?>    
< mx:Application  xmlns:mx ="http://www.adobe.com/2006/mxml"  layout ="absolute"  creationComplete ="initApp()" >    
< mx:Script >    
     <![CDATA[    
        import mx.collections.ArrayCollection;   
        [Bindable]   
        private var gprsAC:ArrayCollection = new  ArrayCollection();   
               
               
        private static const MINISECENDS:int=1000;   
          private function initApp():void  
          {   
              setInterval(addArr,MINISECENDS);   
          }   
             
          private var i:Number = 1;   
          private var tmp_obj:Object;   
          private function addArr():void  
          {   
              tmp_obj = new Object();   
              var temp_count:Number = Math.ceil(Math.random()*100);   
            tmp_obj["time"]=i;   
            tmp_obj["count"]=temp_count;   
              gprsAC.addItem(tmp_obj);   
              i++;   
              if(i==24)   
              {   
                  i = 1;   
              }   
          }   
     ]]>    
</ mx:Script >    
  
        
     < mx:LineChart  id ="linchart"   color ="#333399"  width ="100%"  height ="100%"   dataProvider ="{gprsAC}"   
                                   showDataTips ="true"  fontSize ="12"   y ="77"  x ="10" >    
                                    < mx:horizontalAxis >    
                                        < mx:CategoryAxis  categoryField ="time" />    
                                    </ mx:horizontalAxis >     
                                     < mx:backgroundElements >    
                                              < mx:GridLines  direction ="horizontal" >    
                                                  < mx:horizontalStroke >    
                                                      < mx:Stroke  weight ="1.5"  color ="#333399"  alpha ="0.2" />    
                                                  </ mx:horizontalStroke >    
                                              </ mx:GridLines >    
                                     </ mx:backgroundElements >    
                                    < mx:series >    
                                        < mx:LineSeries  id ="lineserie"  width ="160"  yField ="count"     />    
                                    </ mx:series >    
                                </ mx:LineChart >    
</ mx:Application >   

 

这里主要是通过setInterval(addArr,MINISECENDS);来实现一秒跳动一次的。当然还有setTime来做 不过setTime做起来感觉很麻烦。
如果想通过后台交互的话 那就改改addArr这个方法就行啦 代码如下：

 

< mx:Application  xmlns:mx ="http://www.adobe.com/2006/mxml"  layout ="absolute"   width ="100%"  creationComplete ="init();" >      
< mx:Style >    
    .font12{font-family:宋体;fontSize:15}   
</ mx:Style >    
     < mx:Script > <![CDATA[       
        import mx.collections.ArrayCollection;    
         import mx.rpc.events.ResultEvent;     
         import mx.controls.Alert;   
          
  
        [Bindable]      
        private var expenses:ArrayCollection = new ArrayCollection();    
             private function init():void{   
                  setInterval(torequest,2000);   
             }    
             public function torequest():void{                                                                             
                     realtimeservice.send();      
                     realtimeservice.addEventListener(ResultEvent.RESULT,getResult);                        
             }    
                   
            private var tmpobj:Object;   
             private function getResult(e:ResultEvent):void{     
                       tmpobj = new Object();   
                       tmpobj["Day"] =(String)(e.result.Day);   
                       tmpobj["alpha"] =(String)(e.result.alpha);       
                        tmpobj["beta"] =(String)(e.result.beta);   
                       tmpobj["gama"] =(String)(e.result.gama);      
                       if (expenses.length==20){   
                            var i:int ;                                                 
                            for ( i= 1 ; i<20; i++){    
                                expenses.setItemAt(expenses.getItemAt(i),i-1);   
                            }      
                           expenses.setItemAt(tmpobj,expenses.length-1);   
                              
                       }else{   
                        expenses.addItem(tmpobj);   
                       }   
                           
             }   
                  
     ]]> </ mx:Script >     
       
     < mx:HTTPService  id ="realtimeservice"  url ="http://localhost:8080/flexcharttest/realtime.servlet"  useProxy ="false"  method ="POST" >    
           
     </ mx:HTTPService >      
      < mx:ApplicationControlBar  dock ="true"  cornerRadius ="14"  fillAlphas ="[1.0, 1.0]"  fillColors ="[#8BBED9, #FDFAFA]"  themeColor ="#74B2D9"   >     
          < mx:Spacer  width ="100%"   />     
  < mx:Legend  dataProvider ="{chart}" />    
     </ mx:ApplicationControlBar >    
   < mx:Panel  title ="曲线图"  fontSize ="15"  width ="100%"  borderColor ="#F7F2F2"  themeColor ="#F8FAFB"   backgroundColor ="#F9F5F5"  borderStyle ="inset" >       
    
        
         < mx:LineChart  dataProvider ="{expenses}"  showDataTips ="true"  width ="100%"  id ="chart"  fontFamily ="宋体"   fontSize ="12" >       
             < mx:horizontalAxis >       
                 < mx:CategoryAxis  categoryField ="Day"  displayName ="day"  title ="随机数"   />       
             </ mx:horizontalAxis >       
             < mx:series >      
              
                    
                       < mx:LineSeries  yField ="alpha"  displayName ="alpha浓度"  styleName ="font12"   />            
                      < mx:LineSeries  yField ="beta"  displayName ="beta"    />            
                       < mx:LineSeries  yField ="gama"  displayName ="gama"   />        
               
             </ mx:series >       
         </ mx:LineChart >       
          
    
     </ mx:Panel >       
       
</ mx:Application >   

 

 

转载于:https://www.cnblogs.com/looksgood/archive/2009/12/07/1618636.html