This file radialFills.as is a simple way to externalize your gradient
fills for styling graphs (pie charts). This builds up an array of 10
different radial gradient fills and you can apply it to your pie series.
##Application.mxml
<mx:Script>
<![CDATA[
import com.phipz.styles.radialFills;
[Bindable] private var pieColors:Array = radialFills(); //gets
the color scheme for pie chart
]]>
</mx:Script>
<mx:PieChart id="pieDP" showDataTips="true" width="100%" height="100%"
dataProvider="{_dpXMLList}"
itemClick="explodeSlice(event.hitData.item)"
doubleClickEnabled="true"
itemDoubleClick="changeView(event.hitData.item)"
dataTipFunction="formatDataTip"
resizeEffect="{resizePie}">
<mx:series>
<mx:Array>
<mx:PieSeries id="ps" field="phoneCount"
nameField="@name"
labelPosition="callout"
labelFunction="getSliceLabel"
showDataEffect="{interpolate}"
fills="{pieColors}">
</mx:PieSeries>
</mx:Array>
</mx:series>
</mx:PieChart>
###radialFills.as
//Generates the radial gradient fills for the pie chart slices
package com.phipz.styles{
import mx.graphics.IFill;
import mx.graphics.RadialGradient;
import mx.graphics.GradientEntry;
public function radialFills():Array{
var gradients:Array = new Array();
var fill:RadialGradient = new RadialGradient();
var g1:GradientEntry = new GradientEntry(0xEF7651,0);
var g2:GradientEntry = new GradientEntry(0x994C34,1);
fill.entries = [g1,g2];
gradients.splice(-1,0,fill);
fill = new RadialGradient();
g1 = new GradientEntry(0xE9C836,0);
g2 = new GradientEntry(0xAA9127,1);
fill.entries = [g1,g2];
gradients.splice(-1,0,fill);
fill = new RadialGradient();
g1 = new GradientEntry(0x6FB35F,0);
g2 = new GradientEntry(0x497B54,1);
fill.entries = [g1,g2];
gradients.splice(-1,0,fill);
fill = new RadialGradient();
g1 = new GradientEntry(0xA1AECF,0);
g2 = new GradientEntry(0x47447A,1);
fill.entries = [g1,g2];
gradients.splice(-1,0,fill);
fill = new RadialGradient();
g1 = new GradientEntry(0xe7dc81,0);
g2 = new GradientEntry(0xe9d700,1);
fill.entries = [g1,g2];
gradients.splice(-1,0,fill);
fill = new RadialGradient();
g1 = new GradientEntry(0xe26ba2,0);
g2 = new GradientEntry(0xde0084,1);
fill.entries = [g1,g2];
gradients.splice(-1,0,fill);
fill = new RadialGradient();
g1 = new GradientEntry(0x9176af,0);
g2 = new GradientEntry(0x5d2989,1);
fill.entries = [g1,g2];
gradients.splice(-1,0,fill);
fill = new RadialGradient();
g1 = new GradientEntry(0xBA9886,0);
g2 = new GradientEntry(0xAE775B,1);
fill.entries = [g1,g2];
gradients.splice(-1,0,fill);
fill = new RadialGradient();
g1 = new GradientEntry(0x9a86ba,0);
g2 = new GradientEntry(0x8a5bae,1);
fill.entries = [g1,g2];
gradients.splice(-1,0,fill);
fill = new RadialGradient();
g1 = new GradientEntry(0x86ba8d,0);
g2 = new GradientEntry(0x5bae5f,1);
fill.entries = [g1,g2];
gradients.splice(-1,0,fill);
return gradients as Array;
}
}
--- In [email protected], "phipzkillah" <[EMAIL PROTECTED]> wrote:
>
> Hi,
>
> I looked off the dashboard sample that came packaged with Flex 2 for
> the radial gradient fills. In there example the gradient fills were
> hard coded into the mxml file - and once the number of series exceeds
> predefined number of fills it loops. SO now your pie chart has
> multiple slices being the same color.
>
> Has anyone externalized the radial gradient fills? Is there a simple
> way to do this?
>
> For some charts I may have up to 25 different slices. It would be
> insane to hard code the 25 color gradients into each and every mxml
> file I have! ...not to mention the management would be a pita.
>
>
> Im looking for a way to externalize this and add more colors to it...
>
> <mx:fills>
> <mx:Array>
> <mx:RadialGradient>
> <mx:entries>
> <mx:Array>
> <mx:GradientEntry
> color="#EF7651" ratio="0"/>
> <mx:GradientEntry
> color="#994C34" ratio="1"/>
> </mx:Array>
> </mx:entries>
> </mx:RadialGradient>
> <mx:RadialGradient>
> <mx:entries>
> <mx:Array>
> <mx:GradientEntry
> color="#E9C836" ratio="0"/>
> <mx:GradientEntry
> color="#AA9127" ratio="1"/>
> </mx:Array>
> </mx:entries>
> </mx:RadialGradient>
> <mx:RadialGradient>
> <mx:entries>
> <mx:Array>
> <mx:GradientEntry
> color="#6FB35F" ratio="0"/>
> <mx:GradientEntry
> color="#497B54" ratio="1"/>
> </mx:Array>
> </mx:entries>
> </mx:RadialGradient>
> <mx:RadialGradient>
> <mx:entries>
> <mx:Array>
> <mx:GradientEntry
> color="#A1AECF" ratio="0"/>
> <mx:GradientEntry
> color="#47447A" ratio="1"/>
> </mx:Array>
> </mx:entries>
> </mx:RadialGradient>
> <mx:RadialGradient>
> <mx:entries>
> <mx:Array>
> <mx:GradientEntry
> color="#BA9886" ratio="0"/>
> <mx:GradientEntry
> color="#AE775B" ratio="1"/>
> </mx:Array>
> </mx:entries>
> </mx:RadialGradient>
>
>
> </mx:Array>
> </mx:fills>
>
> Any help would be much appreciated.
>
> -phil
>
