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

Flex Chart – Le composant BarChart (exemples)

Vous pouvez utiliser le composant BarChart pour représenter les series de données en barres, dont la longueur est déterminée par la valeur de la data (par défaut). Un BarChart Flex correspond à un histogramme horizontal. Un BarChart est essentiellement un ColumnChart avec une rotation de 90°, c'est pourquoi les composants BarChart et ColumnChart on beaucoup de propriétés en commun. Pour plus d'informations sur le BarChart, je vous invite donc à voir les tutoriaux Flex sur les ColumnChart (en utilisant la recherche de ce site).
Vous pouvez utiliser un BarChart de plusieurs manières, un peu comme le "type" de l'AreaChart: clustered, overlaid,  stacked, 100% stacked, et High-low.

Vous devez utiliser les series BarSeries avec le composant BarChart pour définir la donnée de votre Chart. Voici les propriétés principales que vous allez utiliser:

• yField: Spécifie le champ du dataProvider qui va déterminer la position sur l'axe Y de la base de chaque barre du chart. Si vous ne précisez pas cette propriété, Flex va arranger les barres dans l'ordre d'apparition dans le dataProvider.
• xField: Spécifie le champ du dataProvider qui va déterminer la position X de la fin de chaque barre.
• minField: Spécifie le champ du dataProvider qui va déterminer la position en X de la base de la barre. Cette propriété n'a pas d'effet si vous donnez un type "overlaid", "stacked" ou "100% stacked" à votre BarChart.

Voici un exemple MXML de BarChart simple:

<?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([
			{Month:"Jan", Profit:2000, Expenses:1500},
			{Month:"Feb", Profit:1000, Expenses:200},
			{Month:"Mar", Profit:1500, Expenses:500}
		]);
	]]></mx:Script>
	<mx:Panel title="Bar Chart">
		<mx:BarChart id="myChart" dataProvider="{expenses}" showDataTips="true">
			<mx:verticalAxis>
				<mx:CategoryAxis
				dataProvider="{expenses}"
				categoryField="Month"
				/>
			</mx:verticalAxis>
			<mx:series>
				<mx:BarSeries
				yField="Month"
				xField="Profit"
				displayName="Profit"
				/>
				<mx:BarSeries
				yField="Month"
				xField="Expenses"
				displayName="Expenses"
				/>
			</mx:series>
		</mx:BarChart>
		<mx:Legend dataProvider="{myChart}"/>

	</mx:Panel>
</mx:Application>

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