Author: Allan(吴进刚)
其实现在回想起来很简单 无非就是用到了 flex 的 mx:LineChart组件,下面详细的说明下该组件下面是如何实现x轴,y轴的 刻度显示 曲线的实现,数据绑定等等。。
首先看如下代码:
height="23%" 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 等等 默认为 发表于 @ 2010年08月09日 18:48:00 | 评论( loading... ) | 举报| 收藏
[b]旧一篇:动态曲线图的flex实现说明.doc[/b][b] | [/b][b]新一篇:设备状态显示的flex实现说明.doc [/b]
其实现在回想起来很简单 无非就是用到了 flex 的 mx:LineChart组件,下面详细的说明下该组件下面是如何实现x轴,y轴的 刻度显示 曲线的实现,数据绑定等等。。
首先看如下代码:
height="23%" 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 等等 默认为 发表于 @ 2010年08月09日 18:48:00 | 评论( loading... ) | 举报| 收藏
[b]旧一篇:动态曲线图的flex实现说明.doc[/b][b] | [/b][b]新一篇:设备状态显示的flex实现说明.doc [/b]