Flex中的图表

1、设计思路

（1）运用导航条，实现多个图在同一界面；

（2）实现各种不同的图

2、设计源码

chart.mxml：

 

[html] view plain copy print ?

1. <?xmlversion="1.0"encoding="utf-8"?>
2. <s:Applicationxmlns: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"
5. width="100%"height="100%"
6. xmlns:charts="mx.charts.*"
7. xmlns:series="mx.charts.series.*">
8. <s:layout>
9. <s:BasicLayout/>
10. </s:layout>
11. <fx:Declarations>
13. </fx:Declarations>
15. <fx:Script>
16. <![CDATA[
17. importmx.collections.ArrayCollection;
19. [Bindable]
20. privatevarchartArray:ArrayCollection=newArrayCollection([
21. {total:"星期一",apple:"78454",banana:"89454",orange:"45122",peach:"65323"},
22. {total:"星期二",apple:"57854",banana:"65454",orange:"56122",peach:"78845"},
23. {total:"星期三",apple:"56454",banana:"51544",orange:"45121",peach:"95656"},
24. {total:"星期四",apple:"95659",banana:"65645",orange:"32323",peach:"42122"},
25. {total:"星期五",apple:"54555",banana:"56566",orange:"56232",peach:"56512"},
26. {total:"星期六",apple:"54452",banana:"12454",orange:"78454",peach:"26565"},
27. {total:"星期日",apple:"23346",banana:"56129",orange:"56444",peach:"23566"},
28. ]);
30. [Bindable]
31. privatevarcandArray:ArrayCollection=newArrayCollection([
32. {Date:"2013-01-01",Open:40.75,High:40.75,Low:40.24,Close:40.31},
33. {Date:"2013-01-02",Open:39.98,High:40.78,Low:39.97,Close:40.34},
34. {Date:"2013-01-03",Open:40.38,High:40.66,Low:40.12,Close:40.63},
35. {Date:"2013-01-04",Open:40.49,High:40.99,Low:40.32,Close:40.98},
36. {Date:"2013-01-05",Open:40.13,High:40.46,Low:39.65,Close:39.95},
37. {Date:"2013-01-06",Open:39.00,High:39.50,Low:38.78,Close:38.62},
38. {Date:"2013-01-07",Open:38.68,High:39.34,Low:37.75,Close:38.84},
39. {Date:"2013-01-08",Open:38.76,High:38.76,Low:38.03,Close:38.12},
40. {Date:"2013-01-09",Open:37.98,High:37.98,Low:36.56,Close:36.69},
41. {Date:"2013-01-10",Open:36.61,High:37.56,Low:36.48,Close:36.86}
42. ]);
43. ]]>
44. </fx:Script>
46. <mx:TabNavigatorwidth="100%"height="100%"paddingBottom="10"paddingLeft="10"paddingRight="10"paddingTop="10">
47. <s:NavigatorContentlabel="饼图"width="100%"height="100%">
48. <mx:VBoxwidth="100%"height="100%">
49. <charts:PieChartid="pie"dataProvider="{chartArray}"height="90%"width="100%"showDataTips="true">
50. <charts:series>
51. <series:PieSeriesdisplayName="总收入"field="apple"nameField="total"/>
52. </charts:series>
53. </charts:PieChart>
54. <mx:HBoxwidth="100%">
55. <s:Labelwidth="30%"/>
56. <charts:LegenddataProvider="{pie}"direction="horizontal"/>
57. </mx:HBox>
59. </mx:VBox>
60. </s:NavigatorContent>
61. <s:NavigatorContentlabel="柱状图"width="100%"height="100%">
62. <mx:VBoxwidth="100%"height="100%">
63. <charts:ColumnChartid="column"dataProvider="{chartArray}"showDataTips="true"width="100%"height="90%"fontSize="16">
64. <charts:horizontalAxis>
65. <charts:CategoryAxiscategoryField="total"displayName="星期"/>
66. </charts:horizontalAxis>
67. <charts:series>
68. <series:ColumnSeriesdisplayName="苹果"yField="apple"xField="total"/>
69. <series:ColumnSeriesdisplayName="香蕉"yField="banana"xField="total"/>
70. <series:ColumnSeriesdisplayName="橘子"yField="orange"xField="total"/>
71. <series:ColumnSeriesdisplayName="桃子"yField="peach"xField="total"/>
72. </charts:series>
73. </charts:ColumnChart>
74. <mx:HBoxwidth="100%">
75. <s:Labelwidth="45%"/>
76. <charts:LegenddataProvider="{column}"height="25"fontSize="16"/>
77. </mx:HBox>
78. </mx:VBox>
79. </s:NavigatorContent>
80. <s:NavigatorContentlabel="面积图"width="100%"height="100%">
81. <mx:VBoxwidth="100%"height="100%">
82. <charts:AreaChartid="area"dataProvider="{chartArray}"fontSize="16"width="100%"height="90%"showDataTips="true">
83. <charts:horizontalAxis>
84. <charts:CategoryAxiscategoryField="total"displayName="星期"/>
85. </charts:horizontalAxis>
86. <charts:series>
87. <series:AreaSeriesdisplayName="苹果"yField="apple"xField="total"/>
88. <series:AreaSeriesdisplayName="香蕉"yField="banana"xField="total"/>
89. <series:AreaSeriesdisplayName="橘子"yField="orange"xField="total"/>
90. <series:AreaSeriesdisplayName="桃子"yField="peach"xField="total"/>
91. </charts:series>
92. </charts:AreaChart>
93. <mx:HBoxwidth="100%">
94. <s:Labelwidth="45%"/>
95. <charts:LegenddataProvider="{area}"height="25"fontSize="16"/>
96. </mx:HBox>
97. </mx:VBox>
98. </s:NavigatorContent>
99. <s:NavigatorContentlabel="折线图"width="100%"height="100%">
100. <mx:VBoxwidth="100%"height="100%">
101. <charts:LineChartid="line"dataProvider="{chartArray}"fontSize="16"width="100%"height="90%"showDataTips="true">
102. <charts:horizontalAxis>
103. <charts:CategoryAxiscategoryField="total"displayName="星期"/>
104. </charts:horizontalAxis>
105. <charts:series>
106. <series:LineSeriesdisplayName="苹果"yField="apple"xField="total"/>
107. <series:LineSeriesdisplayName="香蕉"yField="banana"xField="total"/>
108. <series:LineSeriesdisplayName="橘子"yField="orange"xField="total"/>
109. <series:LineSeriesdisplayName="桃子"yField="peach"xField="total"/>
110. </charts:series>
111. </charts:LineChart>
112. <mx:HBoxwidth="100%">
113. <s:Labelwidth="45%"/>
114. <charts:LegenddataProvider="{line}"height="25"fontSize="16"/>
115. </mx:HBox>
116. </mx:VBox>
117. </s:NavigatorContent>
118. <s:NavigatorContentlabel="条状图"width="100%"height="100%">
119. <mx:VBoxwidth="100%"height="100%">
120. <charts:BarChartid="bar"dataProvider="{chartArray}"fontSize="16"width="100%"height="90%"showDataTips="true">
121. <charts:verticalAxis>
122. <charts:CategoryAxiscategoryField="total"displayName="星期"/>
123. </charts:verticalAxis>
124. <charts:series>
125. <series:BarSeriesdisplayName="苹果"xField="apple"yField="total"/>
126. <series:BarSeriesdisplayName="香蕉"xField="banana"yField="total"/>
127. <series:BarSeriesdisplayName="橘子"xField="orange"yField="total"/>
128. <series:BarSeriesdisplayName="桃子"xField="peach"yField="total"/>
129. </charts:series>
130. </charts:BarChart>
131. <mx:HBoxwidth="100%">
132. <s:Labelwidth="45%"/>
133. <charts:LegenddataProvider="{bar}"height="25"fontSize="16"/>
134. </mx:HBox>
135. </mx:VBox>
136. </s:NavigatorContent>
137. <s:NavigatorContentlabel="气泡图"width="100%"height="100%">
138. <mx:VBoxwidth="100%"height="100%">
139. <charts:BubbleChartid="bubble"dataProvider="{chartArray}"fontSize="16"showDataTips="true"width="100%"height="90%">
140. <charts:series>
141. <series:BubbleSeriesdisplayName="苹果"yField="apple"radiusField="banana"/>
142. <series:BubbleSeriesdisplayName="橘子"yField="orange"radiusField="banana"/>
143. <series:BubbleSeriesdisplayName="桃子"yField="peach"radiusField="banana"/>
144. </charts:series>
145. </charts:BubbleChart>
146. <mx:HBoxwidth="100%">
147. <s:Labelwidth="45%"/>
148. <charts:LegenddataProvider="{bubble}"height="25"/>
149. </mx:HBox>
150. </mx:VBox>
151. </s:NavigatorContent>
152. <s:NavigatorContentlabel="蜡烛图"width="100%"height="100%">
153. <mx:VBoxwidth="100%"height="100%">
154. <charts:CandlestickChartid="candlestick"dataProvider="{candArray}"fontSize="16"width="100%"height="90%">
155. <charts:verticalAxis>
156. <mx:LinearAxisid="haxis"baseAtZero="true"title="Price"/>
157. </charts:verticalAxis>
158. <charts:horizontalAxis>
159. <mx:CategoryAxiscategoryField="Date"title="Date"displayName="日期"/>
160. </charts:horizontalAxis>
161. <charts:horizontalAxisRenderers>
162. <mx:AxisRendereraxis="{haxis}"canDropLabels="true"/>
163. </charts:horizontalAxisRenderers>
164. <charts:series>
165. <series:CandlestickSeriesopenField="Open"
166. highField="High"
167. lowField="Low"
168. closeField="Close"/>
169. </charts:series>
170. </charts:CandlestickChart>
171. <mx:HBoxwidth="100%">
172. <s:Labelwidth="45%"/>
173. <charts:LegenddataProvider="{candlestick}"height="25"/>
174. </mx:HBox>
175. </mx:VBox>
176. </s:NavigatorContent>
177. <s:NavigatorContentlabel="基址图"width="100%"height="100%">
178. <mx:VBoxwidth="100%"height="100%">
179. <mx:PlotChartid="plot"dataProvider="{chartArray}"fontSize="16"showDataTips="true"width="100%"height="90%">
180. <mx:horizontalAxis>
181. <mx:CategoryAxiscategoryField="total"displayName="星期"/>
182. </mx:horizontalAxis>
183. <mx:series>
184. <mx:PlotSeriesdisplayName="苹果"yField="apple"xField="total"/>
185. <mx:PlotSeriesdisplayName="香蕉"yField="banana"xField="total"/>
186. <mx:PlotSeriesdisplayName="橘子"yField="orange"xField="total"/>
187. <mx:PlotSeriesdisplayName="桃子"yField="peach"xField="total"/>
188. </mx:series>
189. </mx:PlotChart>
190. <mx:HBoxwidth="100%">
191. <s:Labelwidth="45%"/>
192. <charts:LegenddataProvider="{plot}"height="25"/>
193. </mx:HBox>
194. </mx:VBox>
195. </s:NavigatorContent>
196. </mx:TabNavigator>
197. </s:Application>

