Flex 4 : 使用 AreaChart 控件

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

 

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

<?xml version="1.0" ?>
<!-- charts/BasicArea.mxml -->
<!-- http://www.slsay.com/archives/154 -->
<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 图表序列的属性：

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

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

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

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

<?xml version="1.0" ?>
<!-- http://www.slsay.com/archives/154 -->
<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" />
        <!-- Define custom Strokes. -->
        <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 >