flex 图表应用百分比示例

<?xml version="1.0"?>
<!-- charts/PredefinedAxisStyles.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
	
	<mx:Script>
		<![CDATA[
			//导入相关包        
			import mx.collections.ArrayCollection;
			import mx.charts.*;
			import mx.charts.series.items.ColumnSeriesItem; 
			import mx.charts.ChartItem; 
			import mx.charts.chartClasses.Series; 
			import mx.charts.chartClasses.IAxis; 
			import mx.utils.ObjectUtil; 
			
			[Bindable]
			public var expenses:ArrayCollection = new ArrayCollection([
				{Month:"*", Profit:20, Expenses:15},
				{Month:"**", Profit:10, Expenses:20},
				{Month:"***", Profit:30, Expenses:40},
				{Month:"****", Profit:15, Expenses:25},
				{Month:"*****", Profit:40, Expenses:45}
			]);
			
			
			
			public function myLabelFormat(obj:Object,pcat:Object,ax:LinearAxis):String 
			{
				return  numForm.format(obj)+"%";
			}
			
			private function setCustomLabel(element:ChartItem, series:Series):String {
				// Get a refereence to the current data element.
				var data:ColumnSeriesItem = ColumnSeriesItem(element);        
				
				// Get a reference to the current series.        
				var currentSeries:ColumnSeries = ColumnSeries(series);
				
				// Create a return String and format the number.
				return  numForm.format(data.yNumber) + "%";        
			}
			
			
			// This method customizes the values of the axis labels.
			// This signature (with 4 arguments) is for a CategoryAxis.
			public function defineLabel(
				cat:Object, 
				pcat:Object,
				ax:CategoryAxis,
				labelItem:Object):String 
			{
				// Show contents of the labelItem:
				for (var s:String in labelItem) {
					trace(s + ":" + labelItem[s]);
				}
				
				// Return the customized categoryField value:
				//return cat + "";
				
				return '<font size="35"><font color="#ff0000">' + cat + '</font></font>';
				//'<font color="#ff0000">' + temp + </font>';
				//return null;

				
				// Note that if you did not specify a categoryField, 
				// cat would refer to the entire object and not the
				// value of a single field. You could then access 
				// fields by using cat.field_name.
			}
			
			
			
			public function myLabelDisplay(hd:HitData):String{
				//return hd.displayText + "%";
//				var curObj:Object = hd.item;   
//				var curSeries:BarSeries = BarSeries(hd.chartItem.element); // 获得当前的BarSeries   
//				return curObj.qual + "-" + curSeries.displayName + "\n" 
//					+ uqStatistics.getUQAs(curSeries.xField, curObj.qualObj).length 
//					+ RM.getString(BUNDLE_DASHBOARD, "label.piece");   
				var curObj:Object = hd.item;  
				var curSeries:ColumnSeries = ColumnSeries(hd.chartItem.element);
				if(curSeries.yField == "Profit")
					return curSeries.yField +  ":" + hd.item.Profit + "%";
				else 
					return curSeries.yField +  ":" + hd.item.Expenses + "%";
				
			}
			
			private function smoothImage(ev:Event):void{
				//set image smoothing so image looks better when transformed.
				var bmp:Bitmap = ev.target.content as Bitmap;
				bmp.smoothing = true;
			}

			
		]]>
	</mx:Script>
	<mx:NumberFormatter id="numForm" useThousandsSeparator="true"/>
	<mx:Panel title="Using Predefined Axis Styles">
		<mx:Legend dataProvider="{column}" labelPlacement="right" horizontalGap="2" direction="horizontal"/>
		<mx:ColumnChart id="column" dataProvider="{expenses}" showDataTips="true" dataTipFunction="myLabelDisplay">
			
			<!-- background elements --> 
			<mx:backgroundElements> 
				<mx:GridLines
							  horizontalTickAligned="true" 
							  verticalTickAligned="true"> 
					<mx:horizontalFill> 
						<mx:SolidColor color="haloBlue" alpha="0.2" /> 
					</mx:horizontalFill> 
					<mx:horizontalAlternateFill> 
						<mx:SolidColor color="haloSilver" alpha="0.2" /> 
					</mx:horizontalAlternateFill> 
					<mx:verticalFill> 
						<mx:SolidColor color="haloBlue" alpha="0.2" /> 
					</mx:verticalFill> 
					<mx:verticalAlternateFill> 
						<mx:SolidColor color="haloSilver" alpha="0.2" /> 
					</mx:verticalAlternateFill> 
				</mx:GridLines> 
			</mx:backgroundElements> 
			
			<mx:horizontalAxis>
				<mx:CategoryAxis 
					dataProvider="{expenses}" 
					categoryField="Month" labelFunction="defineLabel" 
					/>
			</mx:horizontalAxis>
			<!-- 设置纵坐标读取的属性 -->   
			<!-- 设置横坐标的最小刻度以及最大刻度，另外调用labelFunction重写刻度格式为百分比 --> 
			<mx:verticalAxis>
				<mx:LinearAxis  minimum="0" maximum="55" labelFunction="myLabelFormat"/>    
			</mx:verticalAxis>
			
			
			<mx:series>
				<mx:ColumnSeries 
					xField="Month" 
					yField="Profit"
					displayName="Profit" labelPosition="outside"  labelFunction="setCustomLabel"
					/>
				<mx:ColumnSeries 
					xField="Month" 
					yField="Expenses"
					displayName="Expenses" labelPosition="outside" labelFunction="setCustomLabel"
					/>
			</mx:series>
		</mx:ColumnChart>
		<!--
		<mx:Image id="loadedImage" source="asset/hello1.jpg" width="100%"  creationComplete="smoothImage(event);"/>
        -->
	</mx:Panel>	
	<mx:Style>	
		
		ColumnChart {
			horizontalAxisStyleName:myAxisStyles;
			verticalAxisStyleName:myAxisStyles;
		}
		
		.myAxisStyles {
			tickPlacement:none;
		}
	</mx:Style>
</mx:Application>