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

Flex Chart – Le composant ColumnChart (exemples)

Le composant ColumnChart représente de la donnée en histogramme (barres). La hauteur de chaque barre est  déterminée par les valeurs de la donnée (dataProvider). Vous avez à votre disposition plusieurs type d'affichage différents pour le ColumnChart, dont les colonnes simples, superposées (overlaid), empilées(stacked), 100% stacked ou high-low.

Vous pouvez utiliser les ColumnSeries avec le composant ColumnChart pour définir la donnée à affichée dans votre graphique. Voici les propriétés les plus importantes:

• yField: Spécifie le champ du dataProvider qui va déterminer la position Y du haut de la colonne. Ce champ définit la hauteur de la colonne.
• xField: Spécifie le champ du dataProvider qui va déterminer la position X de la colonne. Si cette propriété n'est pas renseignée, Flex va arranger les colonnes dans l'ordre dans lequel elles arrivent.
• minField: Spécifie le champ du dataProvider qui va déterminer la position Y du bas de la colonne. Cette propriété n'a aucun effet sur les ColumnChart overlaid, stacked ou 100% stacked.

L'exemple suivant montre un composant ColumnChart avec deux Series (ColumnSeries):

<?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},
			{Month:"Feb", Profit:1000, Expenses:200},
			{Month:"Mar", Profit:1500, Expenses:500}
		]);
	]]></mx:Script>

	<mx:Panel title="Column Chart">
		<mx:ColumnChart id="myChart" dataProvider="{expenses}" showDataTips="true">
			<mx:horizontalAxis>
				<mx:CategoryAxis
				dataProvider="{expenses}"
				categoryField="Month"
				/>
			</mx:horizontalAxis>
			<mx:series>
				<mx:ColumnSeries
				xField="Month"
				yField="Profit"
				displayName="Profit"
				/>
				<mx:ColumnSeries
				xField="Month"
				yField="Expenses"
				displayName="Expenses"
				/>
			</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