Apache Adobe Flex TutorialTutoriaux Adobe Flex & AIR en Français

Flex Chart – Séparer certaines parts d'un PieChart (explode avec perWedgeExplodeRadius)

Dans l'exemple précédent, on séparait toutes les parts d'un PieChart de manière uniforme avec la propriété explodeRadius. On va voir cette fois comment faire un explode seulement sur certaines parts du PieChart grâce à la propriété "perWedgeExplodeRadius" de PieSeries. La propriété perWedgeExplodeRadius prend un tableau de valeurs entre 0 et 1. La Nième valeur du tableau est ajoutée à la valeur d'explodeRadius pour déterminer la valeur qui va séparer la part du reste du PieChart. Si une valeur n'est pas définie, la part va se séparer suivant la valeur de explodeRadius.

Dans l'exemple suivant, on va séparer uniquement la quatrième part, les dépenses "Car":

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">
	<mx:Script><![CDATA[
		import mx.collections.ArrayCollection;

		[Bindable]
		public var expenses:ArrayCollection = new ArrayCollection([
			{Expense:"Taxes", Amount:2000},
			{Expense:"Rent", Amount:1000},
			{Expense:"Bills", Amount:100},
			{Expense:"Car", Amount:450},
			{Expense:"Gas", Amount:100},
			{Expense:"Food", Amount:200}
		]);
		// Create a bindable Array of explode radii.
		[Bindable]
		public var explodingArray:Array = [0,0,0,.2,0,0]
	]]></mx:Script>

	<mx:Panel title="Exploding Pie Chart Per Wedge">
		<mx:PieChart id="pie"
		dataProvider="{expenses}"
		showDataTips="true"
		>
			<mx:series>
				<!--Apply the Array of radii to the PieSeries.-->
				<mx:PieSeries
				field="Amount"
				nameField="Expense"
				perWedgeExplodeRadius="{explodingArray}"
				labelPosition="callout"
				/>
			</mx:series>
		</mx:PieChart>
		<mx:Legend dataProvider="{pie}"/>
	</mx:Panel>
</mx:Application>

Flex Source Code Download: Télécharger le code source complet de l'application