Flex 4 : Chart 控件

秒速五厘米 2022-08-17 14:16 197阅读 0赞

http://yecon.blog.hexun.com/36798900\_d.html

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

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

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

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

更多 Flex 示例，请访问 [http://www.slsay.com][http_www.slsay.com]

**使用图表控件** ** **

Flex 图表控件可以创建一些最常用的图表类型，并且自定义其表现形式。图表控件在 mx.charts.\* 包中。

下表列出了提供 Flex 提供的图表类型、控件类名以及用来定义每个图表的数据表示的序列类名。

<table> 
 <tbody> 
  <tr> 
   <td><strong>图表类型</strong> </td> 
   <td><strong>图表控件类</strong> </td> 
   <td><strong>图表序列类</strong> </td> 
  </tr> 
  <tr> 
   <td>Area</td> 
   <td>AreaChart</td> 
   <td>AreaSeries</td> 
  </tr> 
  <tr> 
   <td>Bar</td> 
   <td>BarChart</td> 
   <td>BarSeries</td> 
  </tr> 
  <tr> 
   <td>Bubble</td> 
   <td>BubbleChart</td> 
   <td>BubbleSeries</td> 
  </tr> 
  <tr> 
   <td>Candlestick</td> 
   <td>CandlestickChart</td> 
   <td>CandlestickSeries</td> 
  </tr> 
  <tr> 
   <td>Column</td> 
   <td>ColunmChart</td> 
   <td>ColumnSeries</td> 
  </tr> 
  <tr> 
   <td>HighLowOpenClose</td> 
   <td>HLOCChart</td> 
   <td>HLOCseries</td> 
  </tr> 
  <tr> 
   <td>Line</td> 
   <td>LineChart</td> 
   <td>LineSeries</td> 
  </tr> 
  <tr> 
   <td>Pie</td> 
   <td>PieCahrt</td> 
   <td>PieSeries</td> 
  </tr> 
  <tr> 
   <td>Plot</td> 
   <td>PlotChart</td> 
   <td>PlotSeries</td> 
  </tr> 
 </tbody> 
</table>

** **

所有的图表控件，除了 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
    />

下表描述了图表部件的更多细节：

<table> 
 <tbody> 
  <tr> 
   <td><strong>部件</strong> </td> 
   <td><strong>描述</strong> </td> 
  </tr> 
  <tr> 
   <td>Chart</td> 
   <td>（必需）为图表定义一个或两个数据源。定义图表类型和数据提示、鼠标敏感度、gutter 样式、axis 样式</td> 
  </tr> 
  <tr> 
   <td>Series</td> 
   <td>（必需）为图表的展示定义一个或两个数据序列。设置数据序列的线条、填充、渲染以及每个序列图示的线条和填充。&nbsp;&nbsp;&nbsp; <p>也可以为每个图表定义第二个序列集合，从而在单个图表上展示多重数据序列。</p> <p>图表中的每个序列可以有其自己的数据源。</p> </td> 
  </tr> 
  <tr> 
   <td>Axes</td> 
   <td>设置轴类型（数字或分类）。定义轴标签、标题和样式。</td> 
  </tr> 
  <tr> 
   <td>Axes renderer</td> 
   <td>（可选）设置设置样式、标签的可用性，定义轴线、标签角度和间距。</td> 
  </tr> 
  <tr> 
   <td>Elements</td> 
   <td>（可选）定义框格线以及一些额外元素以表现在图表上。</td> 
  </tr> 
 </tbody> 
</table>

对于每个图表类型， Flex 提供相应的的图表控件和图表序列。图表控件定义图表的类型、数据源、框格线、轴文本以及一些其他的属性。图表控件的数据源（ dataProvider ）属性确定了图表使用的数据。数据源是一个包含若干对象的集合，它可以使对象的数组（ Array ）或者其它继承了集合 API 的对象。数据源也可以是带有 XML 节点的 XMLList 对象，如 E4X 的查询结果。

图表组件使用平面或基于列表的数据源，类似一维数组。数据源能够包含字符串、数字，甚至是其他的一些对象。

使用图表序列指定数据源中的哪些数据需要在图表上面显示。数据源可以包含一些需要显示在数据图表上之外的一些数据，所以需要使用图表序列来指定数据源中需要的点。可以指定一个单独的数据序列，或者第二个序列。可以使用图表序列定义数据在图表上面的表现形式。

所有的图表序列都继承了图表的数据源，除非它们有明确的数据源集。若要设置图标控件的 dataProvider 属性，不必在序列之上设置属性值。当然，也可以为图表控件中的每一个序列定义不同的数据源。

例如，创建一个饼图，就用带 PieSeries 图表序列的 PieChart 控件。要创建面图，就用带 AreaSeries 图表序列的 AreaChart 控件，示例如下：

<?xml version="1.0"
    ?>
    
     
    
     
    
     <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"
    ?>
    
     
    
     
    
     <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"
    ?>
    
     
    
     
    
     <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"
    ?>
    
     
    
     
    
     <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
    >

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

[http_www.slsay.com]: http://www.slsay.com/archives/category/flex