如何利用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" width="100%" height="100%"> <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>如下图所示：