柱状图和区域图表的一个五行的数据显示

最新推荐文章于 2025-10-05 22:41:56 发布

原创最新推荐文章于 2025-10-05 22:41:56 发布 · 321 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#application #button #function #colors #layout #string

ActionScript 同时被 2 个专栏收录

4 篇文章

订阅专栏

flex

4 篇文章

订阅专栏

本文介绍了一个使用Adobe Flex框架创建的应用实例，该应用通过LineChart和AreaChart组件展示了一组随机生成的数据。图表显示了不同元素（如matel、wood等）在左、右两个类别下的数值分布，并可通过按钮刷新这些数据。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="application1_creationCompleteHandler(event)" layout="absolute" width="1000" height="600" xmlns:aeon="aeon.*" xmlns:aswing="org.aswing.*" xmlns:local="*">
	<mx:Style>
		Application{
			fontSize:12px;
		}
	</mx:Style>
	<mx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.events.FlexEvent;
			import mx.utils.ObjectProxy;
			
			[Bindable]
			private var expensesAC:ArrayCollection = new ArrayCollection(
			[]
			);
			[Bindable]
			private var objleft:ObjectProxy;
			[Bindable]
			private var objright:ObjectProxy;
			
			private var attrs:Array = ["matel","wood","flood","fire","earth"];
			
			private function randAttr(who:String):void
			{
				var total:Number = 100;
				var list:Array = attrs.slice();
				while(total>0 && list.length>0){
					var key:String = list[Math.floor(Math.random()*list.length)];
					list.splice(list.indexOf(key),1);
					var value:Number = total*Math.random();
					var obj:Object = expensesAC.getItemAt(attrs.indexOf(key));
					obj[who] = value;
					total -= value;
				}
			}


			protected function application1_creationCompleteHandler(event:FlexEvent):void
			{
				expensesAC.addItem({elementname:"matel",left:0,right:0});
				expensesAC.addItem({elementname:"wood",left:0,right:0});
				expensesAC.addItem({elementname:"flood",left:0,right:0});
				expensesAC.addItem({elementname:"fire",left:0,right:0});
				expensesAC.addItem({elementname:"earth",left:0,right:0});
				this.randAttr("left");
				this.randAttr("right");
				expensesAC.refresh();
			}

			protected function button1_clickHandler(event:MouseEvent):void
			{
				this.randAttr("left");
				this.randAttr("right");
				expensesAC.refresh();
			}

		]]>
	</mx:Script>
	<!-- Define custom colors for use as fills in the AreaChart control. -->
	<mx:SolidColor id="sc1" color="blue" alpha=".3"/>
	<mx:SolidColor id="sc2" color="red" alpha=".3"/>
	<mx:SolidColor id="sc3" color="green" alpha=".3"/>
	
	<!-- Define custom Strokes. -->
	<mx:Stroke id = "s1" color="blue" weight="2"/>
	<mx:Stroke id = "s2" color="red" weight="2"/>
	<mx:Stroke id = "s3" color="green" weight="2"/>
	
	<mx:Panel title="LineChart and AreaChart Controls Example" 
			  height="100%" width="471" layout="horizontal" x="122" y="0">
		<mx:Canvas x="122" y="33" width="100%" height="100%">
			<mx:ColumnChart top="-1" id="column" 
							height="156" 
							width="361" 
							paddingLeft="5" 
							paddingRight="5" 
							showDataTips="true" 
							dataProvider="{expensesAC}"
							 x="98">                
				<mx:horizontalAxis>
					<mx:CategoryAxis categoryField="elementname"/>
				</mx:horizontalAxis>
				
				<mx:series>
					<mx:ColumnSeries 
						yField="left" 
						displayName="left"
						fill="{sc1}"
						stroke="{s1}"
						/>
					<mx:ColumnSeries 
						yField="right" 
						displayName="right"
						fill="{sc2}"
						stroke="{s2}"
						/>
				</mx:series>
			</mx:ColumnChart>
			<mx:Legend dataProvider="{Areachart}"/>
			<mx:AreaChart id="Areachart" height="142" width="356"
						  paddingLeft="5" paddingRight="5" 
						  showDataTips="true" dataProvider="{expensesAC}" x="103" y="161">
				
				<mx:horizontalAxis>
					<mx:CategoryAxis categoryField="elementname"/>
				</mx:horizontalAxis>
				
				<mx:series>
					<mx:AreaSeries yField="left" form="curve" displayName="left" areaStroke="{s1}" areaFill="{sc1}"/>
					<mx:AreaSeries yField="right" form="curve" displayName="right" areaStroke="{s2}" areaFill="{sc2}"/>
				</mx:series>
			</mx:AreaChart>
			
		</mx:Canvas>
	</mx:Panel>
	<mx:Button x="10" y="10" label="flush" click="button1_clickHandler(event)"/>
	
</mx:Application>