flex4.6畫圖——柱狀圖

 Flex4柱狀圖：

代碼如下：兩種數據源，第一種xml數據源已經註釋，本例使用ArrayCollection顯示。

<?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="1073" height="654" minWidth="955" minHeight="600">
	<fx:Declarations>
		<!-- 第一種數據提供方式，利用xml數據
		<fx:XML id="yuan">
			<all>
				<data name="海賊王" hot="90" theatre="90" blues="482" rating="90" trends="100" />
				<data name="死神" hot="20" theatre="10" blues="230" rating="60"  trends="70" />
				<data name="火影忍者" hot="90" theatre="10" blues="482" rating="90" trends="100" />
				<data name="柯南" hot="90" theatre="10" blues="482" rating="90"  trends="100" />				
			</all>
		</fx:XML>
		<s:XMLListCollection id="bardata" source="{yuan.data}"/>	
		-->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import mx.charts.LegendItem;
			import mx.collections.ArrayCollection;
			[Bindable]
			public var funs:ArrayCollection=new ArrayCollection([//創建數據集合
				{name:"海賊王",hot:90,theatre:10,blues:482,rating:90,trends:100},
				{name:"死神",hot:60,theatre:10,blues:230,rating:60,trends:70},
				{name:"火影忍者",hot:80,theatre:12,blues:520,rating:80,trends:40},
				{name:"柯南",hot:50,theatre:30,blues:600,rating:70,trends:30}
				]);				
			
		]]>
	</fx:Script>
	<!--第一種顯示方式，顯示xml提供的數據
	<s:Panel width="710" title="柱狀圖">
		<mx:ColumnChart id="barchart"
						dataProvider="{bardata}"
						width="543"  fontFamily="幼圓"
						fontSize="16"
						showDataTips="true"
						>
			<mx:horizontalAxis>  
				<mx:CategoryAxis categoryField="@name" />  
			</mx:horizontalAxis> 
			<mx:series>			  
				<mx:ColumnSeries xField="@name" yField="@hot" displayName="人氣指數" />
				<mx:ColumnSeries xField="@name" yField="@theatre" displayName="劇場版數"/>
				<mx:ColumnSeries xField="@name" yField="@blues" displayName="已出集數"/>
				<mx:ColumnSeries xField="@name" yField="@rating"  displayName="好評度"/>
				<mx:ColumnSeries xField="@name" yField="@trends" displayName="發展趨勢"/>
			</mx:series>		
		</mx:ColumnChart>
	<mx:Legend x="547" y="11" height="183" dataProvider="{barchart}" toolTip="圖例">				
	</mx:Legend>
	</s:Panel>
   -->
	   <!-- 畫一個panel容器，用來裝這個柱狀圖-->
		<s:Panel width="710" title="柱狀圖">
			<!-- dataprovider制定數據源
			  showDataTips="true" 指定當鼠標放到具體的某一項時，顯示具體信息
			  fontFamily="幼圓" 設置文字的樣式
			-->
			<mx:ColumnChart id="barchart2" width="543" dataProvider="{funs}" fontFamily="幼圓"
							fontSize="16"
							showDataTips="true"
							>
				<!-- 水平列顯示值，在此處制定爲漫畫名字-->
				<mx:horizontalAxis>  
					<mx:CategoryAxis categoryField="name" />  
				</mx:horizontalAxis> 
				<!--垂直列顯示值利用YFiled制定 ，displayName爲這列的名稱，顯示圖例時用到-->
				<mx:series>			  
					<mx:ColumnSeries xField="name" yField="hot"  displayName="人氣指數" />
					<mx:ColumnSeries xField="name" yField="theatre" displayName="劇場版數"/>
					<mx:ColumnSeries xField="name" yField="blues" displayName="已出集數"/>
					<mx:ColumnSeries xField="name" yField="rating" displayName="好評度"/>
					<mx:ColumnSeries xField="name" yField="trends" displayName="發展趨勢"/>
				</mx:series>
			</mx:ColumnChart>
			<!--顯示圖例-->
			<mx:Legend x="547" y="11" height="183" dataProvider="{barchart2}" toolTip="圖例">				
			</mx:Legend>
		</s:Panel>
	
</s:Application>

效果如下：