`

Flex中的图表

 
阅读更多

1、设计思路

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

（2）实现各种不同的图

2、设计源码

chart.mxml：

 

[html] view plaincopyprint?
  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

分享到：
| Flex+BlazeDs+Java的教程及Demo
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics