Creating custom fills in a Flex PieChart control using the fillFunction property

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.

<?xml version="1.0"?>

<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>

Flex Samples

Latest Flex Samples

Flex Top Links

Creating custom fills in a Flex PieChart control using the fillFunction property

0 comments:

Related Flex Samples

Search Flex Samples
	Submit search form