Linechart-flex实例

<?xml version="1.0"?>
<!-- Simple example to demonstrate the LineChart and AreaChart 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">

    <fx:Script>
        <![CDATA[

        import mx.collections.ArrayCollection;

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

    <fx:Declarations>
        <!-- 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:SolidColorStroke id = "s1" color="blue" weight="2"/>
        <mx:SolidColorStroke id = "s2" color="red" weight="2"/>
        <mx:SolidColorStroke id = "s3" color="green" weight="2"/>
    </fx:Declarations>

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

        <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="Profit" form="curve" displayName="Profit" lineStroke="{s1}"/>
                <mx:LineSeries yField="Expenses" form="curve" displayName="Expenses" lineStroke="{s2}"/>
                <mx:LineSeries yField="Amount" form="curve" displayName="Amount" lineStroke="{s3}"/>
            </mx:series>
        </mx:LineChart>

        <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="Profit" form="curve" displayName="Profit" areaStroke="{s1}" areaFill="{sc1}"/>
                <mx:AreaSeries yField="Expenses" form="curve" displayName="Expenses" areaStroke="{s2}" areaFill="{sc2}"/>
                <mx:AreaSeries yField="Amount" form="curve" displayName="Amount" areaStroke="{s3}" areaFill="{sc3}"/>
            </mx:series>
        </mx:AreaChart>
            
        <mx:Legend dataProvider="{Areachart}"/>

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