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

Flex Chart – Le composant LineChart (exemples)

Un composant LineChart permet de représenter une série de point, en coordonnées cartésiennes, connectés par une ligne continue. Vous pouvez utiliser une icône ou un symbole pour représenter chaque point de donnée le long de la ligne ou afficher une ligne sans icônes.
Vous pouvez utiliser des LineSeries avec un LineChart pour définir la donnée à afficher pour le graphique. Voici les propriétés de LineSeries que vous serez amenés à modifier:

• yField: Spécifie le champ du dataProvider qui détermine la position sur l'axe Y de chaque point. C'est aussi la hauteur de la ligne à cet endroit.
• xField: Spécifie le champ du dataProvider qui déterminé la position sur l'axe X. Si vous ne précisez pas ce champ, Flex prendra les valeurs dans l'ordre dans lequel elle arrivent.
• interpolateValues: Spécifie la manière par laquelle Flex doit représenter les valeurs manquantes. Si vous mettez cette valeur à false, le graphique aura une ligne brisée à cette endroit. Si elle est à true, Flex va tracer une ligne continue en interpolant la valeur de ce point selon les points adjacents. La valeur par défaut est false.
• form: Spécifie la manière par laquelle la series de donnée est affichée dans le graphique. Les valeurs valides sont les suivantes:
  • segment: Les lignes sont connectées en segment, valeur par défaut
  • step: Dessine les lignes comme des segments horizontaux et verticaux (palliers)
  • reverseStep: Comme le step, sauf que l'orde de dessin est inversé
  • vertical: Dessine la ligne verticale depuis le point de coordonnées Y du premier point jusqu'à la coordonée Y du second point (voir schéma)
  • horizontal: voir schéma
  • curve: Dessine une courbe entre les points

Voici un schéma récapitulatif des différentes formes:

Voici un exemple Flex pour créer un composant LineChart en MXML:

<?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="Line Chart">
		<mx:LineChart id="myChart"
		dataProvider="{expenses}"
		showDataTips="true"
		>
			<mx:horizontalAxis>
				<mx:CategoryAxis
				dataProvider="{expenses}"
				categoryField="Month"
				/>
			</mx:horizontalAxis>
			<mx:series>
				<mx:LineSeries
				yField="Profit"
				displayName="Profit"
				/>
				<mx:LineSeries
				yField="Expenses"
				displayName="Expenses"
				/>
			</mx:series>
		</mx:LineChart>
		<mx:Legend dataProvider="{myChart}"/>
	</mx:Panel>
</mx:Application>

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