Flex Charts（AreaChart 和LineChart）的使用方法

1. <?xml version="Chart1.0"?>
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
4.     <mx:Script>
5.         <![CDATA[
7.         import mx.collections.ArrayCollection;
9.         [Bindable]
10.         private var expensesAC:ArrayCollection = new ArrayCollection( [
11.             { Month: "Jan", Profit: 2100, Expenses: 1500, Amount: 450 },
12.             { Month: "Feb", Profit: 1300, Expenses: 900, Amount: 900 },
13.             { Month: "Mar", Profit: 1800, Expenses: 800, Amount: 900 },
14.             { Month: "Apr", Profit: 9800, Expenses: 1200, Amount: 900 },
15.             { Month: "May", Profit: 3400, Expenses: 575, Amount: 500 } ]);
16.         ]]>
17.     </mx:Script>
19.     <!-- Define custom colors for use as fills in the AreaChart control. -->
20.     <mx:SolidColor id="sc1" color="blue" alpha=".3"/>
21.     <mx:SolidColor id="sc2" color="red" alpha=".3"/>
22.     <mx:SolidColor id="sc3" color="green" alpha=".3"/>
24.     <!-- Define custom Strokes. -->
25.     <mx:Stroke id = "s1" color="blue" weight="2"/>
26.     <mx:Stroke id = "s2" color="red" weight="2"/>
27.     <mx:Stroke id = "s3" color="green" weight="2"/>
29.     <mx:Panel title="LineChart and AreaChart Controls Example" 
30.         height="100%" width="100%" layout="horizontal">
32.         <mx:LineChart id="linechart" height="100%" width="45%"
33.             paddingLeft="5" paddingRight="5" 
34.             showDataTips="true" dataProvider="{expensesAC}">
35.                 
36.             <mx:horizontalAxis>
37.                 <mx:CategoryAxis categoryField="Month"/>
38.             </mx:horizontalAxis>
40.             <mx:series>
41.                 <mx:LineSeries yField="Profit" form="curve" displayName="盈利" lineStroke="{s1}"/>
42.                 <mx:LineSeries yField="Expenses" form="curve" displayName="花费" lineStroke="{s2}"/>
43.                 <mx:LineSeries yField="Amount" form="curve" displayName="总额" lineStroke="{s3}"/>
44.             </mx:series>
45.         </mx:LineChart>
47.         <mx:Legend dataProvider="{linechart}"/>
49.         <mx:AreaChart id="Areachart" height="100%" width="45%"
50.              paddingLeft="5" paddingRight="5" 
51.              showDataTips="true" dataProvider="{expensesAC}">
52.                  
53.             <mx:horizontalAxis>
54.                 <mx:CategoryAxis categoryField="Month"/>
55.             </mx:horizontalAxis>
57.             <mx:series>
58.                 <mx:AreaSeries yField="Profit" form="curve" displayName="盈利" areaStroke="{s1}" areaFill="{sc1}"/>
59.                 <mx:AreaSeries yField="Expenses" form="curve" displayName="花费" areaStroke="{s2}" areaFill="{sc2}"/>
60.                 <mx:AreaSeries yField="Amount" form="curve" displayName="总额" areaStroke="{s3}" areaFill="{sc3}"/>
61.             </mx:series>
62.         </mx:AreaChart>
63.             
64.         <mx:Legend dataProvider="{Areachart}"/>
66.     </mx:Panel>
67. </mx:Application>