flex 实时曲线图

直接贴代码吧:


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var gprsAC:ArrayCollection = new ArrayCollection();


private static const MINISECENDS:int=1000;
private function initApp():void
{
setInterval(addArr,MINISECENDS);
}

private var i:Number = 1;
private var tmp_obj:Object;
private function addArr():void
{
tmp_obj = new Object();
var temp_count:Number = Math.ceil(Math.random()*100);
tmp_obj["time"]=i;
tmp_obj["count"]=temp_count;
gprsAC.addItem(tmp_obj);
i++;
if(i==24)
{
i = 1;
}
}
]]>
</mx:Script>


<mx:LineChart id="linchart" color="#333399" width="100%" height="100%" dataProvider="{gprsAC}"
showDataTips="true" fontSize="12" y="77" x="10">
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="time"/>
</mx:horizontalAxis>
<mx:backgroundElements>
<mx:GridLines direction="horizontal">
<mx:horizontalStroke>
<mx:Stroke weight="1.5" color="#333399" alpha="0.2"/>
</mx:horizontalStroke>
</mx:GridLines>
</mx:backgroundElements>
<mx:series>
<mx:LineSeries id="lineserie" width="160" yField="count" />
</mx:series>
</mx:LineChart>
</mx:Application>

这里主要是通过setInterval(addArr,MINISECENDS);来实现一秒跳动一次的。当然还有setTime来做 不过setTime做起来感觉很麻烦。
如果想通过后台交互的话 那就改改addArr这个方法就行啦 代码如下:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%" creationComplete="init();">
<mx:Style>
.font12{font-family:宋体;fontSize:15}
</mx:Style>
<mx:Script><![CDATA[
import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;
import mx.controls.Alert;


[Bindable]
private var expenses:ArrayCollection = new ArrayCollection();
private function init():void{
setInterval(torequest,2000);
}
public function torequest():void{
realtimeservice.send();
realtimeservice.addEventListener(ResultEvent.RESULT,getResult);
}

private var tmpobj:Object;
private function getResult(e:ResultEvent):void{
tmpobj = new Object();
tmpobj["Day"] =(String)(e.result.Day);
tmpobj["alpha"] =(String)(e.result.alpha);
tmpobj["beta"] =(String)(e.result.beta);
tmpobj["gama"] =(String)(e.result.gama);
if (expenses.length==20){
var i:int ;
for ( i= 1 ; i<20; i++){
expenses.setItemAt(expenses.getItemAt(i),i-1);
}
expenses.setItemAt(tmpobj,expenses.length-1);

}else{
expenses.addItem(tmpobj);
}

}

]]></mx:Script>

<mx:HTTPService id="realtimeservice" url="http://localhost:8080/flexcharttest/realtime.servlet" useProxy="false" method="POST">

</mx:HTTPService>
<mx:ApplicationControlBar dock="true" cornerRadius="14" fillAlphas="[1.0, 1.0]" fillColors="[#8BBED9, #FDFAFA]" themeColor="#74B2D9" >
<mx:Spacer width="100%" />
<mx:Legend dataProvider="{chart}"/>
</mx:ApplicationControlBar>
<mx:Panel title="曲线图" fontSize="15" width="100%" borderColor="#F7F2F2" themeColor="#F8FAFB" backgroundColor="#F9F5F5" borderStyle="inset">


<mx:LineChart dataProvider="{expenses}" showDataTips="true" width="100%" id="chart" fontFamily="宋体" fontSize="12">
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="Day" displayName="day" title="随机数" />
</mx:horizontalAxis>
<mx:series>


<mx:LineSeries yField="alpha" displayName="alpha浓度" styleName="font12" />
<mx:LineSeries yField="beta" displayName="beta" />
<mx:LineSeries yField="gama" displayName="gama" />

</mx:series>
</mx:LineChart>


</mx:Panel>

</mx:Application>

先就这样吧!以后慢慢更新!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值