Flex 中自带的 图标使用

标签：flex   图表   

本示例是介绍了 柱状图，饼状图，面积图，折线图的基本用法，详细属性配置请参考ActionScript3.0官方文档API  http://help.adobe.com/zh_CN/FlashPlatform/reference/actionscript/3/index.html

<?xml version="1.0"?>
<!-- Simple example to demonstrate the ColumnChart and BarChart controls. -->
<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">
	<s:layout>
		<s:HorizontalLayout />
	</s:layout>
	<fx:Script>
		<![CDATA[          
			import mx.collections.ArrayCollection;
			
			[Bindable]
			private var medalsAC:ArrayCollection = new ArrayCollection( [
				{ Country: "美国", Gold: 35, Silver:39, Bronze: 29 },
				{ Country: "中国", Gold: 32, Silver:17, Bronze: 14 },
				{ Country: "俄罗斯", Gold: 27, Silver:27, Bronze: 38 } ]);
			
			private function displayGold(data:Object, field:String, index:Number, percentValue:Number):String {
				var temp:String = (" " + percentValue).toString().substr(0,6);
				return data.Country + ": " + "金牌总数: " + data.Gold + '\n' + temp + "%";
			}

		]]>
	</fx:Script>
	
	<fx:Declarations>
		<!-- 设置列的填充颜色 -->
		<mx:SolidColor id="sc1" color="yellow" alpha=".8"/>
		<mx:SolidColor id="sc2" color="0xCCCCCC" alpha=".6"/>
		<mx:SolidColor id="sc3" color="0xFFCC66" alpha=".6"/>
		<!-- 设置列的边框-->
		<mx:SolidColorStroke id="s1" color="#FF6666" weight="2"/>
		<mx:SolidColorStroke id="s2" color="#0066CC" weight="2"/>
		<mx:SolidColorStroke id="s3" color="#99CC00" weight="2"/>
		
		
		<!-- 饼图上用于说明信息的标注线 -->
		<mx:SolidColorStroke id="callouts" weight="2" color="0x999999" alpha=".8" caps="square"/>
		<!-- 饼图之间的分割线-->
		<mx:SolidColorStroke id="radial" weight="1" color="#CC3333" alpha=".6"/>
		<!-- 饼图和图例的外边框 -->
		<mx:SolidColorStroke id="pieborder" color="0x000000" weight="2" alpha=".5"/>
		
	</fx:Declarations>
	
	<mx:Panel title="ColumnChart 和 BarChart 控制示例（介绍美国、中国和俄罗斯的金、银、铜获奖数量）" height="50%" width="30%" layout="horizontal">
		<mx:ColumnChart id="column" type="clustered" height="100%" width="45%" paddingLeft="5" paddingRight="5" showDataTips="true" dataProvider="{medalsAC}">  
			<mx:horizontalAxis>  <!-- X水平轴 -->
				<mx:CategoryAxis categoryField="Country"/>
			</mx:horizontalAxis>
			<mx:series>
				<mx:ColumnSeries xField="Country" yField="Gold" displayName="Gold" fill="{sc1}" stroke="{s1}" />
				<mx:ColumnSeries xField="Country" yField="Silver" displayName="Silver" fill="{sc2}" stroke="{s2}" />
				<mx:ColumnSeries xField="Country" yField="Bronze" displayName="Bronze" fill="{sc3}" stroke="{s3}" />
			</mx:series>
		</mx:ColumnChart>
		<mx:Legend dataProvider="{column}"/>	<!-- 添加图例 -->
		
		<mx:BarChart id="bar" height="100%" width="45%" paddingLeft="5" paddingRight="5" showDataTips="true" dataProvider="{medalsAC}">
			<mx:verticalAxis>  <!-- X垂直轴 -->
				<mx:CategoryAxis categoryField="Country"/>
			</mx:verticalAxis>
			<mx:series>
				<mx:BarSeries yField="Country" xField="Gold" displayName="Gold" fill="{sc1}" stroke="{s1}" />
				<mx:BarSeries yField="Country" xField="Silver" displayName="Silver" fill="{sc2}" stroke="{s2}" />
				<mx:BarSeries yField="Country" xField="Bronze" displayName="Bronze" fill="{sc3}" stroke="{s3}" />
			</mx:series>
		</mx:BarChart>
		<mx:Legend dataProvider="{bar}"/>
	</mx:Panel>
	
	
	<mx:Panel title="LineChart 和  AreaChart 控制示例（介绍美国、中国和俄罗斯的金、银、铜获奖数量）" horizontalAlign="center" height="100%" width="20%" layout="vertical">
		<mx:LineChart id="linechart" height="50%" width="100%" paddingLeft="5" paddingRight="5" showDataTips="true" dataProvider="{medalsAC}">
			<mx:horizontalAxis>
				<mx:CategoryAxis categoryField="Month"/>
			</mx:horizontalAxis>
			<mx:series>
				<mx:LineSeries yField="Gold" form="curve" displayName="金" lineStroke="{s1}"/>
				<mx:LineSeries yField="Silver" form="curve" displayName="银" lineStroke="{s2}"/>
				<mx:LineSeries yField="Bronze" form="curve" displayName="铜" lineStroke="{s3}"/>
			</mx:series>
		</mx:LineChart>
		<mx:Legend dataProvider="{linechart}" direction="horizontal" labelPlacement="bottom"/>
		
		<mx:AreaChart id="Areachart" height="50%" width="100%" paddingLeft="5" paddingRight="5" showDataTips="true" dataProvider="{medalsAC}">
			<mx:horizontalAxis>
				<mx:CategoryAxis categoryField="Month"/>
			</mx:horizontalAxis>
			<mx:series>
				<mx:AreaSeries yField="Gold" form="curve" displayName="金" areaStroke="{s1}" areaFill="{sc1}"/>
				<mx:AreaSeries yField="Silver" form="curve" displayName="银" areaStroke="{s2}" areaFill="{sc2}"/>
				<mx:AreaSeries yField="Bronze" form="curve" displayName="铜" areaStroke="{s3}" areaFill="{sc3}"/>
			</mx:series>
		</mx:AreaChart>
		
		<mx:Legend dataProvider="{Areachart}" direction="horizontal" labelPlacement="bottom"/>
	</mx:Panel>
	
	
	
	<mx:Panel title="PieChart 控制示例（清理阴影的和未清理阴影的）" horizontalAlign="center" height="100%" width="40%" layout="vertical">
		<mx:PieChart id="chart" height="50%"  width="100%" paddingRight="5" paddingLeft="5" showDataTips="true" dataProvider="{medalsAC}" >          
			<mx:series>
				<mx:PieSeries nameField="Country" labelPosition="callout" field="Gold" labelFunction="displayGold" 
							  calloutStroke="{callouts}" radialStroke="{radial}" stroke="{pieborder}" fills="{[sc1, sc2, sc3]}">
					<!-- 清理饼图阴影. -->
					<mx:filters>
						<fx:Array/>
					</mx:filters>
				</mx:PieSeries>
			</mx:series>
		</mx:PieChart>  
		<mx:Legend dataProvider="{chart}" direction="horizontal" labelPlacement="bottom"/>
		
		<mx:PieChart id="chart2" height="50%"  width="100%" paddingRight="5" paddingLeft="5" showDataTips="true"  dataProvider="{medalsAC}" >          
			<mx:series>
				<mx:PieSeries nameField="Country" labelPosition="callout" field="Gold" labelFunction="displayGold" 
							  calloutStroke="{callouts}" radialStroke="{radial}" stroke="{pieborder}" fills="{[sc1, sc2, sc3]}">
				</mx:PieSeries>
			</mx:series>
		</mx:PieChart>  
		<mx:Legend dataProvider="{chart}" direction="horizontal" labelPlacement="bottom"/>
	</mx:Panel>
	
</s:Application>

Flex 中自带的 图标使用

标签：flex   图表   

原文地址：http://blog.csdn.net/xiaokui_wingfly/article/details/39209081