Customizing callout strokes in a Flex PieChart control

The following example shows how you can customize the callout stroke in a Flex PieChart control by using the PieSeries class’s calloutStroke 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:calloutStroke>

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

</mx:calloutStroke>

<mx:filters>

<mx:Array />

</mx:filters>

</mx:PieSeries>

</mx:series>

</mx:PieChart>

To see an example of changing the stroke around the pie chart itself, see “Customizing strokes in a Flex PieChart control” .

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;

stroke.caps = comboBox.selectedItem.label;

pieSeries.setStyle("calloutStroke", 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 styleName="plain">

<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="0"

liveDragging="true"

snapInterval="1"

tickInterval="1"

change="setStroke(event);" />

</mx:FormItem>

<mx:FormItem label="caps:">

<mx:ComboBox id="comboBox"

change="setStroke(event);">

<mx:dataProvider>

<mx:Array>

<mx:Object label="none" />

<mx:Object label="round" />

<mx:Object label="square" />

</mx:Array>

</mx:dataProvider>

</mx:ComboBox>

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

labelPosition="callout">

<mx:calloutStroke>

<mx:Stroke color="black"

weight="0"

caps="none" />

</mx:calloutStroke>

<mx:filters>

<mx:Array />

</mx:filters>

</mx:PieSeries>

</mx:series>

</mx:PieChart>

</mx:Application>

Flex Samples

Latest Flex Samples

Flex Top Links

Customizing callout strokes in a Flex PieChart control

0 comments:

Related Flex Samples

Search Flex Samples
	Submit search form