`

Chart之PieChart简单应用

    博客分类:
  • 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>

 学习参考使用,呵呵.

  • 大小: 24.6 KB
0
0
分享到:
评论

相关推荐

    C#饼状图PieChart

    首先,你需要添加Chart控件到你的Windows Forms应用程序。这可以通过在设计视图中从工具箱拖放"Chart"控件到Form上来完成。然后,你可以设置Chart控件的一些基本属性,如宽度、高度、位置等。 饼状图的数据来源可以...

    PieChart a good pie chart control

    【PieChart:构建出色的C#饼状图控件】 饼状图是一种常用的数据可视化工具,它将数据以扇形划分的方式展示...无论是简单的数据分析展示,还是复杂的交互式应用,掌握饼状图的创建技巧都是提高软件用户体验的重要一步。

    Flex 饼形图 piechart 柱形图 columnchart 条形图 barchart 折线图 linechart

    在Flex中,饼形图(piechart)、柱形图(columnchart)、条形图(barchart)和折线图(linechart)是数据可视化的重要工具,它们广泛应用于数据分析、报表展示以及业务指标的可视化。 **饼形图(Pie Chart)** 饼形...

    Open Flash Chart所需文件

    Open Flash Chart是一款强大的开源Flash图表库,用于在Web应用程序中创建高质量、互动的图表。它提供了丰富的自定义选项,能够生成各种类型的图表,包括柱状图、饼图、线点图等,使得数据可视化变得更加简单易行。在...

    FLChart一个强大的Flutter图表库支持折线图条形图和饼图等

    **FLChart:强大的Flutter图表库** FLChart是一个专为Flutter框架设计...无论是简单的数据展示还是复杂的分析需求,FLChart都能胜任。结合Dart语言的灵活性和Flutter的跨平台能力,开发者可以快速构建出高性能的应用。

    android chart MPchart

    1. 多种图表类型:MPChart提供了多种图表类型,包括LineChart(折线图)、BarChart(柱状图)、PieChart(饼图)、ScatterChart(散点图)、RadarChart(雷达图)等,满足不同数据展示需求。 2. 数据绑定:MPChart...

    简单详细,开源的helloChart 图表开发

    标题“简单详细,开源的helloChart 图表开发”表明了`helloChart`库的主要特点:易于理解和使用,以及源代码开放,允许开发者根据自身需求进行定制。这个库的文档通常会提供详尽的教程和示例代码,帮助开发者快速...

    MPChart 曲线、柱状、饼图demo

    通过以上步骤,你可以创建一个简单的MPChart应用,展示曲线图、柱状图、横向柱状图和饼图。实际应用中,你可能需要处理更复杂的数据结构和交互功能,例如点击事件、自定义标签、动态数据更新等。MPChart库提供了丰富...

    LineChart C#划曲线图

    这个控件是.NET Framework的一部分,位于System.Windows.Forms命名空间下,它提供了丰富的图表类型,包括线性图(LineChart)、柱状图(Histogram)和饼图(PieChart)。通过灵活地配置和设置各种属性,我们可以定制...

    Smobiler实现barchart源码

    Smobiler提供了丰富的API和事件处理机制,使得这些高级功能的实现变得相对简单。 在提供的压缩包文件“barchart”中,可能包含了示例代码或已完成的Bar Chart实现。通过查看和学习这些代码,你可以更深入地了解...

    PieChart:使用MPAndroid图表的饼图

    **饼图介绍** 饼图是一种数据可视化工具,用于表示数据集中各部分的比例关系。在MPAndroidChart库中,饼图可以有效地展示一...这个开源库大大简化了Android应用中的数据可视化工序,是进行数据分析和展示的得力工具。

    win8 用visifire做Piechart

    &lt;vis:PieChart Title="My Pie Chart" LegendPosition="Right"&gt; &lt;vis:PieChart.DataPointStyle&gt; &lt;/vis:PieChart.DataPointStyle&gt; &lt;/vis:PieChart&gt; ``` 在这个例子中,我们设置了饼图的标题和图例位置,并...

    Graph And Chart 1.6插件使用书名.rar

    《Graph And Chart 1.6插件在Unity中的应用详解》 在Unity游戏开发中,图形和图表的可视化展示对于数据分析、用户界面设计以及游戏状态的反馈至关重要。Graph And Chart 1.6是一款专为Unity设计的强大图表插件,它...

    Android图表样例 MPChart

    2. **图表类型**:MPChart支持多种图表类型,如折线图(LineChart)、柱状图(BarChart)、饼图(PieChart)和散点图(ScatterChart)。每种图表都有其特定的展示效果和应用场景。 3. **动画效果**:MPChart提供了...

    Android图表

    &lt;com.openxu.cview.chart.piechart.PieChart android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="1"/&gt; &lt;com.openxu.cview.chart.piechart.PieChartLableView ...

    MPChart源码

    1. **易用性**:MPAndroidChart提供了直观且简洁的API,使得在Android应用中集成图表变得非常简单。只需几行代码,开发者就能生成复杂的数据可视化效果。 2. **多样化的图表类型**:支持线形图(LineChart)、柱状...

    Qt利用chart模块绘制各种如下

    在Qt框架中,Chart模块提供了一组强大的工具,用于创建各种数据可视化的图表,如BarChart(柱状图)、PieChart(饼图)、stackedChart(堆叠图)、PercentChart(百分比图)以及ScatterChart(散点图)。这些图表在...

    ASPChart.Net0.8ASPChart.Net0.8(画饼柱图的组件)

    &lt;asp:Chart ID="PieChart1" runat="server" Width="500px" Height="400px" DataSourceID="SqlDataSource1"&gt; *[local-name()='DataSet'][1]/*[local-name()='DataTable'][1]/*[local-name()='Row']" ...

    利用C#实现的条形图、饼图简单源代码

    Chart pieChart = new Chart(); pieChart.Size = new Size(600, 400); pieChart.Titles.Add("饼图示例"); pieChart.BackColor = Color.White; Series pieSeries = pieChart.Series.Add("数据"); pieSeries....

    react-native-pie-chart:适用于您的React Native应用程序的简单饼图模块

    React本机饼图 适用于您的React Native应用程序的简单饼图模块。 注意:现在同时支持ios和android。入门安装~$ npm install react-native-pie-chart --save 将ART链接到您的项目(仅ios需要执行此步骤)设定范例# ...

Global site tag (gtag.js) - Google Analytics