Flex做动态实时曲线图
现在有如下代码:
- XML code
<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" horizontalAlign="center" 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.myxml.result.Day); tmpobj["alpha"] =(String)(e.result.myxml.result.alpha); tmpobj["beta"] =(String)(e.result.myxml.result.beta); tmpobj["gama"] =(String)(e.result.myxml.result.gama); if (expenses.length==20){ var i:int ; for ( i= 1 ; i<10; 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/MyFlex/realtimeServlet" 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>这是Flex中mxml配置文件中的设置。
-------------------------------------------
现在的问题是,值能够从后台获取出来了,但是结果却是
一直是一个直线,而不能定位到“点”,然后形成一条折线。
1、、、请问怎么能够让这些数据连成一个折线,而不是一条条平行线?
2、、、 还有就是这个也是从网上找到的代码,我也是第一天学习FLex,因为是要做一个动态统计图,时间比较紧,不可能在这几天去系统的完整的学习Flex了,希望大家帮帮忙-----解决一下这段代码最后的结果,因为这个代码之前的情况是像心电图一样能够动态的变化曲线,但是 开始的结点不能够平行移动,也就是说曲线之间的 X 轴上的点越来越密,与实际情况不符。怎么能解决这个问题?
感激不尽!!
我只能发 100分以内的帖子,所以暂时只能给这么多,问题解决了到时重开贴在给分。
[解决办法]
[解决办法]
我正学习flex了,初学者来学习。。。
[解决办法]
像这样的曲线图你没必要自己写flex
网上有封装好的flash统计报表工具,你传参调用就好了。
参考地址:http://teethgrinder.co.uk/open-flash-chart/index.php
[解决办法]
<?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>