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>