用Flex饼图实现环图ringChart效果

Flex本身没有提供ringChart组件，第三方提供的ringChart组件用起来也不太方便，这里使用一些小技巧，通过使用饼图来达到实现ringChart的效果。下面是具体的实现

<?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"
        viewSourceURL="srcview/index.html" width="800" height="500">

    <mx:Script>
        <![CDATA[
        	import mx.charts.series.items.PieSeriesItem;
        	import mx.charts.HitData;
            import mx.utils.StringUtil;

            private function pieSeries_labelFunc(item:Object, field:String, index:Number, percentValue:Number):String {
                return StringUtil.substitute("{0} ({1}%)",
                            item.@label,
                            percentValue.toFixed(1));
            }
        ]]>
    </mx:Script>

    <mx:XMLListCollection id="dp">
        <mx:source>
            <mx:XMLList>
                <product label="Product 1" data="3" data1="2"/>
                <product label="Product 2" data="6" data1="7"/>
                <product label="Product 3" data="4" data1="5"/>
                <product label="Product 4" data="1" data1="2"/>
                <product label="Product 5" data="3" data1="1"/>
                <product label="Product 6" data="6" data1="4"/>
            </mx:XMLList>
        </mx:source>
    </mx:XMLListCollection>

    <mx:Canvas styleName="opaquePanel"
            width="700" height="420" borderColor="#600EE9" borderStyle="none">
        <mx:PieChart id="pieChart"
                dataProvider="{dp}"
                showDataTips="true"
                height="253"
                width="346" themeColor="#0A98F2" left="0" top="0">
            <mx:series>
            	<mx:PieSeries id="pieSeries3"
            		 	field="@data"
                        nameField="@label"
                        visible="false" /><!--最里面的空白饼图,图例的显示就是根据该饼图，所以必须有数据，但可以设置visible=false -->
                <mx:PieSeries id="pieSeries1"
                        field="@data1"
                        nameField="@label"
                        labelPosition="callout"
                        labelFunction="pieSeries_labelFunc" /><!--最里面显示的饼图 -->
                <mx:PieSeries id="pieSeries2" /><!--外面空白的饼图 -->
                <mx:PieSeries id="pieSeries"
                        field="@data"
                        nameField="@label"
                        labelPosition="callout" /><!--最外层显示的饼图 -->
            </mx:series>
        </mx:PieChart>
        <mx:Legend dataProvider="{pieChart}"
                direction="horizontal"
                horizontalGap="100"
                width="98"  x="416" y="35" borderStyle="none" borderThickness="3" borderColor="#078CE9"/>
    </mx:Canvas>
</mx:Application>

执行代码后的效果如图
[img]http://dl.iteye.com/upload/attachment/178872/b225857e-0af6-3b15-984d-2e30f065428a.jpg[/img]