使用图表PPT课件.ppt

1 第14章使用图表 图表是利用轴线以及坐标等元素 以图形化的表示方式 表达数据以及数据之间的联系 在本章中 将会介绍Flex自带的图表组件 ChartingComponents 以及它们的常见用法 2 14 1图表简介 在实际的应用中 常需要向用户展示大量的数据 如果使用单纯的数字列表 只会让用户感到乏味且效果不佳 图形化的表达方式则会让用户更加直观的了解数据 以及不同数据之间的联系 Flex自带的图表组件是Flex的特色之一 也是Flex的重要组成部分 除了使用这些图表组件之外 用户还可以使用颜色 标题等元素更好的表示数据 3 14 1 1图表组件概述 Flex图表组件包括了条状图 饼图 线图以及其他目前常用的二维图表 主要有以下几种 区域形图表 AreaChart 线形图表 LineChart 气泡形图表 BubbleChart 烛形图表 CandlestickChart 柱形图表 ColumnChart 条形图表 BarChart 高低开合形图表 HighLowOpenCloseChart 饼形图表 PieChart 绘形图表 PlotChart 4 14 1 2轴线 在二维图表中 轴线 Axes 由X轴和Y轴组成 在图表组件中 轴线包括 轴类型 轴上的坐标 轴的标题等 X轴称为HorizontalAxis Y轴称为VerticalAxis Flex提供了4种类型的轴 分别为 CategoryAxis 类别轴 LinearAxis 线性轴 LogAxis 对数轴 和DateTimeAxis 时间日期轴 CategoryAxis指在轴上的各个坐标都是逻辑性的名称命名 而不是数字 例如 图表中的月份就可以使用CategoryAxis LinearAxis在轴上的坐标均为数字 该类轴可以定义轴的最大 最小值以及数值间隔 LogAxis用来在轴上显示对数 DateTimeAxis可在轴上显示时间和日期 5 14 1 3数据类 数据类 Series 表示在图表中利用不同的曲线以及颜色等 来表达的不同类别的数据 如利润 开销 税收 在一个图表中 可以表达多类数据 每个数据类都利用xField和yField属性 分别指明该类数据对应的X Y轴上坐标 对于每一类图表控件 Flex都提供相应的Series来表达各类数据 例如区域性图表对应的数据类为区域数据类 AreaSeries 每类Series的属性除xField和yField外 根据不同的图表类型有相应的变化 图表中的数据采用格式化的数据 可以从多种途径获得 在MXML中的中定义 在MXML内部定义 来自服务器端和外部的XML文档 有关数据的内容除本章必要的地方讲述外 在后面的数据篇章将会详细的进行讲述 6 14 1 4图表颜色说明 图表颜色说明 Legend 用来说明在图表中每个颜色表达的数据名称 当然 颜色的说明作为可选项出现的 创建的Legend的MXML标签不包含在图表MXML标签内 但为方便用户使用 一个完整的图表应该包含颜色说明 所以在这里将其作为图表的一部分讲解 图为一个包含颜色说明的图表 7 14 1 5构建图表组件 构建图表的过程其实也是定义图表元素的过程 除基本元素外 Flex为图表组件提供更多可选的效果以及一些扩展功能 更好的在图表中表达数据 构建图表的基本过程通常包括 定义X Y轴 定义Series 定义效果以及扩展功能 定义颜色说明 在MXML中构建图表组件 也是按照构建X Y轴 定义图表要表达哪些类数据 每类数据由谁提供等 可以遵照如下的模式构建图表组件 8 14 2区域形图表 区域形图表 AreaChart 的作用是利用数据绘出数据值相关的区域图 该区域的边界就是根据坐标点的连线 图是一个区域形图表的例子 该图显示了在某零售店在1 4月中每个月的开销和利润值 利用两个不同的颜色区域分别显示两类不同的数据 其中桔红色显示利润情况 青色显示开销情况 9 14 2 1区域形图表组件 区域形图表对应的MXML标签为 对应的数据类Series为区域数据类AreaSeries AreaSeries的常用属性主要使用xField和yField 还可以利用form属性定义该series的表现方式 默认为采用折线形表达方式 Flex为区域形图表提供了多种表达方式 通过form属性即可定义 共有6种可供选择 Segment 图表中的线形采用的是折线形 Step 线形采用的是阶梯形 vertical 每一个坐标点采用垂直于X轴的线形表示 horizontal 每一个坐标点采用平行于X轴的线形表示 reverseStep 交替使用采用vertical和horizontal curve 采用曲线形 10 14 2 2构建区域形图表 下面以图14 2为例讲解构建区域形图表 在图14 2中 轴线上采用月份以及具体数据 所以在X轴上采用类别轴 Y轴采用默认方式 可以不必单独定义 在整个图表中 描述了2个数据类 利润和开销 分别用桔红色和绿色表示 代码说明如下所示 dataProvider expenses 该Areacharts的数据是由 Bindable 中定义的公共变量expenses提供的 采用的是在中定义读取数据的方式 dataProvider Chart1 表示该Legend是Chart1的图表颜色说明 11 14 3线形图表 线形图表与区域形图表在在结构上比较相似 但是区域形图表的数据采用坐标点间的连线和X Y轴闭包区域进行填充表示 而线形图表并未进行填充 图为线形图表的一个示例 该图表示在2月到4月间 某果园香蕉 苹果和桔子的产量 12 14 3 1线形图表组件 线形图表组件对应的MXML标签为 对应的Series为LineSeries LineSeries中常用属性如表所示 13 14 3 2构建线形图表 下面以图14 5为例讲述如何构建线形图表组件 在图14 5中 共有三条折线表示了3类数据 香蕉 苹果 桔子的产量 每类数据对应一个LineSeries 由于整个图表的数据是由外部的XML文件读入的 在构建图14 5时 使用数据模型读入外部的XML 在为每类数据进行数据绑定时 使用点操作符 与相应的标签绑定即可 构建图14 5的代码包含应用MXML文件以及外部XML文件 其中应用文件的代码如下 14 14 3 3改变图表外观 在线形图表中 数据线的颜色和宽度都可以定制 线形图表提供了标签来定义数据线的外形 该标签在每个LineSeries内部定义 图以图为原型 实现了数据线外观的定制 15 14 4气泡形图表 气泡形图表看起来很有趣 在整个图表上 看不到直线 曲线 只能看到大大小小的圆圈 就像一个个气泡 在气泡形图表上 数据不是用折线表示 是用气泡表示的 一个气泡怎么表达数据呢 气泡形图表中 X Y轴包围的区域内 气泡可以利用它的大小以及位置来表达数据的三个参数 一个参数对应气泡圆心的X轴坐标 一个参数对应气泡圆心的Y轴坐标 还有一个参数对应气泡的面积 例如一个气泡可以表示某商品在某个价格的利润和销售量 其中价格对应于X轴 利润对应于Y轴 销售量对应于气泡的大小 图14 9就是一个气泡形图表的例子 它表示某商品的价格 利润和销售情况 16 14 4 1气泡形图表组件 气泡形图表对应的MXML标签为 气泡形图表添加了maxRadius属性 该属性用来设定最大气泡半径 即图表中最大一个气泡所对应的半径值 其他气泡的半径是根据与最大气泡的半径数值的比例计算得到的 当然 这个不需要自己编写 图表组件会自动转换 该组件对应的Series为 它的主要属性如表所示 17 14 4 2构建气泡形图表 下面以图14 9为例 介绍如何构建气泡形图表 图14 9中气泡颜色只有一种 所以只定义了一个BubbleSeries 气泡的圆心对应的X轴坐标为价格即Price标签 Y轴坐标为利润即Profit 气泡的大小即radiusField属性 销量对应Sale标签 在该例中 使用了标签定义数组集合 每个对应一个数据 18 14 4 3定制气泡形图表外观 在构建图标类组件时 默认的情况下X Y轴均使用的轴类型为线性轴 即X Y轴均显示的数据 如果希望X轴显示文字 则需要对代码进行改动 可以尝试只修改BubbleSeries中xField的属性值 但是这样修改后 运行出来的图表是不会显示任何数据 所以 还需要在代码中重新定义X轴 即加入 重新定义轴类型 下面以将X轴改为显示月份为例 介绍如何定义X Y轴外观 图中重新定义了X轴 19 14 5烛形图表 烛形图表看起来比较复杂 在这样的图表中 数据的表达不仅仅是折线 图形的面积大小等单一的元素 而是利用类似于蜡烛的图形来表达数据 以某公司的股票为例 这种类似于蜡烛的图形可以表示股票的开盘 收盘 最低和最高价格 如图所示 20 14 5 1烛形图表组件 烛形图表组件对应的MXML标签为 烛形图表有2个常用属性 如下所示 columnWidthRatio 指图表中的烛形与X轴每个坐标的的宽度之间的比例 默认情况下为0 65 maxColumnWidth 为最大的烛形宽度 它以像素为单位 在图表中有多个Series时 图表组件会自动的按比例缩小烛形的宽度 在实际的显示中 烛形的宽度实现是小于columnWidthRatio和maxColumnWidth 该组件对应的Series为 CandlestickSeries常用属性如表所示 21 14 5 2构建烛形图表 下面以图14 12为例 讲述如何构建烛形图表组件 在图14 12中 使用到了线性轴 LinearAxis LinearAxis可在轴上显示数值 还对轴上的数值进行自动调整 LinearAxis将最大值和最小值之间的数值平均映射到坐标轴上 在默认情况下 它只决定了最大值 最小值和间隔 即minimum maximum和interval LinearAxis还包括autoAdjust和baseAtZero属性 当二者均为true时 如果轴上所有的数据小于0 则轴的数据最大值从0开始 如果轴上数据都大于0时 轴上的最小数据从0开始 如果只有autoAdjust为true时 图表只自动调整数值在轴上的分布 并不强调从0开始 在图14 12中 Y轴从36开始 而不是从0开始 23 14 5 3定义轴外观 在图中 首次使用了轴渲染器 AxisRenderer 轴渲染器与表格控件中条目渲染器类似 重新定义轴的外观 在图中 对于轴的定义分为了2个部分 基本轴定义和轴渲染器 或者主要负责定义轴的类型 数据 名称等基本内容 而或者定义了轴上数据的分布以及轴坐标的显示 在显示轴上的坐标时 AxisRenderer定义的坐标显示总是占用图表上最小的空间 如果坐标名称占用太多的区域 则AxisRenderer会自动将他们进行伸缩 当然 不能将这些坐标名称缩放的太小 否则直接影响阅读 如果遇到不能完全显示坐标的时候 AxisRenderer会在下面三种方案中选择一种实现 首尾相连显示坐标名 将坐标分为2排 在有限的区域内 对坐标名旋转显示 旋转的最大角度为90度 24 14 5 4定义烛形图表外观 在烛形图表中 烛形的颜色默认为填充桔黄色和白色 构建烛形图表时 可以通过Series中fill和declineFill两个属性来改变填充的颜色 效果如图所示 25 14 6柱形图表 柱形图表是比较常见的图表 它利用柱形图的高度来表示数据值 在同一图表内 可以利用多个柱形 不同的颜色来表达不同类的数据 从而清晰的显示数据之间的差异 图为一个柱形图表的例子 它表示在某届奥运会上中国 美国 俄罗斯3个国家获得的奖牌数 26 14 6 1柱形图表组件 柱形图表组件对应的MXML标签为 它对应的Series为ColumnSeries 常用属性如表所示 27 14 6 2构建柱形图表组件 下面以图为例 介绍如何构建柱形图表组件 在图中 利用三种颜色表达了3个不同国家的奖牌 所以需要定义3个ColumnSeries X轴仍然使用CategoryAxis 但在图中定义了图表与容器边界的距离 即首次用到了填充区 Padding 属性 在图表组件中 填充区属性与容器组件类似 定了组件与外部容器间的距离 图表组件的填充区定义如图所示 28 14 7条形图表 条形组件与柱形组件类似 图的柱形组件可以利用条形组件表示 如图所示 条形图表组件的MXML标签为 对应的Series为BarSeries 它们的属性与柱形组件是相同的 构造的方法也类似 不同点在于 在柱形图表组件中 柱形是垂直与X轴的 而在条形中柱形是垂直于Y轴的 如果将柱形组件中的柱形顺时针转90度 X Y轴坐标互换 就可以得到条形组件 29 14 8高低开合形图表 高低开合形图表与烛形图表相类似 采用特殊的图案表达数据 在高低开合形图表中 利用高低开合图案来表达一组数据中的4项属性 这里仍然股票为例 高低开合图案可以表示股票的开盘价 收盘价 最高价和最低价 高低开合图案中 垂直直线的顶端表示最大值 底端表示最小值 若开盘价高于收盘价时 垂直直线上半段中的横线向左 表示开盘价 下半段中的横线向右 表示收盘价 若收盘价高于开盘价 则上半段的横线向右 若收盘价低于开盘价 下半段的横线指向左 如图所示 在高低开合图表中 可以没有开盘价 此时 高低开合图案没有向左的横线 只有向右的横线表示收盘价 高低开合形图表如图所示 30 14 8 1高低开合形图表组件 高低开合形图表对用的MXML标签为 对应的Sereis为HLOCSeries 组件的属性和HLOCSeries的属性和烛形组件的属性相似 不同点在于openField为可选项 可以为空 具体属性的详解可以参照烛形组件 31 14 8 2构建高低开合形图表 下面以图为例介绍如何构建高低开合形图表 图中 X轴使用CategoryAxis Y轴使用LinearAxis 并且重新对X轴的外观进行定义 只在X轴上显示部分的坐标 以容纳坐标的全称 图对应的代码如下 32 14 8 3定制图表外观 在高低开合形图表中 可以利用Stroke改变高低开合图形中垂直线的外观 上下半段的横线的外观 则可以利用openTickStroke和closeTickStroke标签及其属性定制 图就是以图为原型 定制高低开合图形外观 创建图时 只需将原代码中Sereis部分做如下替换 33 14 9饼形图表 饼形图表是与上述几类的图表风格完全不相同的图表 在饼形图表中 没有X Y轴和Legend 只有一个类似于饼的图形 每种数据根据其数值的大小来决定其在圆饼中的比重 对于饼形图表 它允许在图中出现数据的说明文字 这与其他图表组件中的DataTips不同 DataTips只有在鼠标移动到坐标点的时候 才会显示数据的说明 而饼形图表可以通过设置相关属性 将说明文字直接显示在图表上 不再依赖于鼠标的移动 该特性只有饼形图表具有 图14 23是饼形图表的一个示例 它描述的是在某届奥运会上中国 美国和俄罗斯的金牌比例 34 14 9 1饼形图表组件 饼形图表对应的MXML标签为 饼形图表在通用属性的基础上添加了如下2个属性 innerRadius Number型 用来指明圆饼的圆心大小 默认为0 当该值不为0时 称之为doughnut图表 如所示 textAlign 图表说明文字的对齐方式 有3种选择 left right和center 分别是左对齐 右对齐和居中 35 14 9 2构建饼形图表 本节以图为例讲解如何构建饼形图表 图对应的代码如下 代码说明 displayGold 该方法的作用是计算每个国家得到的奖牌总数 为数据块的说明提供内容 calloutStroke 由于在图14 22中 使用了callout类型的说明文字 所以在定义Sereis时 为Callout定制了直线的宽度 透明度和颜色 radialStroke 定义了数据块边界线的宽度 颜色和透明度 该分界线是延圆心向外的 不是饼形的外圆边界 labelFunction displayGold 利用displayGold方法获得数据块的说明 36 14 9 3定义图表外观 仔细观察饼形图表的外观 可以发现在饼圈周围的阴影 在Flex图表组件中 使用Filters可以为图形以及数据线甚至文字定制阴影 但所有的阴影都采用同一阴影的设置 即使用flash filters包内的DropShadowFilter 对于饼形图表而言 由于它自身带有阴影属性 如果对阴影部分进行定制 需要利用空数组将原有的阴影清除后 才能添加新的阴影 为图定制阴影后如图所示 要达到图的效果 需要对图的代码做如下改动 在标签内添加xmlns flash flash filters 标签内的内容替换为如下内容 37 14 10绘形图表 在绘形图表上 看不到蜿蜒的数据线 看不到大大小小的气泡或者横竖交叉的直线 取而代之的是分布在坐标区域内的 不同外形的点 方形和菱形 每一个这样的图形 都代表着一个数据 图就是一个绘形图表的例子 它表示3种水果在1 6月之间的销售额 38 14 10 1绘形图表组件 绘形图表组件对应的MXML标签为 对应的Se