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

Flex Chart – Utiliser les composants Flex Charting

Les composants Flex Charting permettent de créer les types de graphiques les plus communs et vous permettent de modifier l'apparence de ces graphiques. Les composants de Charting sont situés dans le package mx.charts.*.
La liste suivante indique les types de graphiques supportés, ainsi que le nom du composant et le nom de la classe de Series que vous devez utiliser pour afficher les données dans chaque graphique. Il existe aussi d'autres types de graphiques que des personnes hors du Flex SDK ont crée, ceci est seulement la liste des composants contenus dans le Flex SDK:

• Aire (Area): AreaChart / AreaSeries
• Barre (Bar): BarChart / BarSeries
• Bulles (Bubbles): BubbleChart / BubbleSeries
• Candlestick: CandlestickChart / CandlestickSeries
• Colonnes (Column): ColumnChart / ColumnSeries
• HighLowOpenClose: HLOCChart / HLOCSeries
• Ligne (Line): LineChart / LineSeries
• Secteur (Pie): PieChart / PieSeries
• Nuages de points (Plot): PlotChart / PlotSeries

Tous ces composants Charts, sauf le PieChart sont des sous-classes de la classe CartesianChart. Les CartesianChart sont des graphiques qui représentent de la donnée dans un espace cartésien, c'est-à-dire, une espace rectangulaire à deux dimensions. La classe PieChart est une sous-classe de PolarChart, qui représente la donnée dans une espace polaire (cercle).

Tous les composants Charts héritent des caractéristiques de base de la classe ChartBase.
Un Chart à typiquement la structure MXML suivante:

<mx:ChartName>

	<!-- Definir une ou plusieurs series. -->
	<mx:SeriesName/>
	<!-- Definir les axes. -->
	<mx:horizontalAxis>
		<mx:axis_type/>
	</mx:horizontalAxis>
	<mx:verticalAxis>
		<mx:axis_type/>
	</mx:verticalAxis>
	<!-- Styler les axes et les intervalles (ticks). -->
	<mx:horizontalAxisRenderers>
		<mx:AxisRenderer/>
	</mx:horizontalAxisRenderers>
		<mx:verticalAxisRenderers>
	<mx:AxisRenderer/>
	</mx:verticalAxisRenderers/>
	<!-- Ajouter les lignes de la grille de fond et les autres éléments (background, ...). -->
	<mx:annotationElements>
		<mx:Array/>
	</mx:annotationElements>
	<mx:backgroundElements>
		<mx:Array/>
	</mx:backgroundElements/>

</mx:ChartName><!-- Définir une légende (optionnel). -->
<mx:Legend/>

Voici un détail de chacune des parties d'un Chart:

• Chart: (obligatoire) définit une ou deux data provider pour le chart. Définit aussi le type de Chart et fixe de nombreuses propriétés comme les toolTips (data tips), la sensibilité de la souris, etc.C'est le tag qui va contenir tous les autres pour un Chart.
• Series: (obligatoire) Définit une ou plusieurs data series qui seront affichées dans le graphiques. Permet aussi de définir le type de ligne (Stroke), le remplissage (Fill) et les renderers (skins) des data series mais aussi les stroke et fills utilisées par les légendes de chaque Chart pour chaque series. Vous pouvez aussi définir un second ensemble de series pour chaque Chart, pour afficher de multiples data series sur un seul graphique. Chaque series d'un Chart à son propre dataProvider.
• Axis: Définit le type d'axe (numérique ou catégorie). Définit aussi les labels des axes, les titres, et les propriétés de style comme le padding. Vous pouvez aussi définir des axes pour un second ensemble de series, si vous en avez une.
• Axis Renderer: (optionnel) Définit le style et le placement des ticks (petites barres indiquant les limites de chaque catégorie), permet d'activer ou de désactiver les labels, la rotation des labels et les espaces entre les labels. Vous pouvez aussi définir un axis renderer pour un second ensemble de series, si vous en avez une.
• Elements: (optionnel) Définit les lignes de la grilles et les éléments supplémentaires qui vont apparaître sur le graphique.

