关于自定义Flex chart的legend信息

不说废话，直接上代码～

<?xml version="1.0" encoding="utf-8"?>
<mx:Application name="PieSeries_labelFunction_test"
				xmlns:mx="http://www.adobe.com/2006/mxml"
				layout="vertical"
				verticalAlign="middle"
				backgroundColor="white"
				creationComplete="init()">
	
	<mx:Script>
		<![CDATA[
			import mx.charts.HitData;
			import mx.charts.LegendItem;
			import mx.charts.chartClasses.LegendData;
			import mx.charts.series.items.PieSeriesItem;
			import mx.collections.ArrayCollection;
			import mx.graphics.SolidColor;
			import mx.utils.StringUtil;
			
			import spark.components.BorderContainer;
			import spark.components.Button;
			import spark.components.HGroup;
			
			[Bindable]
			public var dataLegend:ArrayCollection;
			private function pieSeries_labelFunc(item:Object, field:String, index:Number, percentValue:Number):String {
				return StringUtil.substitute("{0} ({1}%)",
					item.@label,
					percentValue.toFixed(1));
			}
			
			private function init():void{
				var obj:Object　= new Object();

				var item:ArrayCollection = new ArrayCollection();
				for(var i:int = 0; i < pieSeries.items.length; i++){
					var pirSItem:PieSeriesItem = pieSeries.items[i] as PieSeriesItem;
					
					var id:LegendData = new LegendData();
					id.label = "Product data:" + i;
					id.aspectRatio = 1;
					var maker:BorderContainer = new BorderContainer();
					maker.height = 5;
					maker.width = 5;
					maker.setStyle("backgroundColor",(pirSItem.fill as SolidColor).color);
					id.marker= maker;
					item.addItem(id);
				}
				
				dataLegend = item
				trace(pieSeries.items);
			}
			
			private function chartTip(e:HitData):String{  
				
					return "";
			} 
		]]>
	</mx:Script>
	
	<mx:XMLListCollection id="dp">
		<mx:source>
			<mx:XMLList>
				<product label="Product 1" data="3" />
				<product label="Product 2" data="1" />
				<product label="Product 3" data="4" />
				<product label="Product 4" data="1" />
				<product label="Product 5" data="5" />
				<product label="Product 6" data="9" />
			</mx:XMLList>
		</mx:source>
	</mx:XMLListCollection>
	
	<mx:Panel styleName="opaquePanel"
			  width="400"
			  height="300">
		<mx:PieChart id="pieChart"
					 dataProvider="{dp}"
					 showDataTips="false"
					 height="100%"
					 width="100%"
					 >
			<mx:series>
				<mx:PieSeries id="pieSeries"
							  field="@data"
							  nameField="@label"
							  labelPosition="callout"
							  labelFunction="pieSeries_labelFunc" />
			</mx:series>
		</mx:PieChart>
		<mx:ControlBar width="100%" >
			<mx:Legend dataProvider="{dataLegend}"
					   direction="horizontal"
					   horizontalGap="100"
					   width="100%" 
					   >
			</mx:Legend>
		</mx:ControlBar>
	</mx:Panel>
	
</mx:Application>

效果图

 

评论

2 楼 robindut 2012-10-10  

liuchuxiong2003 写道

你的flex版本是多少了？

4.0

1 楼 liuchuxiong2003 2012-09-05  

你的flex版本是多少了？