本示例是介绍了 柱状图，饼状图，面积图，折线图的基本用法，详细属性配置请参考ActionScript3.0官方文档API
http://help.adobe.com/zh_CN/FlashPlatform/reference/actionscript/3/index.html

<?xml version="1.0"?>  
<!-- Simple example to demonstrate the ColumnChart and BarChart controls. -->  
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx">  
    <s:layout>  
        <s:HorizontalLayout />  
    </s:layout>  
    <fx:Script>  
        <![CDATA[           
            import mx.collections.ArrayCollection; 
             
            [Bindable] 
            private var medalsAC:ArrayCollection = new ArrayCollection( [ 
                { Country: "美国", Gold: 35, Silver:39, Bronze: 29 }, 
                { Country: "中国", Gold: 32, Silver:17, Bronze: 14 }, 
                { Country: "俄罗斯", Gold: 27, Silver:27, Bronze: 38 } ]); 
             
            private function displayGold(data:Object, field:String, index:Number, percentValue:Number):String { 
                var temp:String = (" " + percentValue).toString().substr(0,6); 
                return data.Country + ": " + "金牌总数: " + data.Gold + '\n' + temp + "%"; 
            } 
        ]]>  
    </fx:Script>  
      
    <fx:Declarations>  
        <!-- 设置列的填充颜色 -->  
        <mx:SolidColor id="sc1" color="yellow" alpha=".8"/>  
        <mx:SolidColor id="sc2" color="0xCCCCCC" alpha=".6"/>  
        <mx:SolidColor id="sc3" color="0xFFCC66" alpha=".6"/>  
        <!-- 设置列的边框-->  
        <mx:SolidColorStroke id="s1" color="#FF6666" weight="2"/>  
        <mx:SolidColorStroke id="s2" color="#0066CC" weight="2"/>  
        <mx:SolidColorStroke id="s3" color="#99CC00" weight="2"/>  
          
        <!-- 饼图上用于说明信息的标注线 -->  
        <mx:SolidColorStroke id="callouts" weight="2" color="0x999999" alpha=".8" caps="square"/>  
        <!-- 饼图之间的分割线-->  
        <mx:SolidColorStroke id="radial" weight="1" color="#CC3333" alpha=".6"/>  
        <!-- 饼图和图例的外边框 -->  
        <mx:SolidColorStroke id="pieborder" color="0x000000" weight="2" alpha=".5"/>  
          
    </fx:Declarations>  
      
    <mx:Panel title="ColumnChart 和 BarChart 控制示例（介绍美国、中国和俄罗斯的金、银、铜获奖数量）" height="50%" width="30%" layout="horizontal">  
        <mx:ColumnChart id="column" type="clustered" height="100%" width="45%" paddingLeft="5" paddingRight="5" showDataTips="true" dataProvider="{medalsAC}">    
            <mx:horizontalAxis>  <!-- X水平轴 -->  
                <mx:CategoryAxis categoryField="Country"/>  
            </mx:horizontalAxis>  
            <mx:series>  
                <mx:ColumnSeries xField="Country" yField="Gold" displayName="Gold" fill="{sc1}" stroke="{s1}" />  
                <mx:ColumnSeries xField="Country" yField="Silver" displayName="Silver" fill="{sc2}" stroke="{s2}" />  
                <mx:ColumnSeries xField="Country" yField="Bronze" displayName="Bronze" fill="{sc3}" stroke="{s3}" />  
            </mx:series>  
        </mx:ColumnChart>  
        <mx:Legend dataProvider="{column}"/>  <!-- 添加图例 -->  
          
        <mx:BarChart id="bar" height="100%" width="45%" paddingLeft="5" paddingRight="5" showDataTips="true" dataProvider="{medalsAC}">  
            <mx:verticalAxis>  <!-- X垂直轴 -->  
                <mx:CategoryAxis categoryField="Country"/>  
            </mx:verticalAxis>  
            <mx:series>  
                <mx:BarSeries yField="Country" xField="Gold" displayName="Gold" fill="{sc1}" stroke="{s1}" />  
                <mx:BarSeries yField="Country" xField="Silver" displayName="Silver" fill="{sc2}" stroke="{s2}" />  
                <mx:BarSeries yField="Country" xField="Bronze" displayName="Bronze" fill="{sc3}" stroke="{s3}" />  
            </mx:series>  
        </mx:BarChart>  
        <mx:Legend dataProvider="{bar}"/>  
    </mx:Panel>  
      
    <mx:Panel title="LineChart 和  AreaChart 控制示例（介绍美国、中国和俄罗斯的金、银、铜获奖数量）" horizontalAlign="center" height="100%" width="20%" layout="vertical">  
        <mx:LineChart id="linechart" height="50%" width="100%" paddingLeft="5" paddingRight="5" showDataTips="true" dataProvider="{medalsAC}">  
            <mx:horizontalAxis>  
                <mx:CategoryAxis categoryField="Month"/>  
            </mx:horizontalAxis>  
            <mx:series>  
                <mx:LineSeries yField="Gold" form="curve" displayName="金" lineStroke="{s1}"/>  
                <mx:LineSeries yField="Silver" form="curve" displayName="银" lineStroke="{s2}"/>  
                <mx:LineSeries yField="Bronze" form="curve" displayName="铜" lineStroke="{s3}"/>  
            </mx:series>  
        </mx:LineChart>  
        <mx:Legend dataProvider="{linechart}" direction="horizontal" labelPlacement="bottom"/>  
          
        <mx:AreaChart id="Areachart" height="50%" width="100%" paddingLeft="5" paddingRight="5" showDataTips="true" dataProvider="{medalsAC}">  
            <mx:horizontalAxis>  
                <mx:CategoryAxis categoryField="Month"/>  
            </mx:horizontalAxis>  
            <mx:series>  
                <mx:AreaSeries yField="Gold" form="curve" displayName="金" areaStroke="{s1}" areaFill="{sc1}"/>  
                <mx:AreaSeries yField="Silver" form="curve" displayName="银" areaStroke="{s2}" areaFill="{sc2}"/>  
                <mx:AreaSeries yField="Bronze" form="curve" displayName="铜" areaStroke="{s3}" areaFill="{sc3}"/>  
            </mx:series>  
        </mx:AreaChart>  
          
        <mx:Legend dataProvider="{Areachart}" direction="horizontal" labelPlacement="bottom"/>  
    </mx:Panel>  
      
    <mx:Panel title="PieChart 控制示例（清理阴影的和未清理阴影的）" horizontalAlign="center" height="100%" width="40%" layout="vertical">  
        <mx:PieChart id="chart" height="50%"  width="100%" paddingRight="5" paddingLeft="5" showDataTips="true" dataProvider="{medalsAC}" >            
            <mx:series>  
                <mx:PieSeries nameField="Country" labelPosition="callout" field="Gold" labelFunction="displayGold"   
                              calloutStroke="{callouts}" radialStroke="{radial}" stroke="{pieborder}" fills="{[sc1, sc2, sc3]}">  
                    <!-- 清理饼图阴影. -->  
                    <mx:filters>  
                        <fx:Array/>  
                    </mx:filters>  
                </mx:PieSeries>  
            </mx:series>  
        </mx:PieChart>    
        <mx:Legend dataProvider="{chart}" direction="horizontal" labelPlacement="bottom"/>  
          
        <mx:PieChart id="chart2" height="50%"  width="100%" paddingRight="5" paddingLeft="5" showDataTips="true"  dataProvider="{medalsAC}" >            
            <mx:series>  
                <mx:PieSeries nameField="Country" labelPosition="callout" field="Gold" labelFunction="displayGold"   
                              calloutStroke="{callouts}" radialStroke="{radial}" stroke="{pieborder}" fills="{[sc1, sc2, sc3]}">  
                </mx:PieSeries>  
            </mx:series>  
        </mx:PieChart>    
        <mx:Legend dataProvider="{chart}" direction="horizontal" labelPlacement="bottom"/>  
    </mx:Panel>  
      
</s:Application>

未经允许请勿转载：程序喵 » 【Flex】自带的Charts图表使用