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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值