TEPPEI STUDIO

ENJOY RESTRICTION

PieChartで選択されたPieだけ分離させるサンプル

Chart関連のTipsって少ないですよね。
ってことで、PieChartで、選択された”Pie”だけ分離させるサンプルです。
別に大したことないけど、備忘的に。

f:id:teppei-studio:20090131172603j:image

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
	pageTitle="piechart">
	<mx:Script>
		<![CDATA[
			import mx.charts.events.ChartItemEvent;
			import mx.collections.ArrayCollection;
			[Bindable]
			public var expenses:ArrayCollection = new ArrayCollection([
				{Expense:"Taxes", Amount:2000},
				{Expense:"Rent", Amount:1000},
				{Expense:"Bills", Amount:100},
				{Expense:"Car", Amount:450},
				{Expense:"Gas", Amount:100},
				{Expense:"Food", Amount:200}
			]);
			
			private function pieItemClickHandler(e:ChartItemEvent):void
			{
				var arry:Array = new Array();
				for(var i:int=0; i<expenses.length; i++)
				{
					if(expenses.getItemAt(i) == e.hitData.item)
					{
						arry.push(Number(0.1));
					}
					else
					{
						arry.push(0);
					}
				}
				ps.perWedgeExplodeRadius = arry;
			}
	]]></mx:Script>
	
	<mx:SeriesInterpolate id="rearrangeData" 
		duration="1000" 
		minimumElementDuration="200" 
		elementOffset="0"/>
	
	<mx:Panel title="Pie Chart">
		<mx:PieChart id="myChart" 
			dataProvider="{expenses}" 
			showDataTips="true" 
			itemClick="pieItemClickHandler(event)">
			<mx:series>
				<mx:PieSeries id="ps" 
					field="Amount" 
					nameField="Expense" 
					labelPosition="callout" 
					showDataEffect="rearrangeData"/>
				</mx:series>
		</mx:PieChart>
		<mx:Legend dataProvider="{myChart}"/>
	</mx:Panel>
</mx:Application>