Flex 圖表組件使用示例

 剛接觸flex圖表組件，在網上找了部分資料，現在整理一下，爲以後留下相關資料

 

<?xml version="1.0" encoding="utf-8"?>
<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" minWidth="955" minHeight="600" height="1246" width="1219">
    <s:layout>
        <s:BasicLayout/>
    </s:layout>
        <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
        #bubblechart,#barchart,#pieChart
        {
            fontFamily:Arial;
            fontSize:15;
            color:#FF0033;
        }
        #colChart
        {
            gutterLeft:80;
            gutterRight:50;
            gutterBottom:50;
            paddingTop:20;
        }
    </fx:Style>

    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;

            [Bindable]
            public var expenses:ArrayCollection = new ArrayCollection(
                [
                    {Month:"一月",Profit:2000,Expenses:1500,Amount:450},
                    {Month:"二月",Profit:1000,Expenses:200,Amount:600},
                    {Month:"三月",Profit:1500,Expenses:500,Amount:300},
                    {Month:"四月",Profit:1200,Expenses:300,Amount:300},
                    {Month:"五月",Profit:1600,Expenses:600,Amount:300},
                    {Month:"六月",Profit:1800,Expenses:700,Amount:300},
                    {Month:"七月",Profit:1300,Expenses:320,Amount:300},
                ]
            );
            //用於混合型圖表的數據
            [Bindable]
            public var SMITH:Array = [
                {date:"2008-08-22",point:45.87},
                {date:"2008-08-23",point:45.74},
                {date:"2008-08-24",point:45.77},
                {date:"2008-08-25",point:46.06}
            ];
            [Bindable]
            public var DECKER:Array = [
                {date:"2008-08-22",point:45.59},
                {date:"2008-08-23",point:45.3},
                {date:"2008-08-24",point:46.71},
                {date:"2008-08-25",point:46.88}
            ];

        ]]>
    </fx:Script>

    <fx:Declarations>
        <!-- 將非可視元素（例如服務、值對象）放在此處 -->
    </fx:Declarations>

    <!-- 線圖 -->
    <mx:Panel title="線圖" width="322" height="323">
        <mx:LineChart id="lineChart" dataProvider="{expenses}" showDataTips="true" width="272" height="224">
            <mx:horizontalAxis>
                <mx:CategoryAxis dataProvider="{expenses}" categoryField="Month"/>
            </mx:horizontalAxis>
            <mx:series>
                <mx:LineSeries yField="Profit" displayName="利潤"/>
                <mx:LineSeries yField="Expenses" displayName="費用"/>
            </mx:series>
        </mx:LineChart>
        <mx:Legend dataProvider="{lineChart}"/>
    </mx:Panel>

    <!-- 餅圖 -->
    <s:Panel x="354" y="-1" width="329" height="324" title="餅圖">
        <mx:PieChart x="79" y="61" id="pieChart" dataProvider="{expenses}" showDataTips="true" width="212" height="205">
            <mx:series>
                <mx:PieSeries displayName="Series 1" field="Expenses" nameField="Month" labelField="利潤"/>
            </mx:series>
        </mx:PieChart>
        <mx:Legend dataProvider="{pieChart}"/>
    </s:Panel>

    <!-- 區域圖表 -->
    <mx:Panel title="區域圖表" x="709" y="2" width="307" height="321">
        <!-- showDataTips表示鼠標移動到該點上會顯示提示信息 -->
        <mx:AreaChart id="myChart" dataProvider="{expenses}" showDataTips="true" width="262" height="215">
            <mx:horizontalAxis>
                <mx:CategoryAxis dataProvider="{expenses}" categoryField="Month"/>
            </mx:horizontalAxis>
            <mx:series>
                <mx:AreaSeries yField="Profit" displayName="利潤"/>
            </mx:series>
        </mx:AreaChart>
        <mx:Legend dataProvider="{myChart}"/>
    </mx:Panel>

    <!-- 條形圖表 -->
    <s:Panel x="0" y="353" width="320" height="466" title="條形圖表">
        <mx:BarChart x="10" y="52" id="barchart" width="292" height="350" dataProvider="{expenses}">
            <mx:verticalAxis>
                <mx:CategoryAxis dataProvider="{expenses}" categoryField="Month"/>
            </mx:verticalAxis>
            <mx:series>
                <mx:BarSeries displayName="利潤" xField="Profit" yField="Month"/>
                <mx:BarSeries displayName="費用" xField="Expenses" yField="Month"/>
            </mx:series>
        </mx:BarChart>
        <mx:Legend dataProvider="{barchart}"/>
    </s:Panel>

    <!-- 泡沫圖表 -->
    <s:Panel x="354" y="353" width="341" height="470" title="泡沫型圖表">
        <mx:BubbleChart x="22" y="69" id="bubblechart" width="295" height="329"
                        minRadius="1" maxRadius="50" dataProvider="{expenses}" showDataTips="true">
            <mx:series>
                <mx:BubbleSeries displayName="Profit" xField="Profit" yField="Expenses" radiusField="Amount"/>
            </mx:series>
        </mx:BubbleChart>
        <mx:Legend dataProvider="{bubblechart}"/>
    </s:Panel>

    <!-- 混合型圖表 -->
    <s:Panel x="709" y="353" width="360" height="469" title="混合型圖表">
        <mx:ColumnChart id="colChart" dataProvider="{SMITH}" showDataTips="true" width="332">
            <mx:horizontalAxis>
                <mx:CategoryAxis categoryField="date"/>
            </mx:horizontalAxis>
            <mx:verticalAxis>
                <mx:LinearAxis minimum="45" maximum="47"/>
            </mx:verticalAxis>
            <mx:series>
                <mx:ColumnSeries dataProvider="{SMITH}" xField="date" yField="point" displayName="SMITH">
                </mx:ColumnSeries>
                <mx:LineSeries dataProvider="{DECKER}" xField="date" yField="point" displayName="DECKER">
                </mx:LineSeries>
            </mx:series>
        </mx:ColumnChart>
    </s:Panel>

</s:Application>