flex 图表categoryField设立 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>

flex 图表categoryField设立 labelFunction使用

相关推荐