如何利用Flash Builder4.0创建面积图

1、首先，创建一个Flex应用程序，用于编写面积图代码，面积图应用程序必须放在确定的目录下，并命名为“FlexChart.mxml”，如下图所示：

2、接着，切换视图，在组件视图中找到图表，在图表控件列表下找到AreaChart控件，如下图所示：

3、然后，将AreaChart拖放到设计视图窗口，在放置时会弹出一个窗口，这个是确定面积图的ID，可以进行修改，可以用默认的，确认后点击“确定”，如下图所示：

4、再将视图切换到原来的视图窗口，给AreaChart进行布局，布局时尽量保证面积图居中，其对应的Legend也居中

<mx:VBox width="100%" height="100%" paddingBottom="20" paddingLeft="20" paddingRight="30"

paddingTop="20">

       <mx:AreaChart id="area

            <mx:series>

                 <mx:AreaSeries displayName="Series 1" yField=""/>

           </mx:series>

      </mx:AreaChart>

      <mx:HBox width="100%" height="30">

               <s:Label width="47%"/>

              <mx:Legend dataProvider="{area}"/>

      </mx:HBox>

</mx:VBox>

如下图所示：

5、为面积图设计数据源，设计数据源时，特别注意需要引入ArrayCollection包

import mx.collections.ArrayCollection;

[Bindable]

//面积图数据源绑定

private var areaArray:ArrayCollection = new ArrayCollection([

       {quarter:"第一季度",student:"78895"},

       {quarter:"第二季度",student:"45124"},

       {quarter:"第三季度",student:"62356"},

       {quarter:"第四季度",student:"98956"}

]);

如下图所示：

6、最后，将areaArray通过dataProvider绑定到面积图上，跟数据源中的变量需要保持一致

dataProvider="{areaArray}"

并且，设置面积图的水平轴和纵轴

<mx:horizontalAxis>

          <mx:CategoryAxis displayName="季度" categoryField="quarter"/>

</mx:horizontalAxis>

<mx:series>

         <mx:AreaSeries displayName="学生人数" xField="quarter" yField="student"/>

</mx:series>

如下图所示：