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>