flex 实时曲线图

直接贴代码吧：

<?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>

先就这样吧！以后慢慢更新！

评论

2 楼 pipe 2009-03-14  

jimhe001 写道

问下/realtime.servlet这个servlet取得是什么值啊？谢谢了

这个servlet里面自己模拟生产的数据：Day,  alpha, beta ,  gama

mxml里面没传递参数过去

1 楼 jimhe001 2009-03-10  

问下/realtime.servlet这个servlet取得是什么值啊？谢谢了