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

Flex Chart – Créer un PieChart en forme de donut avec innerRadius

Dans le tutorial Flex précédent, je montrais comment créer un PieChart classique en MXML. On peut aussi facilement créer des Pie Chart en forme de "Donut". Les Donut Chart sont identiques aux Pie Chart sauf qu'ils ont un trou au centre, au lieu du remplissage classique.

Pour créer un Donut Chart, il suffit de spécifier la propriété innerRadius sur le composant PieChart. La valeur de la propriété innerRadius est un pourcentage correspondant à la place prise par le trou par rapport au rayon total du chart (entre 0 et 1). Voici un exemple simple de Pie Chart Flex MXML utilisant la propriété innerRadius:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
	<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}
		]);
	]]></mx:Script>

	<mx:Panel title="Pie Chart">
		<mx:PieChart id="myChart"
		dataProvider="{expenses}"
		showDataTips="true"
		innerRadius=".3"
		>
			<mx:series>
				<mx:PieSeries
				field="Amount"
				nameField="Expense"
				labelPosition="callout"
				/>
			</mx:series>
		</mx:PieChart>
		<mx:Legend dataProvider="{myChart}"/>
	</mx:Panel>
</mx:Application>

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