flex 折线图 （类似主机一系统CPU使用记录）

<?xml version="1.0" encoding="utf-8"?>
<!-- Simple example to demonstrate the DateTimeAxis class. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    creationComplete="init()"
    width="400" height="196"
    layout="absolute" verticalAlign="middle">
 
 <mx:Panel title="主机一系统CPU使用记录" height="175" width="100%" paddingTop="0" layout="horizontal" horizontalAlign="center" y="10" x="0">
  <mx:LineChart id="mychart" height="100%" width="100%" 
       showDataTips="true" seriesFilters="[]">
   <!--seriesFilters="[]"用来去掉折线的阴影-->
   <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:lineStroke>
      <!--设置折线的颜色和字体粗细-->
      <mx:Stroke color="#0000FF" weight="1" />
     </mx:lineStroke>
    </mx:LineSeries>
   </mx:series>
  </mx:LineChart>
 </mx:Panel>
 
 <mx:Script>
  <![CDATA[
   import mx.charts.chartClasses.AxisLabelSet;
   import mx.formatters.DateFormatter;
   import mx.charts.chartClasses.IAxis;
   import mx.collections.ArrayCollection;
   
   [Bindable] 
   public var testDatas:ArrayCollection;
   
   
   [Bindable]
   private var maxDate:Date;
   [Bindable]
   private var minDate:Date;
   
   private var timer:Timer;
   private var dateFormat:DateFormatter = new DateFormatter();
   private var dateVar:Date;
   
   private function init():void {
    dateFormat.formatString = "HH:NN:SS";  
    minDate = new Date();
    var dx:Date = new Date();
    dx.setMinutes(dx.getMinutes()+1, dx.getSeconds(), dx.getMilliseconds());
    maxDate = dx;
    <!--监控启动初始值-->
      dateVar = new Date();
    testDatas = new ArrayCollection([{date: dateVar, valueTest: 0} ]);
    <!--设置出发器，每秒更新一次-->
      timer = new Timer(1000);
    timer.addEventListener(TimerEvent.TIMER, getDatas)
    timer.start();
    
   }
   
   private function mylabel(labelValue:Object, previousValue:Object, d:IAxis):String {
    var str:String = dateFormat.format(labelValue);
    return str;
   }
   
   private function getDatas(et:Event):void {
    var valueTestValue:int = Math.random()*100;
    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});  
    
   }
   
  ]]>
 </mx:Script>
</mx:Application>