Flex中通过设置PieSeries对象的labelFunction属性给PieChart控件设置一个自定义的标签的例子

By Minidxer | September 27, 2008

接下来的例子演示了Flex中通过设置PieSeries对象的labelFunction属性，给PieChart控件设置一个自定义的标签。

让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：

下面是完整代码(或点击这里察看)：

<?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"
backgroundColor="white">
<mx:Script>
<![CDATA[
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" />
<product label="Product 2" data="1" />
<product label="Product 3" data="4" />
<product label="Product 4" data="1" />
<product label="Product 5" data="5" />
<product label="Product 6" data="9" />
</mx:XMLList>
</mx:source>
</mx:XMLListCollection>
<mx:Panel styleName="opaquePanel"
width="100%"
height="100%">
<mx:PieChart id="pieChart"
dataProvider="{dp}"
showDataTips="false"
height="100%"
width="100%">
<mx:series>
<mx:PieSeries id="pieSeries"
field="@data"
nameField="@label"
labelPosition="callout"
labelFunction="pieSeries_labelFunc" />
</mx:series>
</mx:PieChart>
<mx:ControlBar width="100%">
<mx:Legend dataProvider="{pieChart}"
direction="horizontal"
horizontalGap="100"
width="100%" />
</mx:ControlBar>
</mx:Panel>
</mx:Application>

代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: Flex | Tags: labelFunction, labelPosition, PieChart, PieSeries

中文Flex例子