円グラフ

パイごとにクリックしたら、くっついたり離れたりするのができた。

他の人には簡単なものなんだろうけど、できてなんかうれしいから載っけとく。

<?xml version="1.0"?>
<!-- charts/ExplodingPiePerWedge.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:ns1="*">
  <mx:Script><![CDATA[
  	import mx.events.IndexChangedEvent;
	import mx.charts.series.items.PieSeriesItem;
	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 var stateArray:Array = new Array();

    public function itemClickPie(clickEvent:ChartItemEvent):void{
		var item:PieSeriesItem = clickEvent.hitData.chartItem as PieSeriesItem;
		var array:Array = new Array();
		var tmpIndex:int;

		for(var i:int = 0;i < piechar.dataProvider.length;i++){
			if(item.index == i){
				if(stateArray[item.index] =="pop"){
					array.push(0);
					stateArray[item.index] = "close";
				}else{
					array.push(0.1);
					stateArray[item.index] = "pop";
				}
			}else{
				if(stateArray[i] =="close"){
					array.push(0);
					stateArray[i] = "close";
				}else if(stateArray[i] =="pop"){
					array.push(0.1);
					stateArray[i] = "pop";
				}else{
					array.push(0);
				}
			}
		}
		sel.perWedgeExplodeRadius = array;
    }


  ]]></mx:Script>
  <mx:Panel title="Exploding Pie Chart Per Wedge">
     <mx:PieChart id="piechar"
        dataProvider="{expenses}"
        showDataTips="true"
    	itemClick="itemClickPie(event);"
     >
        <mx:series>
           <!--Apply the Array of radii to the PieSeries.-->
           <mx:PieSeries id="sel"
                field="Amount"
                nameField="Expense"
                fontSize="80" textAlign="center" labelPosition="inside"
           />
        </mx:series>
     </mx:PieChart>
     <mx:Legend dataProvider="{piechar}"/>
  </mx:Panel>
</mx:Application>