flex 图表categoryField设立 labelFunction使用

2012-10-28

flex 图表categoryField设置 labelFunction使用CategoryAxis有一个叫做labelFunction的属性，这个属性的定

flex 图表categoryField设置 labelFunction使用

CategoryAxis有一个叫做labelFunction的属性，这个属性的定义：指定一个函数，用于定义为CategoryAxis的dataProvider中的各个项目生成的标签。

所以修改的原理：可以利用labelFunction得到每个Label，然后再对其进行修改。

片段代码：
<mx:horizontalAxis>
? <mx:CategoryAxis id="ca"
???????? categoryField="@date" title="August 2007" labelFunction="categoryAxisLabelFun" />
</mx:horizontalAxis>
?
private function categoryAxisLabelFun( item : Object, prevValue : Object, axis : CategoryAxis, categoryItem : Object) : String {
????? var temp : String = item as String;
????? return temp;
}

其中categoryAxisLabelFun的参数：
1、item：保存的就是Label里面文字信息。
2、prevValue：坐标轴上面，前一个类别的值。
3、axis：CategoryAxis的实例化对象。
4、categoryItem：是将要呈现的dataProvider中的项目。
所以与标签有关系的只有第一个参数：item。
?
以下代码分别是对CategoryAxis的标签进行修改的代码：
?
1、改变字体大小：
private function categoryAxisLabelFun( item : Object, prevValue : Object, axis : CategoryAxis, categoryItem : Object) : String {
????? var temp : String = item as String;
????? return? '' + temp + ';
}

2、改变字体粗细：
private function categoryAxisLabelFun( item : Object, prevValue : Object, axis : CategoryAxis, categoryItem : Object) : String {
????? var temp : String = item as String;
????? return? '' + temp + ';
}

3、改变字体下划线：
private function categoryAxisLabelFun( item : Object, prevValue : Object, axis : CategoryAxis, categoryItem : Object) : String {
????? var temp : String = item as String;
????? return? '' + temp + ';
}

4、改变字体斜体：
private function categoryAxisLabelFun( item : Object, prevValue : Object, axis : CategoryAxis, categoryItem : Object) : String {
????? var temp : String = item as String;
????? return? '' + temp + ';
}

5、改变字体颜色：
private function categoryAxisLabelFun( item : Object, prevValue : Object, axis : CategoryAxis, categoryItem : Object) : String {
????? var temp : String = item as String;
????? return? '' + temp + ';
}

<?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:"Jan", Profit:20, Expenses:15},{Month:"Feb", Profit:10, Expenses:20},{Month:"Jun", Profit:30, Expenses:40},{Month:"Aug", Profit:15, Expenses:25},{Month:"Set", 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 + "";// 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 + "%";}]]--></mx:Script><mx:NumberFormatter id="numForm" useThousandsSeparator="true"/><mx:Panel title="Using Predefined Axis Styles" ><mx:ColumnChart id="column" dataProvider="{expenses}" showDataTips="true" dataTipFunction="myLabelDisplay"><mx:horizontalAxis><mx:CategoryAxis dataProvider="{expenses}" categoryField="Month" labelFunction="defineLabel" /></mx:horizontalAxis><!-- 设置纵坐标读取的属性 -->   <!-- 设置横坐标的最小刻度以及最大刻度，另外调用labelFunction重写刻度格式为百分比 --> <mx:verticalAxis><mx:LinearAxis  minimum="0" maximum="50" 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:Legend dataProvider="{column}"/></mx:Panel><mx:Style>ColumnChart {horizontalAxisStyleName:myAxisStyles;verticalAxisStyleName:myAxisStyles;}.myAxisStyles {tickPlacement:none;}</mx:Style></mx:Application>

热点排行