http://yecon.blog.hexun.com/36798900_d.html
使用 Adobe Flex 产品线的时候,采用图表和图形来展示数据会使用户与数据的交互更加容易。相对简单的数字表格来说,可以使用表示数据的不同颜色、标题、线条来展示条形图、饼图、线图等等。
图表控件是 Adobe Flash Builder 专业版的特性。也可以在 Falsh Builder 标准版中创建图表,但是图表控件上面会有一个水印。
数据可视化使用简单的数据交互和数据关系展示数据。图表是数据可视化方式的一种,它可以创建二维的数据表示。 Flex 提供一些最常用的数据图表类型(如条形图、饼图等),并且提供强大的图表表示控制方式。
一个简单图表展示了单独的数据序列,由一些相关数据点组成。例如,一个数据序列可能是月销售收入或酒店日入住率。
更多 Flex 示例,请访问 http://www.slsay.com
使用图表控件
Flex 图表控件可以创建一些最常用的图表类型,并且自定义其表现形式。图表控件在 mx.charts.* 包中。
下表列出了提供 Flex 提供的图表类型、控件类名以及用来定义每个图表的数据表示的序列类名。
图表类型 | 图表控件类 | 图表序列类 |
Area | AreaChart | AreaSeries |
Bar | BarChart | BarSeries |
Bubble | BubbleChart | BubbleSeries |
Candlestick | CandlestickChart | CandlestickSeries |
Column | ColunmChart | ColumnSeries |
HighLowOpenClose | HLOCChart | HLOCseries |
Line | LineChart | LineSeries |
Pie | PieCahrt | PieSeries |
Plot | PlotChart | PlotSeries |
所有的图表控件,除了 PieChart 类之外,都是 CartesianChart 类的子类。 笛卡尔图表( Cartesian Chart )专门用来在矩形和二维空间表示数据点集。 PieChart 类是 PolarChart 类的子类,它表示圆形区域的数据。
所有的图表控件都继承自 ChartBase 类的基本图形特征。
在 MXML 中,图表控件通常具有以下结构:
<mx:ChartName >
<!-- 定义一个或多个序列 -->
<mx:SeriesName />
<!-- 定义水平轴与竖直轴 -->
<mx:horizontalAxis >
<mx:axis _type/>
</mx:horizontalAxis >
<mx:verticalAxis >
<mx:axis _type/>
</mx:verticalAxis >
<!-- 定义样式 -->
<mx:horizontalAxisRenderers >
<mx:AxisRenderer />
</mx:horizontalAxisRenderers >
<mx:verticalAxisRenderers >
<mx:AxisRenderer />
</mx:verticalAxisRenderers />
<!-- 添加框格线盒其它元素 -->
<mx:annotationElements >
<mx:Array />
</mx:annotationElements >
<mx:backgroundElements >
<mx:Array />
</mx:backgroundElements />
</mx:ChartName >
<!-- 定义图例(可选) -->
<mx:Legend />
下表描述了图表部件的更多细节:
部件 | 描述 |
Chart | (必需)为图表定义一个或两个数据源。定义图表类型和数据提示、鼠标敏感度、gutter 样式、axis 样式 |
Series | (必需)为图表的展示定义一个或两个数据序列。设置数据序列的线条、填充、渲染以及每个序列图示的线条和填充。 也可以为每个图表定义第二个序列集合,从而在单个图表上展示多重数据序列。 图表中的每个序列可以有其自己的数据源。 |
Axes | 设置轴类型(数字或分类)。定义轴标签、标题和样式。 |
Axes renderer | (可选)设置设置样式、标签的可用性,定义轴线、标签角度和间距。 |
Elements | (可选)定义框格线以及一些额外元素以表现在图表上。 |
对于每个图表类型, Flex 提供相应的的图表控件和图表序列。图表控件定义图表的类型、数据源、框格线、轴文本以及一些其他的属性。图表控件的数据源( dataProvider )属性确定了图表使用的数据。数据源是一个包含若干对象的集合,它可以使对象的数组( Array )或者其它继承了集合 API 的对象。数据源也可以是带有 XML 节点的 XMLList 对象,如 E4X 的查询结果。
图表组件使用平面或基于列表的数据源,类似一维数组。数据源能够包含字符串、数字,甚至是其他的一些对象。
使用图表序列指定数据源中的哪些数据需要在图表上面显示。数据源可以包含一些需要显示在数据图表上之外的一些数据,所以需要使用图表序列来指定数据源中需要的点。可以指定一个单独的数据序列,或者第二个序列。可以使用图表序列定义数据在图表上面的表现形式。
所有的图表序列都继承了图表的数据源,除非它们有明确的数据源集。若要设置图标控件的 dataProvider 属性,不必在序列之上设置属性值。当然,也可以为图表控件中的每一个序列定义不同的数据源。
例如,创建一个饼图,就用带 PieSeries 图表序列的 PieChart 控件。要创建面图,就用带 AreaSeries 图表序列的 AreaChart 控件,示例如下:
<?xml version="1.0" ?>
<!-- charts/BasicAreaOneSeries.mxml -->
<!-- http://www.slsay.com/archives/153 -->
<mx:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/halo"
xmlns:s="library://ns.adobe.com/flex/spark" >
<fx:Script >
<![ CDATA[
import mx.collections.ArrayCollection;
[ Bindable]
public var expenses:ArrayCollection = new ArrayCollection( [
{ Month:"Jan" , Profit:2000 , Expenses:1500 , Amount:450 } ,
{ Month:"Feb" , Profit:1000 , Expenses:200 , Amount:600 } ,
{ Month:"Mar" , Profit:1500, Expenses:500, Amount:300}
] ) ;
] ] >
</fx:Script >
<mx:Panel title="Area Chart" >
<mx:AreaChart id="myChart" dataProvider="{expenses}"
showDataTips="true" >
<mx:horizontalAxis >
<mx:CategoryAxis
dataProvider="{expenses}"
categoryField="Month" />
</mx:horizontalAxis >
<mx:series >
<mx:AreaSeries
yField="Profit"
displayName="Profit" />
</mx:series >
</mx:AreaChart >
<mx:Legend dataProvider="{myChart}" />
</mx:Panel >
</mx:Application >
此例中,定义了一个包含于 标签的数组。 标签指定了要在图表中展示的单独数据序列。
可以添加第二个 标签,以显示第二个数据序列,示例如下:
<?xml version="1.0" ?>
<!-- charts/BasicArea.mxml -->
<!-- http://www.slsay.com/archives/153 -->
<mx:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/halo"
xmlns:s="library://ns.adobe.com/flex/spark"
creationComplete="srv.send()" >
<fx:Declarations >
<mx:HTTPService id="srv"
url="http://aspexamples.adobe.com/chart_examples/expenses-xml.aspx" />
</fx:Declarations >
<mx:Panel title="Area Chart" >
<mx:AreaChart id="myChart" showDataTips="true"
dataProvider="{srv.lastResult.data.result}" >
<mx:horizontalAxis >
<mx:CategoryAxis
categoryField="month"
displayName="Month" />
</mx:horizontalAxis >
<mx:series >
<mx:AreaSeries
yField="profit"
displayName="Profit" />
<mx:AreaSeries
yField="expenses"
displayName="Expenses" />
</mx:series >
</mx:AreaChart >
<mx:Legend dataProvider="{myChart}" />
</mx:Panel >
</mx:Application >
并不一定在图表控件上定义数据源。每个序列可以有他自己的数据源,如下所示:
<?xml version="1.0" ?>
<!-- charts/MultipleDataProviders.mxml -->
<!-- http://www.slsay.com/archives/153 -->
<mx:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/halo"
xmlns:s="library://ns.adobe.com/flex/spark" >
<fx:Script >
<![ CDATA[
import mx.collections.ArrayCollection;
[ Bindable]
public var profit04:ArrayCollection = new ArrayCollection( [
{ Month:"Jan" , Profit:2000 } ,
{ Month:"Feb" , Profit:1000 } ,
{ Month:"Mar" , Profit:1500}
] ) ;
[ Bindable]
public var profit05:ArrayCollection = new ArrayCollection( [
{ Month:"Jan" , Profit:2200 } ,
{ Month:"Feb" , Profit:1200 } ,
{ Month:"Mar" , Profit:1700}
] ) ;
[ Bindable]
public var profit06:ArrayCollection = new ArrayCollection( [
{ Month:"Jan" , Profit:2400 } ,
{ Month:"Feb" , Profit:1400 } ,
{ Month:"Mar" , Profit:1900}
] ) ;
] ] >
</fx:Script >
<mx:Panel title="Column Chart" >
<mx:ColumnChart id="myChart"
dataProvider="{profit04}" showDataTips="true" >
<mx:horizontalAxis >
<mx:CategoryAxis categoryField="Month" />
</mx:horizontalAxis >
<mx:series >
<mx:ColumnSeries
dataProvider="{profit04}"
yField="Profit"
xField="Month"
displayName="2004" />
<mx:ColumnSeries
dataProvider="{profit05}"
yField="Profit"
xField="Month"
displayName="2005" />
<mx:ColumnSeries
dataProvider="{profit06}"
yField="Profit"
xField="Month"
displayName="2006" />
</mx:series >
</mx:ColumnChart >
<mx:Legend dataProvider="{myChart}" />
</mx:Panel >
</mx:Application >
要实现动态地改变图表的大小以使用浏览器窗口,需要将 width 和 height 属性值设为百分比数值,如下所示:
<?xml version="1.0" ?>
<!-- charts/BasicBarSize.mxml -->
<!-- http://www.slsay.com/archives/153 -->
<mx:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/halo"
xmlns:s="library://ns.adobe.com/flex/spark" >
<fx:Script >
<![ CDATA[
import mx.collections.ArrayCollection;
[ Bindable]
public var expenses:ArrayCollection = new ArrayCollection( [
{ Month:"Jan" , Profit:2000 , Expenses:1500 } ,
{ Month:"Feb" , Profit:1000 , Expenses:200 } ,
{ Month:"Mar" , Profit:1500, Expenses:500}
] ) ;
] ] >
</fx:Script >
<mx:Panel title="Bar Chart" height="500" width="500" >
<mx:BarChart id="myChart"
dataProvider="{expenses}"
height="100%"
width="100%"
showDataTips="true" >
<mx:verticalAxis >
<mx:CategoryAxis
dataProvider="{expenses}"
categoryField="Month" />
</mx:verticalAxis >
<mx:series >
<mx:BarSeries
yField="Month"
xField="Profit"
displayName="Profit" />
<mx:BarSeries
yField="Month"
xField="Expenses"
displayName="Expenses" />
</mx:series >
</mx:BarChart >
<mx:Legend dataProvider="{myChart}" />
</mx:Panel >
</mx:Application >
如果希望在窗口大小变化时改变图表的大小,要使用百分比数值设置图表的父容器的大小。