TEPPEI STUDIO

ENJOY RESTRICTION

PieChartの色を自動的に連続的な色配分にしたい

PieChartのデフォルトの色配分で微妙ですよね。

こんなやり方なら、少しはマシになるかも。

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
	pageTitle="piechart">
	<mx:Script>
		<![CDATA[
			import color.type.RGBColor;
			import color.ColorConverter;
			import mx.utils.ColorUtil;
			import mx.graphics.SolidColor;
			import mx.charts.series.items.PieSeriesItem;
			import mx.graphics.IFill;
			import mx.charts.ChartItem;
			import mx.controls.Alert;
			import mx.charts.events.ChartItemEvent;
			import mx.collections.ArrayCollection;
			[Bindable]
			public var expenses:ArrayCollection = new ArrayCollection([
				{Expense:"Taxes", Amount:1200},
				{Expense:"Rent", Amount:1000},
				{Expense:"Bills", Amount:100},
				{Expense:"Car", Amount:450},
				{Expense:"Gas", Amount:100},
				{Expense:"Food", Amount:200},
				{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;
			}
			
			private function psFillFunction(item:ChartItem, index:Number):IFill 
			{
				var len:int = expenses.length;
				
				var min:Number = Number(50);
				var max:Number = Number(200);
				var per:Number = (max - min) / len;
				var per2:Number = (max - min) / len * 2;
				
				//up,down.v
				//r,g,bにそれぞれup,down,V,Aのどれをあてるかで雰囲気が変わってきます。
				var r:Number = up(min,max,per,per2,index,len);
				var g:Number = down(min,max,per,per2,index,len);
				var b:Number = V(min,max,per,per2,index,len);
				
				var clr:uint = this.rgbToHex(r,g,b);
				return(new SolidColor(clr, 1));
			}
			
			private function up(min:Number,max:Number,per:Number,per2:Number,index:int,len:int):Number
			{
				return min + per * index;
			}

			private function down(min:Number,max:Number,per:Number,per2:Number,index:int,len:int):Number
			{
				return max - per * index;
			}

			private function V(min:Number,max:Number,per:Number,per2:Number,index:int,len:int):Number
			{
				if(index < expenses.length / 2)
				{
					return max - per2 * index; 
				}
				else
				{
					return min + per2 * (len - index);
				}
			}

			private function A(min:Number,max:Number,per:Number,per2:Number,index:int,len:int):Number
			{
				if(index < expenses.length / 2)
				{
					return min + per2 * (len - index);
				}
				else
				{
					return max - per2 * index; 
				}
			}
		
		private function rgbToHex(red:Number,green:Number,blue:Number):uint  
		{  
			var hex:uint = (red << 16) + (green << 8) + blue;  
			return hex;  
		} 
	]]></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" 
					fillFunction="psFillFunction"/>

				</mx:series>
		</mx:PieChart>
		<mx:Legend dataProvider="{myChart}"/>
	</mx:Panel>
</mx:Application>