刚接触flex图表组件，在网上找了部分资料，现在整理一下，为以后留下相关资料

1. <?xml version="1.0" encoding="utf-8"?> 
2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
3.                xmlns:s="library://ns.adobe.com/flex/spark" 
4.                xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" height="1246" width="1219"> 
5.     <s:layout> 
6.         <s:BasicLayout/> 
7.     </s:layout> 
8.         <fx:Style> 
9.         @namespace s "library://ns.adobe.com/flex/spark"; 
10.         @namespace mx "library://ns.adobe.com/flex/mx"; 
11.         #bubblechart,#barchart,#pieChart 
12.         { 
13.             fontFamily:Arial; 
14.             fontSize:15; 
15.             color:#FF0033; 
16.         } 
17.         #colChart 
18.         { 
19.             gutterLeft:80; 
20.             gutterRight:50; 
21.             gutterBottom:50; 
22.             paddingTop:20; 
23.         } 
24.     </fx:Style> 
25.      
26.     <fx:Script> 
27.         <![CDATA[ 
28.             import mx.collections.ArrayCollection; 
29.              
30.             [Bindable] 
31.             public var expenses:ArrayCollection = new ArrayCollection( 
32.                 [ 
33.                     {Month:"一月",Profit:2000,Expenses:1500,Amount:450}, 
34.                     {Month:"二月",Profit:1000,Expenses:200,Amount:600}, 
35.                     {Month:"三月",Profit:1500,Expenses:500,Amount:300}, 
36.                     {Month:"四月",Profit:1200,Expenses:300,Amount:300}, 
37.                     {Month:"五月",Profit:1600,Expenses:600,Amount:300}, 
38.                     {Month:"六月",Profit:1800,Expenses:700,Amount:300}, 
39.                     {Month:"七月",Profit:1300,Expenses:320,Amount:300}, 
40.                 ] 
41.             ); 
42.             //用于混合型图表的数据 
43.             [Bindable] 
44.             public var SMITH:Array = [ 
45.                 {date:"2008-08-22",point:45.87}, 
46.                 {date:"2008-08-23",point:45.74}, 
47.                 {date:"2008-08-24",point:45.77}, 
48.                 {date:"2008-08-25",point:46.06} 
49.             ]; 
50.             [Bindable] 
51.             public var DECKER:Array = [ 
52.                 {date:"2008-08-22",point:45.59}, 
53.                 {date:"2008-08-23",point:45.3}, 
54.                 {date:"2008-08-24",point:46.71}, 
55.                 {date:"2008-08-25",point:46.88} 
56.             ]; 
57.              
58.         ]]>   
59.     </fx:Script> 
60.      
61.     <fx:Declarations> 
62.         <!-- 将非可视元素（例如服务、值对象）放在此处 --> 
63.     </fx:Declarations> 
64.      
65.     <!-- 线图 --> 
66.     <mx:Panel title="线图" width="322" height="323">   
67.         <mx:LineChart id="lineChart" dataProvider="{expenses}" showDataTips="true" width="272" height="224"> 
68.             <mx:horizontalAxis> 
69.                 <mx:CategoryAxis dataProvider="{expenses}" categoryField="Month"/> 
70.             </mx:horizontalAxis> 
71.             <mx:series> 
72.                 <mx:LineSeries yField="Profit" displayName="利润"/> 
73.                 <mx:LineSeries yField="Expenses" displayName="费用"/> 
74.             </mx:series> 
75.         </mx:LineChart> 
76.         <mx:Legend dataProvider="{lineChart}"/> 
77.     </mx:Panel> 
78.      
79.     <!-- 饼图 --> 
80.     <s:Panel x="354" y="-1" width="329" height="324" title="饼图"> 
81.         <mx:PieChart x="79" y="61" id="pieChart" dataProvider="{expenses}" showDataTips="true" width="212" height="205"> 
82.             <mx:series> 
83.                 <mx:PieSeries displayName="Series 1" field="Expenses" nameField="Month" labelField="利润"/> 
84.             </mx:series> 
85.         </mx:PieChart> 
86.         <mx:Legend dataProvider="{pieChart}"/> 
87.     </s:Panel> 
88.      
89.     <!-- 区域图表 --> 
90.     <mx:Panel title="区域图表" x="709" y="2" width="307" height="321">   
91.         <!-- showDataTips表示鼠标移动到该点上会显示提示信息 --> 
92.         <mx:AreaChart id="myChart" dataProvider="{expenses}" showDataTips="true" width="262" height="215">    
93.             <mx:horizontalAxis> 
94.                 <mx:CategoryAxis dataProvider="{expenses}" categoryField="Month"/> 
95.             </mx:horizontalAxis>    
96.             <mx:series> 
97.                 <mx:AreaSeries yField="Profit" displayName="利润"/> 
98.             </mx:series>    
99.         </mx:AreaChart>   
100.         <mx:Legend dataProvider="{myChart}"/>   
101.     </mx:Panel> 
102.      
103.     <!-- 条形图表 --> 
104.     <s:Panel x="0" y="353" width="320" height="466" title="条形图表"> 
105.         <mx:BarChart x="10" y="52" id="barchart" width="292" height="350" dataProvider="{expenses}"> 
106.             <mx:verticalAxis> 
107.                 <mx:CategoryAxis dataProvider="{expenses}" categoryField="Month"/> 
108.             </mx:verticalAxis> 
109.             <mx:series> 
110.                 <mx:BarSeries displayName="利润" xField="Profit" yField="Month"/> 
111.                 <mx:BarSeries displayName="费用" xField="Expenses" yField="Month"/> 
112.             </mx:series> 
113.         </mx:BarChart> 
114.         <mx:Legend dataProvider="{barchart}"/> 
115.     </s:Panel> 
116.      
117.     <!-- 泡沫图表 --> 
118.     <s:Panel x="354" y="353" width="341" height="470" title="泡沫型图表"> 
119.         <mx:BubbleChart x="22" y="69" id="bubblechart" width="295" height="329" 
120.                         minRadius="1" maxRadius="50" dataProvider="{expenses}" showDataTips="true"> 
121.             <mx:series> 
122.                 <mx:BubbleSeries displayName="Profit" xField="Profit" yField="Expenses" radiusField="Amount"/> 
123.             </mx:series> 
124.         </mx:BubbleChart> 
125.         <mx:Legend dataProvider="{bubblechart}"/> 
126.     </s:Panel> 
127.      
128.     <!-- 混合型图表 --> 
129.     <s:Panel x="709" y="353" width="360" height="469" title="混合型图表"> 
130.         <mx:ColumnChart id="colChart" dataProvider="{SMITH}" showDataTips="true" width="332"> 
131.             <mx:horizontalAxis> 
132.                 <mx:CategoryAxis categoryField="date"/> 
133.             </mx:horizontalAxis> 
134.             <mx:verticalAxis> 
135.                 <mx:LinearAxis minimum="45" maximum="47"/> 
136.             </mx:verticalAxis> 
137.             <mx:series> 
138.                 <mx:ColumnSeries dataProvider="{SMITH}" xField="date" yField="point" displayName="SMITH"> 
139.                 </mx:ColumnSeries> 
140.                 <mx:LineSeries dataProvider="{DECKER}" xField="date" yField="point" displayName="DECKER">      
141.                 </mx:LineSeries> 
142.             </mx:series> 
143.         </mx:ColumnChart> 
144.     </s:Panel> 
145.      
146. </s:Application>