Chart之ColumnChart简单应用

最新推荐文章于 2019-08-08 04:13:40 发布

最新推荐文章于 2019-08-08 04:13:40 发布 · 354 阅读

文章标签：

#Flex #Adobe #XML

Flex 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一个使用Flex构建的交互式柱状图应用，用于展示不同国家在赛事中的奖牌数。该应用允许用户修改特定国家的金牌、银牌和铜牌数量，并实时更新图表。

效果图：

代码：

<?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" 
			 height="539" width="608">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	
	<fx:Script>
		<![CDATA[
			
			import mx.collections.ArrayCollection;
			
			//各个国家的金牌，银牌，铜牌数量统计
			[Bindable]private var medalsAC:ArrayCollection = new ArrayCollection( [
				{ Country: "美国", Gold: 40, Silver:20, Bronze: 20 },
				{ Country: "中国", Gold: 32, Silver:17, Bronze: 14 },
				{ Country: "俄罗斯", Gold: 27, Silver:27, Bronze: 38 } ]);
			
			
			/**
			 *更新所有国家的奖牌显示信息 
			 */
			protected function update(event:MouseEvent):void
			{
				var countryName:String = cboCountry.textInput.text;
				for(var i:int = 0;i<medalsAC.length;i++){
					var country:Object = medalsAC.getItemAt(i);
					if(country.Country == countryName){
						country.Gold = txtGold.text;
						country.Silver = txtSilver.text;
						country.Bronze = txtBronze.text;
						column.dataProvider = medalsAC;
						break;
					}
				}	
					
			}

		]]>
	</fx:Script>
	
	<s:Panel title="ColumnChart Control" width="565" height="403"
			 color="0x000000" 
			 borderAlpha="0.15" fontSize="12">
		
		<s:layout>
			<s:HorizontalLayout horizontalAlign="center" 
								paddingLeft="10" paddingRight="10" 
								paddingTop="10" paddingBottom="10"/>
		</s:layout>
		
		<mx:ColumnChart id="column" height="342" color="0x323232"
						showDataTips="true" dataProvider="{medalsAC}" fontSize="12">
			
			<mx:horizontalAxis>
				<mx:CategoryAxis categoryField="Country"/>
			</mx:horizontalAxis>
			
			<mx:series>
				<mx:ColumnSeries xField="Country" yField="Gold" displayName="金牌"/>
				<mx:ColumnSeries xField="Country" yField="Silver" displayName="银牌"/>
				<mx:ColumnSeries xField="Country" yField="Bronze" displayName="铜牌"/>
			</mx:series>
		</mx:ColumnChart>
		
		<mx:Legend dataProvider="{column}" color="0x323232"/>
		
	</s:Panel>
	<s:Label x="10" y="429" text="修改3个国家的奖牌数量："/>
	<s:Label x="163" y="428" text="选择国家："/>
	<s:ComboBox x="231" y="424" id="cboCountry" 
				dataProvider="{medalsAC}" labelField="Country"
				selectedIndex="0"
			  />
	<s:Label x="187" y="451" text="金牌：" id="lblGold"/>
	<s:TextInput x="232" y="452" id="txtGold"/>
	<s:Label x="187" y="481" text="铜牌：" id="lblSilver"/>
	<s:TextInput x="232" y="482" id="txtSilver"/>
	<s:Label x="187" y="511" text="银牌：" id="lblBronze"/>
	<s:TextInput x="232" y="512" id="txtBronze"/>
	<s:Button x="368" y="512" label="更新" width="92" id="btnUpdate" click="update(event)"/>
	
</s:Application>
<!--  
	Legend 控件可向图表中添加图例，此图例可为图表中的每个数据系列显示一个标签
	series组织具体要显示的字段内容

-->