Flex报表技术备忘（转）

Flex 中为我们提供了大量的图表技术，结合手册。总结一下。大家有空看看。
1.PieChart饼图
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Script>
        <![CDATA[         
        import mx.collections.ArrayCollection;
        import mx.charts.events.ChartItemEvent;
        [Bindable]
        private var medalsAC:ArrayCollection = new ArrayCollection( [
            { Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
            { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
            { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 } ]);

        //data:整条记录。field:字段的名称。index：条目编号。percentValue：这一项在图表中占的百分比
        private function displayGold(data:Object, field:String, index:Number, percentValue:Number):String {
            var temp:String= (" " + percentValue).substr(0,6);
            return data.Country + ": " + '/n' + "金牌总数: " + data.Gold + '/n' + temp + "%";
        }
        //当单击时，单击的那一部分出来
        private function onClick(evt:ChartItemEvent):void {
            var arr:Array = [];
            arr[evt.hitData.chartItem.index] = 0.2;
            pie.perWedgeExplodeRadius = arr;
        }
        ]]>
    </mx:Script>

    <!--自定义扇形图块的颜色-->
    <mx:SolidColor id="sc1" color="blue" alpha=".6"/>
    <mx:SolidColor id="sc2" color="red" alpha=".6"/>
    <mx:SolidColor id="sc3" color="0x663300" alpha=".6"/>
    <!-- 自定义标签线条的颜色 -->
    <mx:Stroke id="callouts" weight="2" color="0x999999" alpha=".8" caps="square"/>
    <!-- 自定义饼图楔形之间边框的颜色 -->
    <mx:Stroke id="radial" weight="5" color="yellow" alpha=".3"/>

    <mx:Stroke id="pieborder" color="0x000000" weight="2" alpha=".5"/>
    <mx:Legend dataProvider="{chart}" horizontalCenter="233" verticalCenter="-170"/>
       <mx:PieChart id="chart" paddingRight="5" paddingLeft="5" showDataTips="true" horizontalCenter="-35" verticalCenter="4"
         dataProvider="{medalsAC}" selectionMode="single" itemClick="onClick(event)">         
            <mx:series>
            <!--
                nameField是使用该字段建图例
                labelPosition 标签显示的位置。可为"none","outside","callout","inside","insideWithCallout"      
                field是使用该字段建图
                labelFunction是自定义显示的标签
                calloutStroke是用标签线条的颜色来填充，
                radialStroke指定用于绘制饼图楔形之间边框的线条样式。
                stroke是指定设置此数据系列的笔触样式。必须指定某个 Stroke 对象来定义笔触。
                fills是用自定义扇形图块的颜色来填充
            -->
                <mx:PieSeries
                      id="pie"
                    nameField="Country"
                    labelPosition="callout"
                    field="Gold"
                    labelFunction="displayGold"
                    calloutStroke="{callouts}"
                    radialStroke="{radial}"
                    stroke="{pieborder}"   
                    fills="{[sc1, sc2, sc3]}"
                >
                <!--去掉阴影-->
                <mx:filters>
                    <mx:Array />
                </mx:filters>
                </mx:PieSeries>
            </mx:series>
        </mx:PieChart>
</mx:Application>

2.LineChart线图
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        <![CDATA[

        import mx.collections.ArrayCollection;

        [Bindable]
        private var expensesAC:ArrayCollection = new ArrayCollection( [
            { Month: "Jan", Profit: 20000, Expenses: 1500, Amount: 450 },
            { Month: "Feb", Profit: 1000, Expenses: 15000, Amount: 600 },
            { Month: "Mar", Profit: 15000, Expenses: 5000, Amount: 300 },
            { Month: "Apr", Profit: 1800, Expenses: 1200, Amount: 900 },
            { Month: "May", Profit: 2400, Expenses: 575, Amount: 500 } ]);
        ]]>
    </mx:Script>

    <mx:Panel title="LogAxis Example" height="100%" width="100%">

        <mx:LineChart id="linechart" height="100%" width="100%"
            paddingLeft="5" paddingRight="5"
            showDataTips="true" dataProvider="{expensesAC}">
               
            <mx:horizontalAxis>
                <mx:CategoryAxis categoryField="Month"/>
            </mx:horizontalAxis>
               
            <mx:verticalAxis>
                <mx:LogAxis interval="10"/>   <!--Ｙ轴的值成倍增长-->
            </mx:verticalAxis>
               
            <mx:series>
                <mx:LineSeries yField="Profit" form="curve" displayName="Profit"/>
                <mx:LineSeries yField="Expenses" form="curve" displayName="Expenses"/>
                <mx:LineSeries yField="Amount" form="curve" displayName="Amount"/>
            </mx:series>
        </mx:LineChart>

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

    </mx:Panel>
</mx:Application>

3.ColumnChart和BarChart方格图
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        <![CDATA[         
        import mx.collections.ArrayCollection;

        [Bindable]
        private var medalsAC:ArrayCollection = new ArrayCollection( [
            { Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
            { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
            { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 } ]);
        ]]>
    </mx:Script>

    <!-- 填充颜色 -->
    <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:Stroke id="s1" color="yellow" weight="2"/>
    <mx:Stroke id="s2" color="0xCCCCCC" weight="2"/>
    <mx:Stroke id="s3" color="0xFFCC66" weight="2"/>

    <mx:Panel title="ColumnChart and BarChart Controls Example"
        height="100%" width="100%" layout="horizontal">
        <mx:ColumnChart id="column"
            height="100%"
            width="45%"
            paddingLeft="5"
            paddingRight="5"
            showDataTips="true"
            dataProvider="{medalsAC}" selectionMode="single"
        >   
            <!--x轴显示的字段-->           
            <mx:horizontalAxis>
                <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%" selectionMode="single"
            paddingLeft="5" paddingRight="5"
            showDataTips="true" dataProvider="{medalsAC}">
               
            <mx:verticalAxis>
                <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:Application>

4.AreaChart面积图
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" fontSize="12">
    <!-- Define custom colors for use as fills in the AreaChart control. -->
    <mx:SolidColor id="sc1" color="blue" alpha=".3"/>
    <mx:SolidColor id="sc2" color="red" alpha=".3"/>
    <mx:SolidColor id="sc3" color="green" alpha=".3"/>

    <!-- Define custom Strokes. -->
    <mx:Stroke id = "s1" color="blue" weight="2"/>
    <mx:Stroke id = "s2" color="red" weight="2"/>
    <mx:Stroke id = "s3" color="green" weight="2"/>

    <mx:Panel title="LineChart and AreaChart Controls Example"
        height="100%" width="100%" layout="horizontal" fontSize="13">

        <mx:LineChart id="linechart" height="100%" width="45%"
            paddingLeft="5" paddingRight="5"
            showDataTips="true" dataProvider="{expensesAC}">
               
            <mx:horizontalAxis>
                <mx:CategoryAxis categoryField="Month"/>
            </mx:horizontalAxis>

            <mx:series>
                <mx:LineSeries yField="利润" form="curve" displayName="利润" lineStroke="{s1}"/>
                <mx:LineSeries yField="总额" form="curve" displayName="总额" lineStroke="{s2}"/>
                <mx:LineSeries yField="数量" form="curve" displayName="数量" lineStroke="{s3}"/>
            </mx:series>
        </mx:LineChart>
        <mx:Script>
        <![CDATA[

        import mx.collections.ArrayCollection;

        [Bindable]
        private var expensesAC:ArrayCollection = new ArrayCollection( [
            { Month: "Jan", 利润: 2000, 总额: 1500, 数量: 450 },
            { Month: "Feb", 利润: 1000, 总额: 200, 数量: 600 },
            { Month: "Mar", 利润: 1500, 总额: 500, 数量: 300 },
            { Month: "Apr", 利润: 1800, 总额: 1200, 数量: 900 },
            { Month: "May", 利润: 2400, 总额: 575, 数量: 500 } ]);
        ]]>
    </mx:Script>

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

        <mx:AreaChart id="Areachart" height="100%" width="45%"
             paddingLeft="5" paddingRight="5"
             showDataTips="true" dataProvider="{expensesAC}">
                
            <mx:horizontalAxis>
                <mx:CategoryAxis categoryField="Month"/>
            </mx:horizontalAxis>

            <mx:series>
                <mx:AreaSeries yField="利润" form="curve" displayName="利润" areaStroke="{s1}" areaFill="{sc1}"/>
                <mx:AreaSeries yField="总额" form="curve" displayName="总额" areaStroke="{s2}" areaFill="{sc2}"/>
                <mx:AreaSeries yField="数量" form="curve" displayName="数量" areaStroke="{s3}" areaFill="{sc3}"/>
            </mx:series>
        </mx:AreaChart>
           
        <mx:Legend dataProvider="{Areachart}"/>

    </mx:Panel>
</mx:Application>