Flex中的图表

1、设计思路

(1)运用导航条,实现多个图在同一界面;

(2)实现各种不同的图

2、设计源码

chart.mxml:

 

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值