Customizing strokes in a Flex PieChart control

The following example shows how you can customize the stroke in a Flex PieChart control by using the PieSeries class’s stroke style and the mx.graphics.Stroke class, as seen in the following snippet:

<mx:PieChart dataProvider="{dp.product}" height="250" width="100%">

<mx:series>

<mx:PieSeries id="pieSeries" field="@data">

<mx:stroke>

<mx:Stroke color="black" weight="2" />

</mx:stroke>

<mx:filters>

<mx:Array />

</mx:filters>

</mx:PieSeries>

</mx:series>

</mx:PieChart>

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

layout="vertical"

verticalAlign="middle"

backgroundColor="white">

<mx:Script>

<![CDATA[

import mx.graphics.Stroke;

private function setStroke(evt:Event):void {

var stroke:Stroke = new Stroke();

stroke.color = colorPicker.selectedColor;

stroke.weight = slider.value;

pieSeries.setStyle("stroke", stroke);

}

]]>

</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:ApplicationControlBar dock="true">

<mx:Form>

<mx:FormItem label="color:">

<mx:ColorPicker id="colorPicker"

change="setStroke(event);" />

</mx:FormItem>

<mx:FormItem label="weight:">

<mx:HSlider id="slider"

minimum="0"

maximum="10"

value="1"

liveDragging="true"

snapInterval="1"

tickInterval="1"

change="setStroke(event);" />

</mx:FormItem>

</mx:Form>

</mx:ApplicationControlBar>

<mx:PieChart id="pieChart"

dataProvider="{dp.product}"

height="250"

width="100%">

<mx:series>

<mx:PieSeries id="pieSeries"

field="@data">

<mx:stroke>

<mx:Stroke color="black"

weight="2" />

</mx:stroke>

<mx:filters>

<mx:Array />

</mx:filters>

</mx:PieSeries>

</mx:series>

</mx:PieChart>

</mx:Application>

Flex Samples

Latest Flex Samples

Flex Top Links

Customizing strokes in a Flex PieChart control

0 comments:

Related Flex Samples

Search Flex Samples
	Submit search form