<?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" 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" borderColor="#078CE9"/>
</mx:Canvas>
</mx:Application>
flex 利用饼图生成内部环状图
最新推荐文章于 2014-10-15 16:12:13 发布