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

Flex Chart – Créer un histogramme à barres flottantes (floating ColumnChart)

On a vu dans les articles précédent comme créer un ColumnChart Flex et comment modifier les styles (fill et stroke) d'un ColumnChart. On va voir cette fois comment créer un ColumnChart flottant (floating).

Pour cela, il faut utiliser la propriété minField des ColumnSeries. Cette propriété fixe le niveau bas de la colonne. L'exemple suivant crée un composant ColumnChart utilisant cette propriété:

<?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", Revenue:1200, Expenses:500},
			{Month:"Feb", Revenue:1200, Expenses:550},
			{Month:"Mar", Revenue:1240, Expenses:475},
			{Month:"Apr", Revenue:1300, Expenses:600},
			{Month:"May", Revenue:1420, Expenses:575},
			{Month:"Jun", Revenue:1400, Expenses:600},
			{Month:"Jul", Revenue:1500, Expenses:600},
			{Month:"Aug", Revenue:1600, Expenses:750},
			{Month:"Sep", Revenue:1600, Expenses:735},
			{Month:"Oct", Revenue:1750, Expenses:750},
			{Month:"Nov", Revenue:1800, Expenses:800},
			{Month:"Dec", Revenue:2000, Expenses:850}
		]);
	]]></mx:Script>

	<mx:Panel title="Floating Column Chart">
		<mx:ColumnChart
		dataProvider="{expenses}"
		showDataTips="true"
		>
			<mx:horizontalAxis>
				<mx:CategoryAxis
				dataProvider="{expenses}"
				categoryField="Month"
				/>
			</mx:horizontalAxis>
			<mx:series>
				<mx:ColumnSeries
				yField="Revenue"
				minField="Expenses"
				displayName="Revenue"
				/>
			</mx:series>
		</mx:ColumnChart>
	</mx:Panel>
</mx:Application>

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