Pour chaque type de Chart, Flex fournit un composant Chart et une classe de series spécifique. Le composant Chart définit le type de Chart, le dataProvider qui fournit la donnée du graphique, les lignes de la grille de fond, le text pour les axes du graphique, et d'autres propriétés spécifiques à chaque type de chart.
La propriété dataProvider d'un composant Chart détermine quelle donnée le graphique utilise. Un Data Provider est une collection d'objets. Cela peut être un Array (tableau) d'objets ou tout objet qui implémente l'API de collections (ArrayCollection par exemple). Un Data Provider peut aussi être une objet XMLList avec des nodes XML, résultat d'une instruction e4x par exemple.
Les composants Chart utilisent de la donnée de type liste (flat) comme un tableau à une dimension. Le data provider peut contenir de objets tels que des String, des Numbers, et même d'autres objets. Vous pouvez utiliser les chart series pour identifier quelle donnée du data provider le graphique va afficher. Un data provider peut contenir plus de data que ce que vous voulez en afficher sur le chart, donc on va utiliser des series de chart pour spécifier quels points vous voulez utiliser parmi le data provider. Vous pouvez aussi utiliser les chart series pour définir l'apparence de la donnée dans votre Chart Flex.
Toutes les chart series héritent du data provider du Chart, sauf si on leur fixe un data provider explicitement. Si vous fixez la valeur de la propriété dataProvider sur un composant Chart, vous n'êtes pas obligé d'indiquer la valeur de cette propriété  sur les series. Vous pouvez cependant, définir différent data provider pour chaque series d'un Chart.

Par exemple, pour créer un camembert, vous allez utiliser le composant PieChart avec les series PieSeries. Pour créer un graphique de type aire, vous pouvez utiliser le composant AreaChart avec les series AreaSeries, comme dans l'exemple suivant:

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
	<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: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

Cet exemple définit un simple tag <mx:AreaSeries>. Le tag spécifie la data series que vous voulez afficher dans le graphique. Vous pouvez ajouter un second tag <mx:AreaSeries> pour afficher deux data series comme dans l'exemple suivant:

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
	<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

Vous ne devez pas forcement définir un data provider pour chaque composant Chart. Chaque series peut avoir son propre data provider comme dans cet exemple:

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Script><![CDATA[
		import mx.collections.ArrayCollection;
		[Bindable]
		public var profit04:ArrayCollection = new ArrayCollection([
			{Month:"Jan", Profit:2000},
			{Month:"Feb", Profit:1000},
			{Month:"Mar", Profit:1500}
		]);
		[Bindable]
		public var profit05:ArrayCollection = new ArrayCollection([
			{Month:"Jan", Profit:2200},
			{Month:"Feb", Profit:1200},
			{Month:"Mar", Profit:1700}
		]);
		[Bindable]
		public var profit06:ArrayCollection = new ArrayCollection([
			{Month:"Jan", Profit:2400},
			{Month:"Feb", Profit:1400},
			{Month:"Mar", Profit:1900}
		]);
	]]></mx:Script>
	<mx:Panel title="Column Chart">
		<mx:ColumnChart id="myChart" dataProvider="{profit04}" showDataTips="true">
			<mx:horizontalAxis>
				<mx:CategoryAxis categoryField="Month"/>
			</mx:horizontalAxis>
			<mx:series>
				<mx:ColumnSeries
					dataProvider="{profit04}"
					yField="Profit"
					xField="Month"
					displayName="2004"
				/>
				<mx:ColumnSeries
					dataProvider="{profit05}"
					yField="Profit"
					xField="Month"
					displayName="2005"
				/>
				<mx:ColumnSeries
					dataProvider="{profit06}"
					yField="Profit"
					xField="Month"
					displayName="2006"
				/>
			</mx:series>
		</mx:ColumnChart>
		<mx:Legend dataProvider="{myChart}"/>
	</mx:Panel>
</mx:Application>

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

Pour changer dynamiquement la taille d'une Chart afin qu'il s'adapte à la taille de la fenêtre, fixez simplement les valeurs des attributs width et height en pourcentage comme ceci:

//...
<mx:BarChart id="myChart"
	dataProvider="{expenses}"
	height="100%"
	width="100%"
	showDataTips="true"
>
//...