Flex 4 : 使用 AreaChart 控件

川长思鸟来 2022-08-17 14:13 180阅读 0赞

http://www.slsay.com/archives/154

使用 AreaChart 控件将数据展示为其线型边界表示数据值的面积区域。面积区域由线条及其下边所填充的颜色和图案组成。可以使用图标或符号沿着边界线展示每个数据点，也可以展示不带图标的简单区域线。  
创建 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"  
        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 >

面积图表本质上是一个下方区域填充颜色的线图，因此，面积图表和线图共享很多相同的特性。

可以使用带 AreaChart 控件的 AreaSeries 图表序列定义图表的数据。下表中描述了定义图表时常用的 AreaSeries 图表序列的属性：

<table> 
 <tbody> 
  <tr> 
   <td><strong>属性</strong> </td> 
   <td><strong>描述</strong> </td> 
  </tr> 
  <tr> 
   <td>yField</td> 
   <td>指定数据源的某字段，确定其为每个数据点在 y 轴上的属性。</td> 
  </tr> 
  <tr> 
   <td>xField</td> 
   <td>指定数据源的某字段，确定其为每个数据点在 x 轴上的属性。如果不指定此属性， Adobe Flex 将按照数据源中的数据顺序排列数据。</td> 
  </tr> 
  <tr> 
   <td>minField</td> 
   <td>指定数据源的某字段，确定面积区域的底部在 y 轴上的位置。此属性是可选的。如果不指定此属性，则面积区域的底部将与 x 轴对齐。此属性对覆盖、堆栈、100%堆积图不产生影响。</td> 
  </tr> 
  <tr> 
   <td>form</td> 
   <td>指定数据序列在图表中的显示方式。下面的值是合法的：&nbsp;&nbsp;&nbsp; <p>segment : 将每个数据点连成折线。这是 form 属性的默认值。</p> <p>step : 水平与竖直的交错线，呈阶梯状。第一个数据点处，画一条水平线，然后是一条连接第二个数据点的竖直线。重复这一过程，画出每一个数据点。</p> <p>reverseStep : 水平与竖直的交错线，呈阶梯状。第一个数据点处，画一条竖直线，然后是一条连接第二个数据点的水平线。重复这一过程，画出每一个数据点连成的折线。</p> <p>vertical : 在第二个数据点的 x 坐标处，从第一个数据点的 y 坐标到第二个数据点的 y 坐标画出竖直线。重复这一过程，画出每一个数据点连成的折线。</p> <p>horizontal : 在第一个数据点的 y 坐标处，从第一个数据点的 x 坐标到第二个数据点的 x 坐标画出水平线。重复这一过程，画出每一个数据点连成的折线。</p> <p>curve : 在数据点之间画出曲线。</p> </td> 
  </tr> 
 </tbody> 
</table>

下面的例子表示的是 AreaChart 控件序列的每一种可用形式。

![Chart][]

可以使用 AreaChart 控件的 type 属性来表示很多图表的变化，包括覆盖、堆栈，100%堆积图，高低面积区域图等。

要为 AreaChart 控件填充 AreaChart 控件的序列，需要使用 areaFill 和 areaStroke 属性。对于每个填充，需要制定 SolidColor 和 Stroke 对象。下面的例子中，有了三个自定义 SolidColor 对象和三个自定义 Stroke 对象，并将它们应用于 AreaChart 控件中的 AreaSeries 对象。

<?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" />  
          
        <mx:SolidColor id="sc1" color="blue" alpha=".3" />  
        <mx:SolidColor id="sc2" color="red" alpha=".3" />  
        <mx:SolidColor id="sc3" color="green" alpha=".3" />  
          
        <mx:Stroke id="s1" color="blue" weight="2" />  
        <mx:Stroke id="s2" color="red" weight="2" />  
        <mx:Stroke id="s3" color="green" weight="2" />  
    </fx:Declarations >  
    <mx:Panel title="AreaChart Control with Custom Fills Example"  
            height="100%" width="100%" layout="horizontal" >  
        <mx:AreaChart id="Areachart"  
                height="100%"  
                width="70%"  
                paddingLeft="5"  
                paddingRight="5"  
                showDataTips="true"  
                dataProvider="\{srv.lastResult.data.result\}" >  
            <mx:horizontalAxis >  
                <mx:CategoryAxis categoryField="Month" />  
            </mx:horizontalAxis >  
            <mx:series >  
                <mx:AreaSeries  
                        yField="profit"  
                        displayName="Profit"  
                        areaStroke="\{s1\}"  
                        areaFill="\{sc1\}" />  
                <mx:AreaSeries  
                        yField="expenses"  
                        displayName="Expenses"  
                        areaStroke="\{s2\}"  
                        areaFill="\{sc2\}" />  
                <mx:AreaSeries  
                        yField="amount"  
                        displayName="Amount"  
                        areaStroke="\{s3\}"  
                        areaFill="\{sc3\}" />  
            </mx:series >  
        </mx:AreaChart >  
        <mx:Legend dataProvider="\{Areachart\}" />  
    </mx:Panel >  
</mx:Application >

[Chart]: http://farm3.static.flickr.com/2537/3874475694_87d4b75b4f.jpg