The following example shows how you can set fill colors in a Flex PieChart by specifying a custom fill function. In this example the fill function calculates the fill color based on the percentage value of each item. The larger the wedge, the brigher the fill color.
Full code after the jump.
<?xml version="1.0"?>
<!-- http://blog.flexexamples.com/2007/11/07/creating-custom-fills-in-a-flex-piechart-control-using-the-fillfunction-property/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
import mx.charts.series.items.PieSeriesItem;
import mx.graphics.IFill;
import mx.charts.ChartItem;
import mx.graphics.SolidColor;
private function pieSeries_fillFunc(item:ChartItem, index:Number):IFill {
var curItem:PieSeriesItem = PieSeriesItem(item);
/* Convert to a number between 0 and 1. */
var pct:Number = curItem.percentValue / 100;
return new SolidColor(0x0000FF * pct, 1.0);
}
]]>
</mx:Script>
<mx:XML id="dp">
<products>
<product label="Product 1" data="3" />
<product label="Product 2" data="1" />
<product label="Product 3" data="4" />
<product label="Product 4" data="1" />
<product label="Product 5" data="5" />
<product label="Product 6" data="9" />
</products>
</mx:XML>
<mx:PieChart id="chart"
height="100%"
width="100%"
showDataTips="true"
dataProvider="{dp.product}">
<mx:series>
<mx:PieSeries id="series"
nameField="@label"
field="@data"
fillFunction="pieSeries_fillFunc"
filters="[]" />
</mx:series>
</mx:PieChart>
</mx:Application>
View source is enabled in the following example.
{ 3 comments… read them below or add one }
Is this ‘fillFunction’ work only for Flex 3.0? And if it is any possible method to do the same in flex 2.0?
I’m looking around the web and can not found the solution for flex 2.0.
At last, I found another way to modified the fill color in runtime. (For Flex 2.0, if you have 3.0 then it’s easier by use fillFunction)
The key is to define an Array to store the default color data.(any color)
eg.
Then set it to PieSeries attributes : fills=”{pieColor}”
And replace each color in that array through the code!! That’s it.
One thing is the number of data that I used hasn’t change so I’m not sure it will work for dynamic number of data.
The code is below is:
private var pieColor:Array = [0x000000, 0x000000, 0x000000, 0x000000]; private function changeColor():void{ pieColor[0] = getColor('red'); pieColor[1] = getColor('amber'); pieColor[2] = getColor('green'); pieColor[3] = getColor('default'); } private function getColor(color:String):uint { trace("--getColor--: " color); switch(color){ case "red": return 0xFF0000; case "green": return 0x00FF00; case "amber": return 0xFFCC00; default: return 0x8800CC; } }How can I create a pie chart that uses dynamic data from ArrayCollection ? (I have a web page that does a cycles between the stats and then on the endState it generates all information in one RichTextEditor and then just add the text information into the DataGrid (3 rows) and now I want to create a pieChart that will use the data from one row and then generate a pieChart.