Search Flex Samples

Positioning labels in a Flex PieChart control

The following example shows how you can position callouts in a PieChart control’s pie series by setting the labelPosition style.




<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

layout="vertical"

verticalAlign="middle"

backgroundColor="white">



<mx:Script>

<![CDATA[

private function pieSeries_labelFunc(item:Object, field:String, index:Number, percentValue:Number):String {

return item.@label + ": " + item.@data + " (" + percentValue.toFixed(2) + "%)";

}

]]>

</mx:Script>



<mx:XML id="dp">

<products>

<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" />

</products>

</mx:XML>



<mx:Array id="labelPositionArr">

<mx:Object label="callout" />

<mx:Object label="inside" />

<mx:Object label="insideWithCallout" />

<mx:Object label="none" />

<mx:Object label="outside" />

</mx:Array>



<mx:ApplicationControlBar dock="true">

<mx:Label text="labelPosition:" />

<mx:ComboBox id="comboBox"

dataProvider="{labelPositionArr}" />

</mx:ApplicationControlBar>



<mx:PieChart id="pieChart"

dataProvider="{dp.product}"

height="250"

width="100%">

<mx:series>

<mx:PieSeries id="pieSeries"

field="@data"

labelPosition="{comboBox.selectedItem.label}"

labelFunction="pieSeries_labelFunc" />

</mx:series>

</mx:PieChart>

</mx:Application>

0 comments:

Related Flex Samples

Learn Flex: Flex Samples | Flex Video Tutorials Flex Examples