Problem
You want to explode an item in a Flex PieChart when the user clicks on the wedge.
Solution
Listen for the itemClick event on the PieChart object, and then set the PieSeries object's perWedgeExplodeRadius property to an array of pie wedges to explode.
Detailed explanation
The following example shows how you can explode specific wedges in a PieChart control when the user clicks an item in the chart.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/11/06/exploding-wedges-in-a-flex-piechart-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
import mx.charts.events.ChartItemEvent;
private function pieChart_itemClick(evt:ChartItemEvent):void {
var arr:Array = [];
arr[evt.hitData.chartItem.index] = 0.2;
pieSeries.perWedgeExplodeRadius = arr;
}
]]>
</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:PieChart id="pieChart"
dataProvider="{dp.product}"
selectionMode="single"
showDataTips="true"
itemClick="pieChart_itemClick(event);"
height="250"
width="100%">
<mx:series>
<mx:PieSeries id="pieSeries" field="@data">
<mx:stroke>
<mx:Stroke color="black" weight="0" />
</mx:stroke>
<mx:filters>
<mx:Array />
</mx:filters>
</mx:PieSeries>
</mx:series>
</mx:PieChart>
</mx:Application>
For more information, see "Exploding wedges in a Flex PieChart control" at FlexExamples.com.
Report abuse
