ASP.NET学习网|ASP.NET教程|ASP.NET MVC|ASP.NET 源码|VS2010教程|ASP.NET视频教程

<?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> 

数据钻探效果：