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>