<?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"
			   width="100%" height="100%" 
			   xmlns:charts="mx.charts.*" 
			   xmlns:series="mx.charts.series.*">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<fx:Declarations>
		
	</fx:Declarations>
	
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			
			[Bindable]
			private var chartArray:ArrayCollection = new ArrayCollection([
				{total:"星期一",apple:"78454",banana:"89454",orange:"45122",peach:"65323"},
				{total:"星期二",apple:"57854",banana:"65454",orange:"56122",peach:"78845"},
				{total:"星期三",apple:"56454",banana:"51544",orange:"45121",peach:"95656"},
				{total:"星期四",apple:"95659",banana:"65645",orange:"32323",peach:"42122"},
				{total:"星期五",apple:"54555",banana:"56566",orange:"56232",peach:"56512"},
				{total:"星期六",apple:"54452",banana:"12454",orange:"78454",peach:"26565"},
				{total:"星期日",apple:"23346",banana:"56129",orange:"56444",peach:"23566"},
			]);
			
			[Bindable]
			private var candArray:ArrayCollection = new ArrayCollection([
				{ Date: "2013-01-01", Open: 40.75,  High: 40.75, Low: 40.24, Close:40.31},
				{ Date: "2013-01-02", Open: 39.98,  High: 40.78, Low: 39.97, Close:40.34},
				{ Date: "2013-01-03", Open: 40.38,  High: 40.66, Low: 40.12, Close:40.63},
				{ Date: "2013-01-04", Open: 40.49,  High: 40.99, Low: 40.32, Close:40.98},
				{ Date: "2013-01-05", Open: 40.13,  High: 40.46, Low: 39.65, Close:39.95},
				{ Date: "2013-01-06", Open: 39.00,  High: 39.50, Low: 38.78, Close:38.62}, 
				{ Date: "2013-01-07", Open: 38.68,  High: 39.34, Low: 37.75, Close:38.84}, 
				{ Date: "2013-01-08", Open: 38.76,  High: 38.76, Low: 38.03, Close:38.12}, 
				{ Date: "2013-01-09", Open: 37.98,  High: 37.98, Low: 36.56, Close:36.69},                       
				{ Date: "2013-01-10", Open: 36.61,  High: 37.56, Low: 36.48, Close:36.86} 
			]);
 		]]>
	</fx:Script>
	
	<mx:TabNavigator width="100%" height="100%" paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10">
		<s:NavigatorContent label="饼图" width="100%" height="100%">
			<mx:VBox width="100%" height="100%">
				<charts:PieChart id="pie" dataProvider="{chartArray}" height="90%" width="100%" showDataTips="true">
					<charts:series>
						<series:PieSeries displayName="总收入" field="apple" nameField="total"/>
					</charts:series>
				</charts:PieChart>
				<mx:HBox width="100%">
					<s:Label width="30%"/>
					<charts:Legend dataProvider="{pie}" direction="horizontal"/>
				</mx:HBox>
				
			</mx:VBox>
		</s:NavigatorContent>
		<s:NavigatorContent label="柱状图" width="100%" height="100%">
			<mx:VBox width="100%" height="100%">
				<charts:ColumnChart  id="column" dataProvider="{chartArray}" showDataTips="true" width="100%" height="90%" fontSize="16">
					<charts:horizontalAxis>
						<charts:CategoryAxis categoryField="total" displayName="星期"/>
					</charts:horizontalAxis>
					<charts:series>
						<series:ColumnSeries displayName="苹果" yField="apple" xField="total"/>
						<series:ColumnSeries displayName="香蕉" yField="banana" xField="total"/>
						<series:ColumnSeries displayName="橘子" yField="orange" xField="total"/>
						<series:ColumnSeries displayName="桃子" yField="peach" xField="total"/>
					</charts:series>
				</charts:ColumnChart>
				<mx:HBox width="100%">
					<s:Label width="45%"/>
					<charts:Legend dataProvider="{column}" height="25" fontSize="16"/>
				</mx:HBox>
			</mx:VBox>
		</s:NavigatorContent>
		<s:NavigatorContent label="面积图" width="100%" height="100%">
			<mx:VBox width="100%" height="100%">
				<charts:AreaChart id="area" dataProvider="{chartArray}" fontSize="16" width="100%" height="90%" showDataTips="true">
					<charts:horizontalAxis>
						<charts:CategoryAxis categoryField="total" displayName="星期"/>
					</charts:horizontalAxis>
					<charts:series>
						<series:AreaSeries displayName="苹果" yField="apple" xField="total"/>
						<series:AreaSeries displayName="香蕉" yField="banana" xField="total"/>
						<series:AreaSeries displayName="橘子" yField="orange" xField="total"/>
						<series:AreaSeries displayName="桃子" yField="peach" xField="total"/>
					</charts:series>
				</charts:AreaChart>
				<mx:HBox width="100%">
					<s:Label width="45%"/>
					<charts:Legend dataProvider="{area}" height="25" fontSize="16"/>
				</mx:HBox>
			</mx:VBox>
		</s:NavigatorContent>
		<s:NavigatorContent label="折线图" width="100%" height="100%">
			<mx:VBox width="100%" height="100%">
				<charts:LineChart id="line" dataProvider="{chartArray}" fontSize="16" width="100%" height="90%" showDataTips="true">
					<charts:horizontalAxis>
						<charts:CategoryAxis categoryField="total" displayName="星期"/>
					</charts:horizontalAxis>
					<charts:series>
						<series:LineSeries displayName="苹果" yField="apple" xField="total"/>
						<series:LineSeries displayName="香蕉" yField="banana" xField="total"/>
						<series:LineSeries displayName="橘子" yField="orange" xField="total"/>
						<series:LineSeries displayName="桃子" yField="peach" xField="total"/>
					</charts:series>
				</charts:LineChart>
				<mx:HBox width="100%">
					<s:Label width="45%"/>
					<charts:Legend dataProvider="{line}" height="25" fontSize="16"/>
				</mx:HBox>
			</mx:VBox>
		</s:NavigatorContent>
		<s:NavigatorContent label="条状图" width="100%" height="100%">
			<mx:VBox width="100%" height="100%">
				<charts:BarChart id="bar" dataProvider="{chartArray}" fontSize="16" width="100%" height="90%" showDataTips="true">
					<charts:verticalAxis>
						<charts:CategoryAxis categoryField="total" displayName="星期"/>
					</charts:verticalAxis>
					<charts:series>
						<series:BarSeries displayName="苹果" xField="apple" yField="total"/>
						<series:BarSeries displayName="香蕉" xField="banana" yField="total"/>
						<series:BarSeries displayName="橘子" xField="orange" yField="total"/>
						<series:BarSeries displayName="桃子" xField="peach" yField="total"/>
					</charts:series>
				</charts:BarChart>
				<mx:HBox width="100%">
					<s:Label width="45%"/>
					<charts:Legend dataProvider="{bar}" height="25" fontSize="16"/>
				</mx:HBox>
			</mx:VBox>
		</s:NavigatorContent>
		<s:NavigatorContent label="气泡图" width="100%" height="100%">
			<mx:VBox width="100%" height="100%">
				<charts:BubbleChart id="bubble" dataProvider="{chartArray}" fontSize="16" showDataTips="true" width="100%" height="90%">
					<charts:series>
						<series:BubbleSeries displayName="苹果" yField="apple" radiusField="banana"/>
						<series:BubbleSeries displayName="橘子" yField="orange" radiusField="banana"/>
						<series:BubbleSeries displayName="桃子" yField="peach" radiusField="banana"/>
					</charts:series>
				</charts:BubbleChart>
				<mx:HBox width="100%">
					<s:Label width="45%"/>
					<charts:Legend dataProvider="{bubble}" height="25"/>
				</mx:HBox>
			</mx:VBox>
		</s:NavigatorContent>
		<s:NavigatorContent label="蜡烛图" width="100%" height="100%">
			<mx:VBox width="100%" height="100%">
				<charts:CandlestickChart id="candlestick" dataProvider="{candArray}" fontSize="16" width="100%" height="90%">
					<charts:verticalAxis>
						<mx:LinearAxis id="haxis" baseAtZero="true" title="Price"/>
					</charts:verticalAxis>
					<charts:horizontalAxis>
						<mx:CategoryAxis categoryField="Date" title="Date" displayName="日期"/>
					</charts:horizontalAxis>
					<charts:horizontalAxisRenderers>
						<mx:AxisRenderer axis="{haxis}" canDropLabels="true"/>
					</charts:horizontalAxisRenderers>
					<charts:series>
						<series:CandlestickSeries  openField="Open" 
												   highField="High" 
												   lowField="Low" 
												   closeField="Close"/>
					</charts:series>
				</charts:CandlestickChart>
				<mx:HBox width="100%">
					<s:Label width="45%"/>
					<charts:Legend dataProvider="{candlestick}" height="25"/>
				</mx:HBox>
			</mx:VBox>
		</s:NavigatorContent>
		<s:NavigatorContent label="基址图" width="100%" height="100%">
			<mx:VBox width="100%" height="100%">
				<mx:PlotChart id="plot" dataProvider="{chartArray}" fontSize="16" showDataTips="true" width="100%" height="90%">
					<mx:horizontalAxis>
						<mx:CategoryAxis categoryField="total" displayName="星期"/>
					</mx:horizontalAxis>
					<mx:series>
						<mx:PlotSeries displayName="苹果" yField="apple" xField="total"/>
						<mx:PlotSeries displayName="香蕉" yField="banana" xField="total"/>
						<mx:PlotSeries displayName="橘子" yField="orange" xField="total"/>
						<mx:PlotSeries displayName="桃子" yField="peach" xField="total"/>
					</mx:series>
				</mx:PlotChart>
				<mx:HBox width="100%">
					<s:Label width="45%"/>
					<charts:Legend dataProvider="{plot}" height="25"/>
				</mx:HBox>
			</mx:VBox>
		</s:NavigatorContent>
	</mx:TabNavigator>
</s:Application>

3、运行结果

 

（1）饼图

（2）柱状图

（3）面积图

（4）折线图

（5）条状图

（6）气泡图

（7）蜡烛图

（8）基址图

 

原文地址：http://blog.csdn.net/you23hai45/article/details/12254487