Flex 实现实时曲线图

转自网络

Flex3 代码

<?xml version="1.0"?>
<!-- Simple example to demonstrate the DateTimeAxis class. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()">

  <mx:Script>
  <![CDATA[
//http://topic.youkuaiyun.com/u/20100315/16/0b342449-d8b1-4e70-b6da-9d373011714c.html
  import mx.charts.chartClasses.AxisLabelSet;
  import mx.formatters.DateFormatter;
  import mx.charts.chartClasses.IAxis;
  import mx.collections.ArrayCollection;

  [Bindable]  
  public var testDatas:ArrayCollection;
    
  [Bindable]
  //最大时间 x轴  
  private var maxDate:Date;
  [Bindable]
   //最小时间 x轴 
  private var minDate:Date;
    
  private var timer:Timer;
  private var dateFormat:DateFormatter = new DateFormatter();
  private var dateVar:Date;
  
/**
 * 
 * 初始化 
 * @return  
 * @author  
 * @date  
 */ 
  private function init():void 
  {
    
	  dateFormat.formatString = "HH:NN:SS";   
	  minDate = new Date();
	  var dx:Date = new Date();
	  //x轴最大坐标 间隔1分钟  
	  dx.setMinutes(dx.getMinutes()+1, dx.getSeconds(), dx.getMilliseconds());
	  maxDate = dx;
	    
	  dateVar = new Date();
 	  //初始化第一个点
	  testDatas = new ArrayCollection([{date: dateVar, valueTest: 0.0} ]);
	    
	  timer = new Timer(1000);
	  timer.addEventListener(TimerEvent.TIMER, getDatas)
	  timer.start();
    
  }
 /**
 * 
 * 转换x轴坐标的显示 ，按HH:NN:SS 格式显示
 * @return  
 * @param labelValue 时间 
 * @author  
 * @date  
 */ 
  private function mylabel(labelValue:Object, previousValue:Object, d:IAxis):String 
  {
	  var str:String = dateFormat.format(labelValue);
	  return str;
  }
  
/**
 * 
 * 获取数据 默认1s间隔
 * @return  
 * @param et et
 * @author  
 * @date  
 */ 
  private function getDatas(et:Event):void 
  {
	  var valueTestValue:int = Math.random()*50;
	  var dm:Date = new Date();
	  dm.setTime(dateVar.getTime());
	  dm.setSeconds(dm.getSeconds()+1, dm.getMilliseconds());
	  dateVar = dm;
	    
	  if (dateVar.getTime()>maxDate.getTime()) {
	  maxDate = dateVar;
	  var dx:Date = new Date();
	  dx.setMinutes(dx.getMinutes()-1, dx.getSeconds(), dx.getMilliseconds());
	  minDate = dx;
	  }
	  testDatas.addItem({date: dateVar, valueTest: valueTestValue+200});   
    
  }
    
  ]]>
  </mx:Script>

  <mx:Panel title="DateTimeAxis Example" height="100%" width="100%">
  <mx:LineChart id="mychart" height="100%" width="100%"  
  paddingRight="5" paddingLeft="5"
  showDataTips="true" >
    
  <mx:horizontalAxis>
  <mx:DateTimeAxis dataUnits="seconds" interval="5" minimum="{minDate}" maximum="{maxDate}" labelFunction="mylabel" />  
  </mx:horizontalAxis>

  <mx:verticalAxis>
  <mx:LinearAxis baseAtZero="true" />
  </mx:verticalAxis>

  <mx:series>
  <mx:LineSeries yField="valueTest" xField="date" displayName="TestData" dataProvider="{this.testDatas}"/>
  </mx:series>
  </mx:LineChart>
  </mx:Panel>
</mx:Application>