flex AreaChart

第一步：提供数据源  我常用 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>