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

Flex Chart – Le composant AreaChart (exemples)

Le composant AreaChart représente de la donnée sous la forme d'une surface délimitée par une ligne reliant les valeurs de la donnée. La surface (area) sous la ligne est remplie par une couleur ou un motif. Vous pouvez utiliser un icône ou un symbole pour représenter chaque point de donnée le long de la ligne, mais vous pouvez aussi afficher une simple ligne sans icônes.

Voici comment produire un exemple simple d'AreaChart Flex:

<?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([
			{Month:"Jan", Profit:2000, Expenses:1500, Amount:450},
			{Month:"Feb", Profit:1000, Expenses:200, Amount:600},
			{Month:"Mar", Profit:1500, Expenses:500, Amount:300}
		]);
	]]></mx:Script>

	<mx:Panel title="Area Chart">
		<mx:AreaChart id="myChart" dataProvider="{expenses}"
		showDataTips="true">
			<mx:horizontalAxis>
				<mx:CategoryAxis
				dataProvider="{expenses}"
				categoryField="Month"
				/>
			</mx:horizontalAxis>
			<mx:series>
				<mx:AreaSeries
				yField="Profit"
				displayName="Profit"
				/>
				<mx:AreaSeries
				yField="Expenses"
				displayName="Expenses"
				/>
			</mx:series>
		</mx:AreaChart>
		<mx:Legend dataProvider="{myChart}"/>
	</mx:Panel>
</mx:Application>

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

Un composant AreaChart est principalement un LineChart avec une surface remplie juste en dessous, c'est pourquoi les composants AreaChart et LineChart partagent de nombreuses caractéristiques communes.

Définir les Series (AreaSeries) d'un AreaChart

Vous devez utiliser des Series de type AreaSeries avec un composant AreaChart pour définir la donnée à utiliser pour ce graphique.

Voici les propriétés principales à utiliser dans les AreaSeries pour définit votre Chart:

• yField: Spécifie le champ du dataProvider qui va déterminer la position sur l'axe Y de chaque point de donnée
• xField: Spécifiele champ du dataProvider qui va déterminer la position sur l'axe X de chaque point de donnée. Si vous ne remplissez pas ce champ, Flex va arranger les points dans l'ordre du dataProvider.
• minField: Spécifie le champ du dataProvider qui va déterminer la position en Y du bas de la surface. Cette propriété est optionnelle. Si vous l'oubliez, le bas de la surface est alignée avec l'axe X. Cette propriété n'a pas d'effet sur les Charts overlaid, stacked ou 100% stacked.
• form: Spécifie la manière par laquelle la Series de donnée est affichée dans le graphique. Voici les valeur valides:
  • segment: Dessine les lignes commes des segments connectés entre eux. Cette valeur est la valeur par défaut
  • step: Dessine les lignes comme segments horizontaux et verticaux. Au premier point de data, une ligne verticale est dessinée, et ensuite une ligne horizontale est dessinée jusqu'au second point (pallier)
  • reverseStep: Identique au step sauf que les pallier sont inversés (dessin horizontal avant le vertical, voir exemple)
  • vertical: Dessine seulement la ligne verticale entre la coordonnée Y du premier point et la coordonnée X du second point (répété pour chaque point)
  • horizontal: Dessine seulement la ligne horizontale entre la coordonnée X du premier point et la coordonnée Y du second point (répété pour chaque point)
  • curve: Dessine une courbe entre les points de donnée

Voici en image, les différence entre toutes les "form" disponible pour les Series du composant AreaChart:

Définir le "type" d'un AreaChart

Vous pouvez utiliser la propriété "type" d'un composant AreaChart pour choisir le mode de superposition des différentes series:

• overlaid (valeur par défaut): Superposées selon un axe Z, les différentes séries sont rendues les unes par dessus les autres, dans l'ordre dans lequel elles apparaissent dans le dataProvider
• stacked: Empilement sur l'axe Y. Les valeurs des différentes Series sont ajoutées
• 100%: Assez similaire au type "stacked" sauf que la somme fera 100% (graphique "plein"). Chaque élément du chart représente ainsi un pourcentage et non plus une valeur.

Pour vous donner une idée, voici l'exemple dans une application simple d'un AreaChart avec différents Types. Notez aussi le changement dans les dataTips (toolTips quand vous passez sur un point de data):

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

Définir le remplissage "fill" d'un AreaChart

Pour personnaliser le remplissage des Series d'un composant AreaChart, vous devez utiliser les propriétés areaFill et areaStroke. Pour chaque remplissage, il faut spécifier une SolidColor et un objet Stroke.

Voici un petit exemple MXML d'AreaChart utilisant les objets SolidColor et Stroke. Notez que ces éléments sont définis en dehors de tout tag MXML, directement dans le tag Application. Ils sont ainsi repérés par un id, et donc réutilisables:

<?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]
	private var expensesAC:ArrayCollection = new ArrayCollection( [
	{ Month: "Jan", Profit: 2000, Expenses: 1500, Amount: 450 },
	{ Month: "Feb", Profit: 1000, Expenses: 200, Amount: 600 },
	{ Month: "Mar", Profit: 1500, Expenses: 500, Amount: 300 },
	{ Month: "Apr", Profit: 1800, Expenses: 1200, Amount: 900 },
	{ Month: "May", Profit: 2400, Expenses: 575, Amount: 500 } ]);
	]]>
	</mx:Script>

	<!-- Define custom colors for use as fills in the AreaChart control. -->
	<mx:SolidColor id="sc1" color="blue" alpha=".3"/>
	<mx:SolidColor id="sc2" color="red" alpha=".3"/>
	<mx:SolidColor id="sc3" color="green" alpha=".3"/>
	<!-- Define custom Strokes. -->
	<mx:Stroke id="s1" color="blue" weight="2"/>
	<mx:Stroke id="s2" color="red" weight="2"/>
	<mx:Stroke id="s3" color="green" weight="2"/>

	<mx:Panel title="AreaChart Control with Custom Fills Example"
	height="100%" width="100%" layout="horizontal">
		<mx:AreaChart id="Areachart"
		height="100%"
		width="70%"
		paddingLeft="5"
		paddingRight="5"
		showDataTips="true"
		dataProvider="{expensesAC}"
		>
			<mx:horizontalAxis>
				<mx:CategoryAxis categoryField="Month"/>
			</mx:horizontalAxis>
			<mx:series>
				<mx:AreaSeries
				yField="Profit"
				displayName="Profit"
				areaStroke="{s1}"
				areaFill="{sc1}"
				/>
				<mx:AreaSeries
				yField="Expenses"
				displayName="Expenses"
				areaStroke="{s2}"
				areaFill="{sc2}"
				/>
				<mx:AreaSeries
				yField="Amount"
				displayName="Amount"
				areaStroke="{s3}"
				areaFill="{sc3}"
				/>
			</mx:series>
		</mx:AreaChart>
		<mx:Legend dataProvider="{Areachart}"/>
	</mx:Panel>
</mx:Application>

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