使用Flex图表组件
以图表或是图的方式显示数据的能力可以使得Flex程序用户的数据交互更为容易。与仅显示简单的数字数据表不同,我们可以显示条状图,饼图,线图或是其他类型的图表,并且可以使用颜色,标题以及二维图形来表示我们的数据。
在这一部分我们会介绍Flex图表,菜单数据,以及我们可以在Flex中创建的其他类型的图表。
关于图表
数据表示可以使得我们简化数据表示与数据关系的方式来表示数据。图表是数据的一种类型,从而我们可以使用二维的图形来表示我们的数据。Flex支持最常见的二维图形,例如条状图,柱状图,饼图,并且提供给我们对于图表显示的的极大控制。
一个简单的图表显示单一的数据系列,在这里系列是一组相关的数据点。例如,一个数据系列也许是月度销售收益,或者是一天的旅馆占有率。下面的图表显示了过去六个月的与销售收益相应的数据系列:
另一种图表也许会添加第二个数据系列。例如,我们也许会包含过去六个月的利润。下面的图表显示了两个数据系列,一个是销售,一个是利润:
定义图表数据
图表控件使用为图表定义数据的dateProvider属性。一个数据提供者(date provider)是一个对象的集合,与数组类似。图表组件使用平的,或者是基于列表的,数据提供者,与一维数组类似。
一个数据提供者由两部分组成:一个数据对象集合与API。数据提供者API是一个类必须实现的方法与属性的集合,从而Flex组件可以将其看作数据提供者。
图表类型
Flex支持最常见的一些图表类型,包括条状图,线图,饼图以及其他的类型。这一部分描述Flex所提供的图表集合。除了这些图表类型以外,我们还可以扩展笛卡尔图表控件还创建自定义的图表。
区域图表
我们使用图表控件将数据表示为一个用与数据值相关的线来界定的区域。在线以下的区域用一种颜色或是一种类型来进行填充。我们可以用图标或是符号来表示线上的每一个数据点,或者是不使用图标而仅用单一的线。
下图是一个区域图表的例子:
条状图
我们使用条状图控件来将数据表示为一系列的垂直条,垂直条的长度由数据值为决定。我们可以使用条状图控件来表示图表的多样性。
条状图实际上是柱状图顺时针旋转90度。所以条状图与柱状图有着许多同样的特性。
泡沫图
我们使用泡沫图对于每一个数据点用三个值来表示数据:一个值决定他的X位置,一个值决定他的Y位置,而另一个值来决定图表符号图表上相对于其他数据点的尺寸。
<mx:BublleChart>标签还有一个额外的属性,maxRadius。这个属性以象素值指定了最大的图表元素的最大半径。与最大值相关的数据点赋值为这个半径值,而其他的数据点相对于最大值赋值为一个较小的半径值。默认值为30象素。
如下图为一个泡沫图的例子:
烛台图表
CandlestickChart控件将财经数据表示为一个系列的烛台,来表示数据系列的高,低,开放与关闭的值。烛台上每一个垂直线的最高点与最低点表示数据点的最大值与最小值,而整个盒的最高点与最低点代表数据的开放值与关闭值,每一个烛台的不同填充由数据点的关闭值是否高于或是低于开放值来决定。
如下图是一个烛台图表的例子:
列状图
ColumnChart控件将数据表示为一系列的垂直列,他的高度由数据值为决定。我们可以使用ColumnChart控件来创建各种类型的列状图,包含简单列,簇列等。
一个简单的图表显示一个单一的数据系列,在这里系列是一组相关的数据点。例如,一个数据系列也许是每个月的销售收益,或者是每天的旅馆出租率。下面的图表显示了一个相应于过去四个季度的销售增长比例的数据系列:
HighLowOpenClose图表
HLOCChart控件将财经数据表示为一系列的代表高,低,开放与关闭的数据系列值。垂直线的最高点与最低点代表数据点的最高值与最低值,而左边的符号标记代表值的开始点,右边的符号标记代表值的结束点。
HLOCChart 控件并不需要代表开始值的数据点。相关的图表CandlestickChart将简单的数据表示为烛台。我们使用HLOCSeries配合 HLOCChart控件来为HighLowOpenClose图表定义数据。下面的例子显示了一个HighLowOpenClose图表:
线图
LineChart控件将数据表示为了笛卡尔坐标系列中的一系列点,彼此之间由连续的线进行连接。 我们可以使用图标或是符号来表示线上的每一个数据点,或者不使用图标显示简单的线。
下图是一个简单的线图的例子:
饼图
我们可以使用PieChart来定义一个标准的饼图。数据提供者的数据决定饼图中相对于其他边的每一个边的尺寸。
下图是一个简单的饼图的例子:
Flex可以让我们创建圆环图。圆环图与饼图相同,所不同只是前者有一个空心与类似轮子的形状,而不是填充的圆。下图是一个简单的圆环图的例子:
块图
我们使用PlotChart控件来在笛卡尔坐标系中表示数据,其中每一个数据点有一个决定其位置的X坐标与Y坐标。我们可以定义Flex所显示的每一个数据点的形状。
下图是一个简单的块图的例子:
以图表或是图的方式显示数据的能力可以使得Flex程序用户的数据交互更为容易。与仅显示简单的数字数据表不同,我们可以显示条状图,饼图,线图或是其他类型的图表,并且可以使用颜色,标题以及二维图形来表示我们的数据。
在这一部分我们会介绍Flex图表,菜单数据,以及我们可以在Flex中创建的其他类型的图表。
关于图表
数据表示可以使得我们简化数据表示与数据关系的方式来表示数据。图表是数据的一种类型,从而我们可以使用二维的图形来表示我们的数据。Flex支持最常见的二维图形,例如条状图,柱状图,饼图,并且提供给我们对于图表显示的的极大控制。
一个简单的图表显示单一的数据系列,在这里系列是一组相关的数据点。例如,一个数据系列也许是月度销售收益,或者是一天的旅馆占有率。下面的图表显示了过去六个月的与销售收益相应的数据系列:
另一种图表也许会添加第二个数据系列。例如,我们也许会包含过去六个月的利润。下面的图表显示了两个数据系列,一个是销售,一个是利润:
定义图表数据
图表控件使用为图表定义数据的dateProvider属性。一个数据提供者(date provider)是一个对象的集合,与数组类似。图表组件使用平的,或者是基于列表的,数据提供者,与一维数组类似。
一个数据提供者由两部分组成:一个数据对象集合与API。数据提供者API是一个类必须实现的方法与属性的集合,从而Flex组件可以将其看作数据提供者。
图表类型
Flex支持最常见的一些图表类型,包括条状图,线图,饼图以及其他的类型。这一部分描述Flex所提供的图表集合。除了这些图表类型以外,我们还可以扩展笛卡尔图表控件还创建自定义的图表。
区域图表
我们使用图表控件将数据表示为一个用与数据值相关的线来界定的区域。在线以下的区域用一种颜色或是一种类型来进行填充。我们可以用图标或是符号来表示线上的每一个数据点,或者是不使用图标而仅用单一的线。
下图是一个区域图表的例子:
条状图
我们使用条状图控件来将数据表示为一系列的垂直条,垂直条的长度由数据值为决定。我们可以使用条状图控件来表示图表的多样性。
条状图实际上是柱状图顺时针旋转90度。所以条状图与柱状图有着许多同样的特性。
泡沫图
我们使用泡沫图对于每一个数据点用三个值来表示数据:一个值决定他的X位置,一个值决定他的Y位置,而另一个值来决定图表符号图表上相对于其他数据点的尺寸。
<mx:BublleChart>标签还有一个额外的属性,maxRadius。这个属性以象素值指定了最大的图表元素的最大半径。与最大值相关的数据点赋值为这个半径值,而其他的数据点相对于最大值赋值为一个较小的半径值。默认值为30象素。
如下图为一个泡沫图的例子:
烛台图表
CandlestickChart控件将财经数据表示为一个系列的烛台,来表示数据系列的高,低,开放与关闭的值。烛台上每一个垂直线的最高点与最低点表示数据点的最大值与最小值,而整个盒的最高点与最低点代表数据的开放值与关闭值,每一个烛台的不同填充由数据点的关闭值是否高于或是低于开放值来决定。
如下图是一个烛台图表的例子:
列状图
ColumnChart控件将数据表示为一系列的垂直列,他的高度由数据值为决定。我们可以使用ColumnChart控件来创建各种类型的列状图,包含简单列,簇列等。
一个简单的图表显示一个单一的数据系列,在这里系列是一组相关的数据点。例如,一个数据系列也许是每个月的销售收益,或者是每天的旅馆出租率。下面的图表显示了一个相应于过去四个季度的销售增长比例的数据系列:
HighLowOpenClose图表
HLOCChart控件将财经数据表示为一系列的代表高,低,开放与关闭的数据系列值。垂直线的最高点与最低点代表数据点的最高值与最低值,而左边的符号标记代表值的开始点,右边的符号标记代表值的结束点。
HLOCChart 控件并不需要代表开始值的数据点。相关的图表CandlestickChart将简单的数据表示为烛台。我们使用HLOCSeries配合 HLOCChart控件来为HighLowOpenClose图表定义数据。下面的例子显示了一个HighLowOpenClose图表:
线图
LineChart控件将数据表示为了笛卡尔坐标系列中的一系列点,彼此之间由连续的线进行连接。 我们可以使用图标或是符号来表示线上的每一个数据点,或者不使用图标显示简单的线。
下图是一个简单的线图的例子:
饼图
我们可以使用PieChart来定义一个标准的饼图。数据提供者的数据决定饼图中相对于其他边的每一个边的尺寸。
下图是一个简单的饼图的例子:
Flex可以让我们创建圆环图。圆环图与饼图相同,所不同只是前者有一个空心与类似轮子的形状,而不是填充的圆。下图是一个简单的圆环图的例子:
块图
我们使用PlotChart控件来在笛卡尔坐标系中表示数据,其中每一个数据点有一个决定其位置的X坐标与Y坐标。我们可以定义Flex所显示的每一个数据点的形状。
下图是一个简单的块图的例子:
发表评论
-
Flex组件的一些怪问题
2010-08-13 17:55 971Flex组件的一些怪问题 ... -
tree 单击节点,打开
2010-07-27 13:36 1013var item:Object=Tree(event.c ... -
bitmap,bitmapdata截图
2010-07-09 11:33 1293<?xml version="1.0&q ... -
flex 画虚线
2010-06-30 11:25 1041转:http://dxm1986.iteye.com/blog ... -
flex 特效
2010-06-29 16:36 1111flex特效 [ 20 ... -
textinput restrict
2010-06-17 20:10 996Flex TextInput 禁止输入特殊字符 < ... -
preloader 美化
2010-06-11 16:56 956loader 主体: package com.di ... -
flex 加载 bmp图片
2010-06-06 10:17 1869<?xml version="1.0& ... -
tooltip巧妙
2010-06-03 17:11 735<?xml version="1.0&qu ... -
flex httpservice 读缓存
2010-06-02 09:36 1010发现谷歌浏览器器也读缓存 没办法 req.url=&q ... -
datagrid显示tooltip方法
2010-05-28 17:19 1273在DataGrid上显示toolTip &l ... -
flex tabnavigator 事件
2010-05-20 09:16 1514最近用到TabNavigator,想在那个tabBar上点 ... -
改变Flex DataGrid 行的背景色
2010-05-18 21:04 1586首先写自定义类 继承自DataGrid package ... -
Adobe AIR应用案例128例
2010-05-18 21:01 616http://www.cnblogs.com/xxcainia ... -
flex 缓冲函数
2010-05-18 20:58 795http://fleksray.org/skins/treec ... -
includelayout 属性
2010-05-18 19:19 882一直被这个问题困扰,就是在设置UI的Visible的时候, ... -
destroyItemEditor
2010-05-17 16:37 782var dg:DataGrid=event.currentTa ... -
cairgorm 详解
2010-05-12 21:27 811转载: http://houwei.iteye.com/bl ... -
flex combobox datagrid
2010-05-06 20:18 883<?xml version="1.0" ... -
flex 自定义控件 用 checkbox
2010-05-06 20:16 1327Flex : 用 CheckBox 做 DataGrid ...
相关推荐
Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表...
Flex图表插件
flex 图表源码展示
chart.rar--java+flex图表 Flex3高级图表开发指南.pdf--英文的 Flex+白皮书.pdf flex-demo.rar Flex入门培训资料及PPT.rar flex中文帮助.pdf InfoQ Flex与JSON及XML的互操作.mht 结合java做的flex图表例子 - 点点...
flex图表展示数据源码
FLEX图表相关解决方案,只要你下载了 必有所获
使用flex图表开发实例,柱状图,条状图,线图等图表显示
flex图表中DataTips样式(背景颜色、文字颜色,等...)简单又方便面,不妨来看看吧!
包中带有4个flex 项目工程,其中有图表库文件(flare),图表示例项目demos),是非常完整的flex 动画图表的算法实现与图形实现,是学习的非常好的源码
flex柱状图表很漂亮的源码
简要说明AMCHARTS_FLEX_COMPONENTS的使用手册,方便开发人员使用
NULL 博文链接:https://zhousheng193.iteye.com/blog/945068
使用flex写的四种图表,用于web前台显示,加入了保存图表图片的功能。
里面是swc库和例子 导入后可以直接运行
NULL 博文链接:https://zh-dream-success.iteye.com/blog/1685429
FLEX 各种 曲线图、柱状图、饼状图动态图表组建。附源码+例子。极为实用
flex 图表
按照Flex技术点,由浅入深、循序渐进地对Flex的开发工具、基本语法、基本的容器和控件的语法及使用、高级编程、自定义的各类组件、页面的风格和主题、Flex与HTML的通信、共享对象、远程数据的控制、Flex图表及...
圆形图表展示源码