第章 Flex 系统组件图表.ppt

气泡图使用三个值表示每个数据点的数据，其中，两个值用于确定数据点沿水平轴和垂直轴的位置，另一个值用于确定气泡符号相对于其他数据点的大小。 BubbleSeries组件的主要属性如下所示。 （1）xField （2）yField （3）radiusField 气泡图的效果如图所示。 示例代码所示。 1．蜡烛图 蜡烛图用表示数据系列的高、低、开放和闭合值的一系列蜡烛图形表示财务数据。 CandlestickSeries类需要高、低、开、关四项数据，主要属性如下所示。 （1）xField （2）openField （3）closeField （4）highField （5）lowField （6）declineFill （7）boxStroke 蜡烛图的效果如图所示。 示例代码所示。 2．HLOC图 HLOC图与蜡烛图类似，以一系列的线代表体现其高、低、开和关的数值。 使用HLOCChart组件创建HLOC图表，使用HLOCSeries组件定义HLOC图的数据。HLOCSeries类的主要属性如下所示。 （1）xField （2）openField （3）closeField （4）highField （5）lowField （6）openTickStroke （7）closeTickStroke （8）openTickLength （9）closeTickLength HLOC图的效果如图所示。 示例代码所示。 9.3.1 移动图形 在Flex图表中，当绑定的数据源发生变化时，图表中的图形自动变化成为与新数据相对应的图形。如果需要产生如下效果，即现有数据的图形通过移动，在图表中渐变为新数据的图形，而且此效果始终将数据保留在屏幕上且不会清除图表。该组件的语法格式如下： fx:Declarations mx:SeriesInterpolate id=id值 duration=1000/ /fx:Declarations 例如以下示例。 程序的执行结果如图9.13所示，当选择“公司B”单选按钮后，图形会发生变化，最后效果如图9.14所示。 SeriesInterpolate组件实现了图形在图标中的移动效果。如果要实现将数据系列滑向或滑离图表边界的效果，可以使用SeriesSlide组件。SeriesSlide组件的语法格式如下： fx:Declarations mx:SeriesSlide id=id值 duration=1000 direction=up/ /fx:Declarations 其中，duration属性定义效果的持续时间；direction属性定义系列开始滑动的位置，有效值为left、right、up和down，默认值为 left，表示效果触发时向左边界滑出。 例如，使用上一个示例的数据及图表组件，在fx:Declarations标签中添加SeriesSlide组件，代码如下所示： mx:SeriesSlide id=slideIn duration=1000 direction=up/ mx:SeriesSlide id=slideOut duration=1000 direction=down/ 修改series组件，使其具有SeriesSlide组件效果，如下所示： mx:series mx:LineSeries yField=profit form=curve displayName=Profit lineStroke={s1} showDataEffect={slideIn} hideDataEffect={slideOut}/ mx:LineSeries yField=amount form=curve displayName=Amount lineStroke={s2} showDataEffect={slideIn} hideDataEffect={slideOut}/ /mx:series 如果要实现将图表数据聚合到指定的焦点位置，或从该位置分解出图表数据，可以使用SeriesZoom组件。语法格式如下： fx:Declarations mx:SeriesZoom id=id值 duration=1000 / /fx:Declarations 例如，示例所示。 执行结果如图9.15和图9.16所示。 * 9.1 图表简介 9.2 创建图表 9.3 图表效果 1．面积图 面积图将数据表示成一个区域，该区域由用于连接数据中各值的线条界定。 2．条形图和柱状图 条形图将数据表示为一系列水平条，其长度由相应数据中的值确定。 3．折线图 折线图将数据系列表示为使用连续线条连接的多个点。 4．饼图 饼图使用标准的圆饼图表示数据系列，显示一个数