Flex 4 : Chart 控件

使用 Adobe Flex 产品线的时候，采用图表和图形来展示数据会使用户与数据的交互更加容易。相对简单的数字表格来说，可以使用表示数据的不同颜色、标题、线条来展示条形图、饼图、线图等等。

图表控件是 Adobe Flash Builder 专业版的特性。也可以在 Falsh Builder 标准版中创建图表，但是图表控件上面会有一个水印。

数据可视化使用简单的数据交互和数据关系展示数据。图表是数据可视化方式的一种，它可以创建二维的数据表示。 Flex 提供一些最常用的数据图表类型（如条形图、饼图等），并且提供强大的图表表示控制方式。

一个简单图表展示了单独的数据序列，由一些相关数据点组成。例如，一个数据序列可能是月销售收入或酒店日入住率。

使用图表控件 

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>

如果希望在窗口大小变化时改变图表的大小，要使用百分比数值设置图表的父容器的大小。