技术专栏

gis培训

Flex制作直观的交互式图表

作者:杜帆 邮箱:dufan@lreis.ac.cn 发布时间:2014-01-02 14:28:47 阅读(3844)

Flex制作直观的交互式图表

Flex是一个提供开发设计和运行支持的架构,是一种可能替代传统HTML应用系统的解决方案。Flex可以使开发人员创建利用Adobe FlashPlayer作为前台的RIA(富客户端互联网应用程序),以满足用户更为直观和极具交互性的在线体验。本文将要提到的图表就是FlexWeb应用端的一个例子,基于Flex创建图表可以给用户带来直观的交互式体验。

 

1 Flex图表组件的组成

Flex图表组件主要由图表(Chart)和序列(Series)组成,其中图表用于定义一个或者两个数据源,图标类型,并且设定数据提示,数据流样式和坐标轴样式等;图表序列则指定数据源中哪些数据需要在图标上面显示,并且设定数据留的走势、填充和皮肤。一个图表组件对应一个图表控件类和一个图表序列类,其对应关系如下表所示:

1 图表控件与图标序列

图表组件类

图表序列类

面积图(Area

AreaChart

AreaSeries

条形图(Bar

BarChart

BarSeries

柱状图(Column

ColunmChart

ColumnSeries

折线图(Line

LineChart

LineSeries

饼图(Pie

PieCahrt

PieSeries

散点图(Plot

PlotChart

PlotSeries

气泡图(Bubble

BubbleChart

BubbleSeries

蜡烛图(Candlestick

CandlestickChart

CandlestickSeries

HLOC图(HighLowOpenClose

HLOCChart

HLOCseries




Flex图表组件还包括轴线(Axes),轴线用于设定坐标轴的类型、标签、题目和样式属性等。Flex 4的图表组件支持下列类型的坐标轴:

lCategoryAxis:对应一组数值到坐标轴上

lLinearAxis:在图表轴的最小值和最大值之间均匀映射数字数值。

lLogAxis:以对数方式将数值映射到图表轴的最小值和最大值之间。

lDateTimeAxis:沿图表轴在最大值和最小值之间均匀地映射时间值。

 

2 创建Flex图表

MXML程序中创建图表的主要内容有以下几点:

1)定义图表组件。

Flex 4中的图表组件是Halo组件,所以使用mx命名空间。

2)定义序列。

图表的序列定义包含在<mx:Series></mx:Series>标签中,每个图表类型都有自己的序列名。

3)定义水平轴与垂直轴。

使用<mx:horizontalAxis>标签为水平轴上的项定义标签、刻度线和数据位置,使用<mx:verticalAxis>标签为垂直轴上的项定义标签、刻度线和数据位置。

4)定义样式。

Flex 4中主要使用图片组件的horizontalAxisRenderers属性指定数据如何沿水平轴显示,使用verticalAxisRenderers属性指定数据如何沿垂直轴显示。

5)添加格栅线和其他元素。

Flex 4中使用annotationElements属性,设置显示在图表呈示的任何数据系列上方的图表元素数组。

6)定义图例。

使用Legend组件可向图表中添加图例,用于对图表进行说明。

 

3 利用Flex创建面积图

以面积图为例说明在MXML程序中创建图表的步骤如下:

1)新建MXML程序文件后,切换到设计视图并拖动布局类组件Panel到界面中,给Panel组件添加标题Area_Chart例子”,其效果等同于在源代码视图内输入源代码(4.6版本已更改为Spark类,定义时以s开头):

       <s:Panelx="43" y="10" width="383" height="428"title="Area_Chart例子">

       </s:Panel>

2)在设计视图中拖动AreaChart组件到Panel组件界面内,默认AreaChart组件会自动设定series和图例Legend,代码如下所示:

<mx:AreaChartid="areachart1">

       <mx:series>

           <mx:AreaSeries displayName="Series1" yField=""/>

      </mx:series>

</mx:AreaChart>

<mx:LegenddataProvider="{areachart1}"/>

AreaChart组件的id改为自定义的id值。设定dataProvider属性绑定前面定义的areaChartData变量“{expenses},如下所示:

dataProvider="{ expenses }" >

设定属性showDataTips=“true”,这样当鼠标移动到图表线的拐点处时将显示数据提示内容。

3)为图表设置水平轴与序列,代码如下:

       <mx:horizontalAxis>

          <mx:CategoryAxisdataProvider = "{expenses}" categoryField="Month" />

       </mx:horizontalAxis>

<mx:series>

<mx:AreaSeries yField="Expenses"displayName="开销" form="segment" />

<mx:AreaSeries yField="Profit"displayName="利润" form="curve" />

</mx:series>

其中,AreaSeriesyField属性设置为数据源中的ProfitExpenses字段,字段值即为对应数据点的y坐标。form属性分别设置为curvesegment,表示数据点之间绘制的是曲线和折线。

4)在AreaSeries中还可以设置areaStroke属性显示的边缘线的颜色以及areaFill属性填充区域的颜色。

通过以上主要步骤在MXML应用程序文件中编辑代码,点击运行就可以生成如下图所示的面积图表:

                           

1 Flex生成的面积图表

然而,我们发现图表中有“遮挡”现象,原因是程序默认设置面积图表是不透明的,这样当

两个系列的数据叠加在一起时就容易出现遮盖。要正常显示两个系列的数据,就要设置图表填充为透明。具体做法是在MXML文件的<Declarations>标签中先定义要填充颜色的透明度,然后在定义数据系列中引用这个透明度即可。经过修改透明度后运行程序结果如下图所示:

2 设定透明度后的面积图表

 

作者:杜帆 邮箱:dufan@lreis.ac.cn

HiGIS技术交流QQ群:336076300

关键词:Flex、交互、图表

中科地理信息系统培训中心-原创文章
转载请注明出处:www.higis.cn/Tech/tech/tId/21/

创新地理知识,共享地理价值

http://www.higis.cn

中科地理信息系统培训中心

关于我们

gis培训

苏州高新区中科地理信息系统培训中心是“国家专业技术人员继续教育基地”指定培训点,是3S方向唯一指定的培训点。同时也是国内唯一获得Esri授权的ArcGIS专业培训与认证机构,为广大用户提供ArcGIS培训、开发和咨询服务,中心已经为中国用户服务20年...详细情况...

联系方式

Email:actc@lreis.ac.cn
苏州总部电话: 0512-68076858
        0512-68075672
北京分部电话: 010-64855687
苏州总部地址:苏州市高新区科灵路78号苏高新软件园5号楼3层
北京分部地址:北京市朝阳区大屯路甲11号中科院地理所2406

顶部 返回
地理信息系统国际培训中心