Flex干动态实时曲线图

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>

查看更多 下一篇