第一步：提供数据源 我常用 ArrayCollection
第二步：设定图表的线条样式和填充样式（当然也可以放在css文件中）
第三步：给AreaChart 等图表组件的dataProvider属性赋值
第四步：设定横轴的刻度线 分类字段等属性
第五步：设定纵轴的分类字段等属性
另外：1、给图表的dataTipFunction 属性指定回调函数可以自定义tip的显示格式
2、指定labelFunction 的回调函数可以自定义横轴 或纵轴的label显示样式
3、应用showDataEffect hideDataEffectke为图表添加特效触发器（也可以有其他方式添加特效）
下面的代码就集中体现上面的五步成表 和特定的tip label 以及特效的应用方法
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<!--第一步:提供数据源-->
<mx:Script>
<![CDATA[
import mx.charts.series.AreaSeries;
import mx.charts.series.items.AreaSeriesItem;
import mx.charts.HitData;
import mx.charts.CategoryAxis
/* 一般把ArrayCollection对象作为图表组件的数据源，在今后的几个例子
中我将会使用这种格式的对象作为所有图表组件的数据源 */
import mx.collections.ArrayCollection;
//数据源一,这里是写死的，可通过连接数据库取得数据，这里暂且不谈
[Bindable]
private var ac:ArrayCollection=new ArrayCollection([
{Month: '一', Average: 800, max: 1500, min: 50}, {Month: '二', Average: 1300, max: 3300, min: 20}, {Month: '三', Average: 580, max: 700, min: 100}, {Month: '四', Average: 900, max: 1500, min: 145}, {Month: '五', Average: 2300, max: 2999, min: 200}, {Month: '六', Average: 590, max: 400, min: 100},
]);
//数据源二，同样是提前模拟的一些数据。
// ！！！注意：在 ac 的结尾一定要加上分号作为语句结束标记,否则会报错，自己试试看去掉分号是什么结果
//这个BUG曾经折磨了我两个小时之久，（我很笨的），一直以为as3.0会自动添加分号作为语句结束标记，所以反复检查都没有发现问题所在
//偶然中加上分号才编译通过，所以在此也是提醒自己要多加留心
[Bindable]
private var ac2:ArrayCollection=new ArrayCollection([
{Month: '七', Average: 200, max: 2588, min: 80}, {Month: '八', Average: 700, max: 1300, min: 80}, {Month: '九', Average: 800, max: 976, min: 200}, {Month: '十', Average: 400, max: 500, min: 5}, {Month: '十一', Average: 879, max: 2999, min: 500}, {Month: '十二', Average: 589, max: 800, min: 10},
]);
//为横坐标轴添加标签自定义函数
private function labelFunc(categoryValue:Object, previousCategoryValue:Object, axis:CategoryAxis, categoryItem:Object):String
{
return categoryItem.Month+'月份'
}
private function dataTipFunc(hitData:HitData):String
{
var t:String = '';
var areaSerStr:String = (hitData.chartItem.element as AreaSeries).yField.toString();
switch ( areaSerStr)
{
case 'Average':
t = '日平均销售额';
break;
case 'max':
t = '日最大销售额';
break;
case 'min':
t = '日最低销售额';
break;
}
var a:String=(hitData.chartItem as AreaSeriesItem).item.Month+'月份：' + '\n' + t+ ': ' + (hitData.chartItem as AreaSeriesItem).yValue
return a;
}
]]>
</mx:Script>
<!--第二步：定义图表的线条和填充样式-->
<!--Stroke 是为了定义线条样式的类
joints 属性定义线条在拐角处的样式
-->
<mx:Stroke id="s1"
color="red"
alpha="0.4"
weight="2"
/>
<mx:Stroke id="s2"
color="blue"
alpha="0.4"
weight="2"
/>
<mx:Stroke id="s3"
color="black"
alpha="0.4"
weight="2"
/>
<!--定义图表填充的样式-->
<mx:SolidColor id="sc1"
color="red"
alpha="0.3"/>
<mx:SolidColor id="sc2"
color="blue"
alpha="0.3"/>
<mx:SolidColor id="sc3"
color="black"
alpha="0.3"/>
<mx:Panel title="AreaChart图表示例" layout="vertical">
<mx:AreaChart id="areaChart" dataProvider="{ac}" width="100%" height="100%" dataTipFunction="dataTipFunc" showDataTips="true">
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="Month" labelFunction="labelFunc" displayName="月份" title="月份"/>
</mx:horizontalAxis>
<mx:series>
<mx:AreaSeries areaFill="{sc1}" areaStroke="{s1}" yField="Average" >
<mx:showDataEffect>
<mx:SeriesInterpolate duration="1000"/>
</mx:showDataEffect>
</mx:AreaSeries>
<mx:AreaSeries areaFill="{sc2}" areaStroke="{s2}" yField="max" >
<mx:showDataEffect>
<mx:SeriesInterpolate duration="1000"/>
</mx:showDataEffect>
</mx:AreaSeries>
<mx:AreaSeries areaFill="{sc3}" areaStroke="{s3}" yField="min" >
<mx:showDataEffect>
<mx:SeriesInterpolate duration="1000"/>
</mx:showDataEffect>
</mx:AreaSeries>
</mx:series>
</mx:AreaChart>
<mx:Legend dataProvider="{areaChart}"/>
<mx:RadioButtonGroup id="group"/>
<mx:RadioButton label="数据源一" click="areaChart.dataProvider = this.ac"/>
<mx:RadioButton label="数据源二" click="areaChart.dataProvider = this.ac2"/>
</mx:Panel>
</mx:Application>