ArcGIS教程:Flex制作直观的交互式图表
2014-11-14 14:36
267 查看
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应用程序文件中编辑代码,点击运行就可以生成如下图所示的面积图表:
图1 Flex生成的面积图表
然而,我们发现图表中有“遮挡”现象,原因是程序默认设置面积图表是不透明的,这样当两个系列的数据叠加在一起时就容易出现遮盖。要正常显示两个系列的数据,就要设置图表填充为透明。具体做法是在MXML文件的标签中先定义要填充颜色的透明度,然后在定义数据系列中引用这个透明度即可。经过修改透明度后运行程序结果如下图所示:
图2 设定透明度后的面积图表
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应用程序文件中编辑代码,点击运行就可以生成如下图所示的面积图表:
图1 Flex生成的面积图表
然而,我们发现图表中有“遮挡”现象,原因是程序默认设置面积图表是不透明的,这样当两个系列的数据叠加在一起时就容易出现遮盖。要正常显示两个系列的数据,就要设置图表填充为透明。具体做法是在MXML文件的标签中先定义要填充颜色的透明度,然后在定义数据系列中引用这个透明度即可。经过修改透明度后运行程序结果如下图所示:
图2 设定透明度后的面积图表
相关文章推荐
- ArcGIS API for flex 教程以及示例代码下载
- ArcGIS API for Flex制作程序发布后出现错误:"访问 URL 时遇到安全性错误" 解决办法尝试(学习笔记)
- ArcGIS教程:专题图精细化制作之透明图例
- ArcGIS教程:ArcGIS符号库制作
- ArcGIS教程:用ArcGIS Online创建交互式照片地图
- Flex皮肤制作教程
- arcgis for flex api version3.7 教程:4.创建Flex移动应用
- ArcGIS教程:修改图表的基础知识
- ArcGIS教程:控制图表的轴
- arcgis for flex api version3.7 教程:2.通过地图服务的ID添加地图
- LineChart结合xml实例-flex图表chart组件教程
- 地图中的BI图表解决方案(ArcGIS API for Flex)
- 使用Excel制作图表的实例教程 Excel图表制作大全
- ArcGIS教程:DEM数据的制作方法——地形转栅格
- ArcGIS教程:ArcGIS中的图表是什么
- flex 皮肤制作教程
- ArcGIS Runtime数据制作教程
- dojo 图表制作教程
- ArcGIS教程:制作风或水流速流向图
- arcgis for flex api version3.7 教程:3.如何使用QueryTask查询地图服务