Chart之PieChart简单应用

最新推荐文章于 2025-04-17 14:18:46 发布

最新推荐文章于 2025-04-17 14:18:46 发布 · 336 阅读

文章标签：

#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">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			
			import spark.events.IndexChangeEvent;
			
			[Bindable]private var medalsAC:ArrayCollection = new ArrayCollection( [		
				{ Country: "中国", Gold: 32, Silver:17, Bronze: 14 },
				{ Country: "美国", Gold: 35, Silver:38, Bronze: 29 },
				{ Country: "俄罗斯", Gold: 27, Silver:27, Bronze: 38 } ]);
			[Bindable]private var brandAC:ArrayCollection = new ArrayCollection(
				[{lable:"金牌",value:"Gold"},{lable:"银牌",value:"Silver"},{lable:"铜牌",value:"Bronze"}]
			);
			
			
			/**指定用于呈示 PieSeries 的每个标签的回调函数*/
			private function display(data:Object, field:String, index:Number, percentValue:Number):String {
				//所占比列
				var temp:String= (" " + percentValue).substr(0,6);
				return data.Country + ": " + '\n' + cboCountryData.textInput.text+"数量: " + data[pieSeries.field] + '\n所占比例：' + temp + "%";
			}
			
			/**
			 *更新所有国家的奖牌显示信息 
			 */
			protected function update(event:MouseEvent):void
			{
				var countryName:String = cboCountry.selectedItem.Country;
				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;
						chart.dataProvider = medalsAC;
						break;
					}
				}	
				
			}
			
			/**加载指定国家的数据信息*/
			protected function cboCountry_changeHandler(event:IndexChangeEvent):void
			{
				var countryName:String = cboCountry.selectedItem.Country;
				for(var i:int = 0;i<medalsAC.length;i++){
					var country:Object = medalsAC.getItemAt(i);
					if(country.Country == countryName){
						txtGold.text = country.Gold ;
						txtSilver.text = country.Silver;
						txtBronze.text = country.Bronze;
						break;
					}
				}	
				
			}
			
			
			/**对用户选择的国家进行饼图的更新*/
			protected function cboCountryData_changeHandler(event:IndexChangeEvent):void
			{
				//修改绑定的字段
				pieSeries.field = cboCountryData.selectedItem.value;
				//重新刷新数据源
				chart.dataProvider = medalsAC;
				trace("ok");
			}

		]]>
	</fx:Script>
	
	<s:Panel title="饼图" width="513" height="345"
			 color="0x000000" 
			 borderAlpha="0.15">
		
		<s:layout>
			<s:HorizontalLayout horizontalAlign="center" 
								paddingLeft="10" paddingRight="10" 
								paddingTop="10" paddingBottom="10"/>
		</s:layout>
		
		<mx:PieChart id="chart" height="100%" width="100%" paddingRight="5" paddingLeft="5" color="0x323232"
					 showDataTips="true" dataProvider="{medalsAC}" >
			
			<mx:series>
				<mx:PieSeries id="pieSeries" labelPosition="callout" field="Gold" labelFunction="display">
					<mx:calloutStroke>
						<s:SolidColorStroke weight="0" color="0x888888" alpha="1.0"/>
					</mx:calloutStroke>
					<mx:radialStroke>
						<s:SolidColorStroke weight="0" color="#FFFFFF" alpha="0.20"/>
					</mx:radialStroke>
					<mx:stroke>
						<s:SolidColorStroke color="0" alpha="0.20" weight="2"/>
					</mx:stroke>
				</mx:PieSeries>
			</mx:series>
		</mx:PieChart>
		
	</s:Panel>
	<s:Label x="10" y="370" text="修改3个国家的奖牌数量："/>
	<s:Label x="13" y="398" text="选择国家："/>
	<s:ComboBox x="81" y="394" id="cboCountry" 
				dataProvider="{medalsAC}" labelField="Country"
				selectedIndex="0" change="cboCountry_changeHandler(event)"
				/>
	<s:Label x="37" y="421" text="金牌：" id="lblGold" />
	<s:TextInput x="82" y="422" id="txtGold" restrict="[0-9]"/>
	<s:Label x="37" y="451" text="铜牌：" id="lblSilver"/>
	<s:TextInput x="82" y="452" id="txtSilver" restrict="[0-9]"/>
	<s:Label x="37" y="481" text="银牌：" id="lblBronze"/>
	<s:TextInput x="82" y="482" id="txtBronze" restrict="[0-9]"/>
	<s:Button x="135" y="507" label="更新" width="92" id="btnUpdate" click="update(event)"/>
	<s:Label x="264" y="397" text="选择显示牌种："/>
	<s:ComboBox x="361" y="393" id="cboCountryData"
				change="cboCountryData_changeHandler(event)" labelField="lable"
				selectedIndex="0"
				dataProvider="{brandAC}"
				/>
</s:Application>

学习参考使用，呵呵.