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>

评论

1 楼 哆啦A梦 2011-05-03  

你好，请问你的显示是不是实时的从左到右的显示，但是我运行了一下，过了大概有一段时间之后，数据和时间都没有了。这是为什么呢？期待着你的回答。先谢谢了。