Flex做动态曲线图
Flex按时间段画动态曲线图，代码如下:
?
<?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[
??????? ??? 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: 101.71} ]);
?????????? ??? ???
??????????? ??? 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()*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});? ???
??????????? ???
??????????? }
???????????
??????? ]]>
??? </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>
