动态曲线图的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="{[b]this[/b].testDatas}"：绑定数据testDatas
　　form="curve"：趋势图显示为曲线，可以为horizontal vertical 等等 默认为segment
　　再来看Action Script 代码：
　　
　　maxDate.getTime()) {
　　maxDate = dateVar;
　　[b]var[/b] dx:Date = [b]new[/b]
　　Date();
　　dx.setMinutes(dx.getMinutes()-1, dx.getSeconds(), dx.getMilliseconds());
　　minDate = dx;
　　}
　　testDatas.addItem({date: dateVar, valueTest: valueTestValue});
　　}
　　[b]import[/b] mx.managers.PopUpManager;
　　[b]import[/b] test.GraphTest1SelectTime;
　　[b]private[/b] [b]function[/b] showAlertWindow():[b]void[/b]{
　　[b]var[/b] myPanel:GraphTest1SelectTime = GraphTest1SelectTime(PopUpManager.createPopUp([b]this[/b], GraphTest1SelectTime, [b]true[/b])); // 这里第三个参数 true 表示: 弹出myPanel窗口后, 是否可以对父级操作, 值为true时, 就会产生背景模糊的效果, 并不能对父级的东西进行操作
　　myPanel.x = 420;
　　myPanel.y = 170;
　　}
　　[b]private[/b] [b]var[/b] canReset:Boolean = [b]false[/b]
　　;
　　//放大选择的焦点区域的函数
　　[b]private[/b] [b]function[/b] onZoom(event:ChartItemEvent):[b]void [/b]
　　{
　　[b]var[/b] lc:LineChart = event.target [b]as[/b] LineChart;
　　[b]for each[/b] ([b]var[/b] ls:LineSeries [b]in[/b] lc.series)
　　{
　　[b]var[/b] ac:ArrayCollection = [b]new[/b] ArrayCollection();
　　[b]var[/b] dp:ArrayCollection = ls.dataProvider [b]as[/b] ArrayCollection;
　　[b]for each[/b] ([b]var[/b] lsi:LineSeriesItem [b]in[/b] ls.selectedItems)
　　{
　　ac.addItem(lsi.item);
　　}
　　ls.dataProvider = ac;
　　}
　　lc.clearSelection(); canReset = [b]true[/b]; } //only need reset after zoom [b]private[/b] [b]function[/b] onReset(event:ChartEvent):[b]void [/b]{ [b]if[/b](canReset) { [b]var[/b] lc:LineChart = event.target [b]as[/b] LineChart; [b]for[/b] ([b]var[/b] 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订阅数据；
　　[b]import[/b] mx.messaging.messages.IMessage;
　　[b]private[/b] [b]function[/b] messageHandler(message:IMessage):[b]void[/b] {
　　[b]var[/b] dm:Date = [b]new[/b]
　　Date();
　　dm.setTime(dateVar.getTime());
　　dm.setSeconds(dm.getSeconds()+1, dm.getMilliseconds());
　　dateVar = dm;
　　[b]if[/b] (dateVar.getTime()>maxDate.getTime()) {
　　maxDate = dateVar;
　　[b]var[/b] dx:Date = [b]new[/b]
　　Date();
　　dx.setMinutes(dx.getMinutes()-1, dx.getSeconds(), dx.getMilliseconds());
　　minDate = dx;
　　}
　　testDatas.addItem({date: dateVar, valueTest: message.body});
　　}