动态曲线图的flex实现说明.doc

　　Author: Allan（吴进刚）
　　其实现在回想起来很简单 无非就是用到了 flex 的 mx:LineChart组件，下面详细的说明下该组件下面是如何实现x轴，y轴的 刻度显示 曲线的实现，数据绑定等等。。
　　首先看如下代码：
　　width="50%"  
　　paddingRight="5" paddingLeft="5"
　　showDataTips="true" seriesFilters="[]" selectionMode="multiple" doubleClickEnabled="true"
　　change="onZoom(event)"
　　chartDoubleClick="onReset(event)" >
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　mx:LineChart ： 用来构造整个曲线图；
　　showDataTips="true"：show details of data point
　　selectionMode="multiple"：选择多个数据点，可以是0个或者1个
　　doubleClickEnabled="true"：是否允许双击chart
　　change="onZoom(event)"：Dispatched when the selection changes in the chart
　　chartDoubleClick="onReset(event)"：
　　mx:horizontalAxis：用来定义X轴；
　　mx:DateTimeAxis：时间轴；
　　dataUnits="seconds"：milliseconds seconds minutes hours days weeks months years
　　interval="5"：间隔时间
　　minimum="{minDate}"：起始时间，绑定到 minDate
　　maximum="{maxDate}"：结束时间，绑定到 maxDate
　　labelFunction="mylabel"：x轴显示的值，有函数 mylabel 返回
　　alignLabelsToUnits="false"：使x轴不标值点从0开始
　　mx:horizontalAxisRenderers：定义一组渲染X轴的特效；
　　mx:AxisRenderer：定义特效的；
　　axis="{hAxis}"
　　mx:verticalAxis：用来定义Y轴；
　　mx:verticalAxisRenderers：定义一组渲染Y轴的特效；
　　mx:series：定义一组LineSeries 也就是曲线或者点。。；
　　mx:LineSeries：定义要展现的数据曲线，可以定义多条曲线；
　　yField="valueTest"：绑定的数据源中的key为valueTest的值
　　xField="date"：绑定的数据源中的key为date的值
　　dataProvider="{ this.testDatas}"：绑定数据testDatas
　　form="curve"：趋势图显示为曲线，可以为horizontal vertical 等等 默认为segment
　　再来看Action Script 代码：
　　
　　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});   
　　}
　　 import mx.managers.PopUpManager;
　　 import test.GraphTest1SelectTime;
　　 private function showAlertWindow(): void{
　　 var myPanel:GraphTest1SelectTime = GraphTest1SelectTime(PopUpManager.createPopUp( this, GraphTest1SelectTime, true)); // 这里第三个参数 true 表示: 弹出myPanel窗口后, 是否可以对父级操作, 值为true时, 就会产生背景模糊的效果, 并不能对父级的东西进行操作
　　myPanel.x = 420;
　　myPanel.y = 170;      
　　}
　　 private var canReset:Boolean = false
　　;
　　//放大选择的焦点区域的函数
　　 private function onZoom(event:ChartItemEvent): void
　　{
　　 var lc:LineChart = event.target as LineChart;
　　 for each ( var ls:LineSeries in lc.series)
　　{
　　 var ac:ArrayCollection = new ArrayCollection();
　　 var dp:ArrayCollection = ls.dataProvider as ArrayCollection;
　　 for each ( var lsi:LineSeriesItem in ls.selectedItems)
　　{
　　ac.addItem(lsi.item);
　　}
　　ls.dataProvider = ac;
　　}
　　lc.clearSelection(); canReset = true; } //only need reset after zoom private function onReset(event:ChartEvent): void { if(canReset) { var lc:LineChart = event.target as LineChart; for ( var i:int = 0; i   这里面定义了绑定的数据对象，和 被调用的函数，可以自行去查看，有说明备注。
　　最后说明如何利用blazeds与 Java server 通信，实时展现后台的数据曲线图：
　　请看代码：
　　
　　
　　
　　
　　
　　
　　
　　 -->
　　
　　
　　
　　
　　
　　mx:ChannelSet：定义一组频道；
　　mx:AMFChannel：定义一个频道；
　　mx:RemoteObject：定义一个远程对象；
　　destination="graphTest1FeedStarter"：选定一个server定义的对象； 
　　channelSet="{cs}"：选定一个频道；
　　mx:Consumer：订阅目标来接收消息；
　　destination="graphTest1-feed"：选定一个server定义的对象； 
　　channelSet="{cs2}"：选定一个频道；
　　message="messageHandler(event.message)"：接收到消息时分派；
　　下面是分派消息的函数：为曲线图绑定的数据源testDatas提供实时数据取代上面用Timer订阅数据；
　　 import mx.messaging.messages.IMessage;
　　 private function messageHandler(message:IMessage): void {
　　 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: message.body});  
　　}