Flex是一个提供开发设计和运行支持的架构,是一种可能替代传统HTML应用系统的解决方案。Flex可以使开发人员创建利用Adobe FlashPlayer作为前台的RIA(富客户端互联网应用程序),以满足用户更为直观和极具交互性的在线体验。本文将要提到的图表就是Flex在Web应用端的一个例子,基于Flex创建图表可以给用户带来直观的交互式体验。
1 Flex图表组件的组成
Flex图表组件主要由图表(Chart)和序列(Series)组成,其中图表用于定义一个或者两个数据源,图标类型,并且设定数据提示,数据流样式和坐标轴样式等;图表序列则指定数据源中哪些数据需要在图标上面显示,并且设定数据留的走势、填充和皮肤。一个图表组件对应一个图表控件类和一个图表序列类,其对应关系如下表所示:
Flex图表组件还包括轴线(Axes),轴线用于设定坐标轴的类型、标签、题目和样式属性等。Flex 4的图表组件支持下列类型的坐标轴:
lCategoryAxis:对应一组数值到坐标轴上
lLinearAxis:在图表轴的最小值和最大值之间均匀映射数字数值。
lLogAxis:以对数方式将数值映射到图表轴的最小值和最大值之间。
lDateTimeAxis:沿图表轴在最大值和最小值之间均匀地映射时间值。
2 创建Flex图表
在MXML程序中创建图表的主要内容有以下几点:
(1)定义图表组件。
Flex 4中的图表组件是Halo组件,所以使用mx命名空间。
(2)定义序列。
图表的序列定义包含在标签中,每个图表类型都有自己的序列名。
(3)定义水平轴与垂直轴。
使用标签为水平轴上的项定义标签、刻度线和数据位置,使用标签为垂直轴上的项定义标签、刻度线和数据位置。
(4)定义样式。
在Flex 4中主要使用图片组件的horizontalAxisRenderers属性指定数据如何沿水平轴显示,使用verticalAxisRenderers属性指定数据如何沿垂直轴显示。
(5)添加格栅线和其他元素。
Flex 4中使用annotationElements属性,设置显示在图表呈示的任何数据系列上方的图表元素数组。
(6)定义图例。
使用Legend组件可向图表中添加图例,用于对图表进行说明。
3 利用Flex创建面积图
以面积图为例说明在MXML程序中创建图表的步骤如下:
(1)新建MXML程序文件后,切换到设计视图并拖动布局类组件Panel到界面中,给Panel组件添加标题“Area_Chart例子”,其效果等同于在源代码视图内输入源代码(4.6版本已更改为Spark类,定义时以s开头)。
(2)在设计视图中拖动AreaChart组件到Panel组件界面内,默认AreaChart组件会自动设定series和图例Legend。
将AreaChart组件的id改为自定义的id值。设定dataProvider属性绑定前面定义的areaChartData变量“{expenses}”,如下所示:
dataProvider="{ expenses }" >
设定属性showDataTips=“true”,这样当鼠标移动到图表线的拐点处时将显示数据提示内容。
(3)为图表设置水平轴与序列。
其中,AreaSeries的yField属性设置为数据源中的Profit和Expenses字段,字段值即为对应数据点的y坐标。form属性分别设置为curve和segment,表示数据点之间绘制的是曲线和折线。
(4)在AreaSeries中还可以设置areaStroke属性显示的边缘线的颜色以及areaFill属性填充区域的颜色。
通过以上主要步骤在MXML应用程序文件中编辑代码,点击运行就可以生成如下图所示的面积图表:
![](https://i-blog.csdnimg.cn/blog_migrate/c084752b89a98c33701a0178c9ed3bdd.jpeg)
图1 Flex生成的面积图表
然而,我们发现图表中有“遮挡”现象,原因是程序默认设置面积图表是不透明的,这样当两个系列的数据叠加在一起时就容易出现遮盖。要正常显示两个系列的数据,就要设置图表填充为透明。具体做法是在MXML文件的标签中先定义要填充颜色的透明度,然后在定义数据系列中引用这个透明度即可。经过修改透明度后运行程序结果如下图所示:
![](https://i-blog.csdnimg.cn/blog_migrate/49e824935405d06b6bf770469ef601bb.jpeg)
图2 设定透明度后的面积图表