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>