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>

演示效果：

数据钻探效果：