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  '<font size="20">' + temp + </font>';
}

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

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

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

5、改变字体颜色：
private function categoryAxisLabelFun( item : Object, prevValue : Object, axis : CategoryAxis, categoryItem : Object) : String {
      var temp : String = item as String;
      return  '<font color="#ff0000">' + temp + </font>';
}

 

view plain

1. <?xml version="1.0"?>  
2. <!-- charts/PredefinedAxisStyles.mxml -->  
3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">  
4.       
5.     <mx:Script>  
6.         <!--[CDATA[  
7.             //导入相关包          
8.             import mx.collections.ArrayCollection;  
9.             import mx.charts.*;  
10.             import mx.charts.series.items.ColumnSeriesItem;   
11.             import mx.charts.ChartItem;   
12.             import mx.charts.chartClasses.Series;   
13.             import mx.charts.chartClasses.IAxis;   
14.             import mx.utils.ObjectUtil;   
15.               
16.             [Bindable]  
17.             public var expenses:ArrayCollection = new ArrayCollection([  
18.                 {Month:"Jan", Profit:20, Expenses:15},  
19.                 {Month:"Feb", Profit:10, Expenses:20},  
20.                 {Month:"Jun", Profit:30, Expenses:40},  
21.                 {Month:"Aug", Profit:15, Expenses:25},  
22.                 {Month:"Set", Profit:40, Expenses:45}  
23.             ]);  
24.               
25.               
26.               
27.             public function myLabelFormat(obj:Object,pcat:Object,ax:LinearAxis):String   
28.             {  
29.                 return  numForm.format(obj)+"%";  
30.             }  
31.               
32.             private function setCustomLabel(element:ChartItem, series:Series):String {  
33.                 // Get a refereence to the current data element.  
34.                 var data:ColumnSeriesItem = ColumnSeriesItem(element);          
35.                   
36.                 // Get a reference to the current series.          
37.                 var currentSeries:ColumnSeries = ColumnSeries(series);  
38.                   
39.                 // Create a return String and format the number.  
40.                 return  numForm.format(data.yNumber) + "%";          
41.             }  
42.               
43.               
44.             // This method customizes the values of the axis labels.  
45.             // This signature (with 4 arguments) is for a CategoryAxis.  
46.             public function defineLabel(  
47.                 cat:Object,   
48.                 pcat:Object,  
49.                 ax:CategoryAxis,  
50.                 labelItem:Object):String   
51.             {  
52.                 // Show contents of the labelItem:  
53.                 for (var s:String in labelItem) {  
54.                     trace(s + ":" + labelItem[s]);  
55.                 }  
56.                   
57.                 // Return the customized categoryField value:  
58.                 return cat + "";  
59.                   
60.                 // Note that if you did not specify a categoryField,   
61.                 // cat would refer to the entire object and not the  
62.                 // value of a single field. You could then access   
63.                 // fields by using cat.field_name.  
64.             }  
65.               
66.               
67.               
68.             public function myLabelDisplay(hd:HitData):String{  
69.                 //return hd.displayText + "%";  
70. //              var curObj:Object = hd.item;     
71. //              var curSeries:BarSeries = BarSeries(hd.chartItem.element); // 获得当前的BarSeries     
72. //              return curObj.qual + "-" + curSeries.displayName + "/n"   
73. //                  + uqStatistics.getUQAs(curSeries.xField, curObj.qualObj).length   
74. //                  + RM.getString(BUNDLE_DASHBOARD, "label.piece");     
75.                 var curObj:Object = hd.item;    
76.                 var curSeries:ColumnSeries = ColumnSeries(hd.chartItem.element);  
77.                 if(curSeries.yField == "Profit")  
78.                     return curSeries.yField +  ":" + hd.item.Profit + "%";  
79.                 else   
80.                     return curSeries.yField +  ":" + hd.item.Expenses + "%";  
81.                   
82.             }  
83.               
84.               
85.         ]]-->  
86.     </mx:Script>  
87.     <mx:NumberFormatter id="numForm" useThousandsSeparator="true"/>  
88.     <mx:Panel title="Using Predefined Axis Styles" >  
89.         <mx:ColumnChart id="column" dataProvider="{expenses}" showDataTips="true" dataTipFunction="myLabelDisplay">  
90.             <mx:horizontalAxis>  
91.                 <mx:CategoryAxis   
92.                     dataProvider="{expenses}"   
93.                     categoryField="Month" labelFunction="defineLabel"   
94.                     />  
95.             </mx:horizontalAxis>  
96.             <!-- 设置纵坐标读取的属性 -->     
97.             <!-- 设置横坐标的最小刻度以及最大刻度，另外调用labelFunction重写刻度格式为百分比 -->   
98.             <mx:verticalAxis>  
99.                 <mx:LinearAxis  minimum="0" maximum="50" labelFunction="myLabelFormat"/>      
100.             </mx:verticalAxis>  
101.               
102.               
103.             <mx:series>  
104.                 <mx:ColumnSeries   
105.                     xField="Month"   
106.                     yField="Profit"  
107.                     displayName="Profit" labelPosition="outside"  labelFunction="setCustomLabel"  
108.                     />  
109.                 <mx:ColumnSeries   
110.                     xField="Month"   
111.                     yField="Expenses"  
112.                     displayName="Expenses" labelPosition="outside" labelFunction="setCustomLabel"  
113.                     />  
114.             </mx:series>  
115.         </mx:ColumnChart>  
116.         <mx:Legend dataProvider="{column}"/>  
117.   
118.     </mx:Panel>     
119.     <mx:Style>      
120.           
121.         ColumnChart {  
122.             horizontalAxisStyleName:myAxisStyles;  
123.             verticalAxisStyleName:myAxisStyles;  
124.         }  
125.           
126.         .myAxisStyles {  
127.             tickPlacement:none;  
128.         }  
129.     </mx:Style>  
130. </mx:Application>