FLEX实践—PieChart综合应用(颜色渐变、显示选中值、选中部分突出、数据钻探等)

www.diy567.com是我弄的文娱网站,累了，去上面休息一下下

代码如下：（代码中附加了注释，每一种方法对应的效果均有注释）

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
				layout="absolute"
				creationComplete="init()">

	<mx:Script>
		<!--[CDATA[
		    import mx.graphics.IFill;
			import mx.graphics.SolidColor;		
			import mx.charts.ChartItem;
			import mx.charts.events.ChartItemEvent;
			import mx.charts.series.items.PieSeriesItem;
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;			
			import mx.utils.StringUtil;
			
			[Bindable]
			var currentProvider:Array=dataProvider;
			[Bindable]
			var drillProvider:Array;
			[Bindable]
			var dataProvider:Array=pieProvider;

			private function init():void
			{
				dataProvider=pieProvider;
				currentProvider=dataProvider;
			}
            //按指定格式显示每一块的内容
			private function pieSeries_labelFunc(item:Object, field:String, index:Number, percentValue:Number):String
			{
				return StringUtil.substitute("{0} ({1}%)", item.name, percentValue.toFixed(1));
			}

			//设置PieChart颜色渐变
			private function pieSeries_fillFunc(item:ChartItem, index:Number):IFill
			{
				var curItem:PieSeriesItem=PieSeriesItem(item);
				/* Convert to a number between 0 and 1. */
				var pct:Number=curItem.percentValue / 100;
				return new SolidColor(0xF8FF7F / pct, 1.0);
			}

			//显示选中对象的name属性值并弹出选中部分
			private function showDetail(evt:ChartItemEvent):void
			{
				var psi:PieSeriesItem=evt.hitData.chartItem as PieSeriesItem;
				/*设置选中的部分弹出显示*/
				var arr:Array = []; 
                arr[evt.hitData.chartItem.index] = 0.2; 
                pieSeries.perWedgeExplodeRadius = arr; 
				//显示选中项的name属性值
				Alert.show(psi.item.name);
			}

			//点击具体位置时进入下一层数据显示，若已经在具体数据状态下则切换回原始数据状态
			private function drillIt(event:ChartItemEvent):void
			{
				if (currentProvider == dataProvider)
				{
					drillProvider=pieDetailProvider;
					pieSeries.field="dData";
					pieSeries.labelField="name";
					pieSeries.nameField="name";

					currentProvider=drillProvider;
				}
				else
				{
					pieSeries.field="data";
					pieSeries.labelField="name";
					pieSeries.nameField="name";

					currentProvider=dataProvider;
				}
			}
		]]-->
	</mx:Script>

	<mx:Array id="pieProvider">
		<mx:Object name="Apple"
				   data="200"/>
		<mx:Object name="Banana"
				   data="500"/>
		<mx:Object name="Pear"
				   data="700"/>
		<mx:Object name="Orange"
				   data="100"/>
	</mx:Array>

	<mx:Array id="pieDetailProvider">
		<mx:Object name="East"
				   dData="22"/>
		<mx:Object name="West"
				   dData="38"/>
		<mx:Object name="South"
				   dData="30"/>
		<mx:Object name="West"
				   dData="10"/>
	</mx:Array>
    
    <!-- 饼图数据源变化时的效果 -->
	<mx:SeriesZoom id="zoomIn"
				   duration="500"
				   verticalFocus="bottom"/>
	<mx:SeriesSlide id="zoomOut"
					duration="500"
					direction="left"/>

	<mx:Panel styleName="opaquePanel"
			  width="100%"
			  height="100%">
		<mx:PieChart id="pieChart"
					 dataProvider="{currentProvider}"
					 showDataTips="true"
					 height="100%"
					 width="100%"
					 itemClick="drillIt(event)"
					 innerRadius="0.2">
			<mx:series>
				<mx:PieSeries id="pieSeries"
							  field="data"
							  nameField="name"
							  labelPosition="callout"
							  labelFunction="pieSeries_labelFunc"
							  fillFunction="pieSeries_fillFunc"
							  showDataEffect="zoomIn"
							  hideDataEffect="zoomOut"
							  explodeRadius="0.05"/>
			</mx:series>
		</mx:PieChart>
		<mx:ControlBar width="100%">
			<mx:Legend dataProvider="{pieChart}"
					   direction="horizontal"
					   horizontalGap="100"
					   width="100%"/>
		</mx:ControlBar>
	</mx:Panel>

</mx:Application>

演示效果：

数据钻探效果：