使用图表-read.ppt

第14章 使用图表 图表是利用轴线以及坐标等元素，以图形化的表示方式，表达数据以及数据之间的联系。在本章中，将会介绍Flex自带的图表组件（Charting Components）以及它们的常见用法。 14.1 图表简介 在实际的应用中，常需要向用户展示大量的数据。如果使用单纯的数字列表，只会让用户感到乏味且效果不佳。图形化的表达方式则会让用户更加直观的了解数据，以及不同数据之间的联系。 Flex自带的图表组件是Flex的特色之一，也是Flex的重要组成部分。除了使用这些图表组件之外，用户还可以使用颜色、标题等元素更好的表示数据。 14.1.1 图表组件概述 Flex图表组件包括了条状图、饼图、线图以及其他目前常用的二维图表，主要有以下几种。 区域形图表（Area Chart） 线形图表（Line Chart） 气泡形图表（Bubble Chart） 烛形图表（Candlestick Chart） 柱形图表（Column Chart） 条形图表（Bar Chart） 高低开合形图表（HighLowOpenClose Chart） 饼形图表（Pie Chart） 绘形图表（Plot Chart） 14.1.2 轴线 在二维图表中，轴线（Axes）由X轴和Y轴组成。在图表组件中，轴线包括：轴类型、轴上的坐标，轴的标题等。X轴称为HorizontalAxis，Y轴称为VerticalAxis。 Flex提供了4种类型的轴，分别为：CategoryAxis（类别轴）、LinearAxis（线性轴）、LogAxis（对数轴）和DateTimeAxis（时间日期轴）。 CategoryAxis指在轴上的各个坐标都是逻辑性的名称命名，而不是数字。例如，图表中的月份就可以使用CategoryAxis。 LinearAxis在轴上的坐标均为数字，该类轴可以定义轴的最大、最小值以及数值间隔。 LogAxis用来在轴上显示对数。 DateTimeAxis可在轴上显示时间和日期。 14.1.3 数据类 数据类（Series）表示在图表中利用不同的曲线以及颜色等，来表达的不同类别的数据，如利润、开销、税收。在一个图表中，可以表达多类数据。每个数据类都利用xField和yField属性，分别指明该类数据对应的X、Y轴上坐标。对于每一类图表控件，Flex都提供相应的Series来表达各类数据，例如区域性图表对应的数据类为区域数据类（AreaSeries）。每类Series的属性除xField和yField外，根据不同的图表类型有相应的变化。 图表中的数据采用格式化的数据，可以从多种途径获得：在MXML中的script中定义、在MXML内部定义、来自服务器端和外部的XML文档。有关数据的内容除本章必要的地方讲述外，在后面的数据篇章将会详细的进行讲述。 14.1.4 图表颜色说明 图表颜色说明（Legend）用来说明在图表中每个颜色表达的数据名称。当然，颜色的说明作为可选项出现的。创建的Legend的MXML标签不包含在图表MXML标签内。 但为方便用户使用，一个完整的图表应该包含颜色说明。所以在这里将其作为图表的一部分讲解。图为一个包含颜色说明的图表。 14.1.5 构建图表组件 构建图表的过程其实也是定义图表元素的过程。除基本元素外，Flex为图表组件提供更多可选的效果以及一些扩展功能，更好的在图表中表达数据。构建图表的基本过程通常包括：定义X、Y轴、定义Series、定义效果以及扩展功能、定义颜色说明。 在MXML中构建图表组件，也是按照构建X、Y轴，定义图表要表达哪些类数据，每类数据由谁提供等。可以遵照如下的模式构建图表组件。 mx:ChartName !--定义X、Y轴-- mx:horizontalAxis mx:AxisType/ /mx:horizontalAxis mx:verticalAxis mx:AxisType/ /mx:verticalAxis !--定义Series，可以定义多个AreaSeries -- mx:SeriesName/ mx:SecondSeriesName/ !--定义X、Y轴外观-- mx:horizontalAxisRenderer mx:AxisRenderer/ /mx:horizontalAxisRenderer mx:verticalAxisRenderer mx:AxisRenderer/ /mx:verticalAxisRenderer/ !--在AreaChart外定义Legend -- mx:Legend dataP