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

动态曲线图 flex实现的说明

Author: Allan（吴进刚）

其实现在回想起来很简单 无非就是用到了 flex 的 mx:LineChart组件，下面详细的说明下该组件下面是如何实现x轴，y轴的 刻度显示 曲线的实现，数据绑定等等。。

首先看如下代码：

<mx:LineChart id="mychart" height="23%" width="50%"  

  paddingRight="5" paddingLeft="5"

  showDataTips="true" seriesFilters="[]" selectionMode="multiple" doubleClickEnabled="true"

  change="onZoom(event)"

  chartDoubleClick="onReset(event)" >

<mx:horizontalAxis>

<mx:DateTimeAxis id="hAxis" dataUnits="seconds" interval="5" minimum="{minDate}" maximum="{maxDate}" labelFunction="mylabel" alignLabelsToUnits="false" title="Time"/>  

</mx:horizontalAxis>

<mx:horizontalAxisRenderers>

<mx:AxisRenderer axis="{hAxis}" placement="left" />

</mx:horizontalAxisRenderers>

<mx:verticalAxis>

<mx:LinearAxis id="vAxis" baseAtZero="false" minorInterval="10" interval="5" title="Value"/>

</mx:verticalAxis>

<mx:verticalAxisRenderers>

<mx:AxisRenderer axis="{vAxis}" styleName="linedNumericAxis"/>

</mx:verticalAxisRenderers>

<mx:series>

<mx:LineSeries yField="valueTest" xField="date" displayName="TestData" dataProvider="{this.testDatas}" form="curve"/>

</mx:series>

</mx:LineChart>

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 等等 默认为