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

Flex Chart – Créer un LineChart à lignes verticales

Dans les tutoriaux sur les tutoriaux LineChart Flex précédents, on utilisait les options par défaut du LineChart Flex. Par défaut, un LineChart montre une progression horizontale.

Mais on peut aussi créer un composant LineChart Flex qui montre une progression verticale. Pour afficher les lignes d'un LineChart verticalement, vous devez:

• Donner explicitement les propriétés xField et yField des objets LineSeries
• Fixer la propriété sortOnXField des LineSeries à false

Par défaut, les points de données d'une Series sont rangés de gauche à droite (sur l'axe X) avant d'être rendus. La ligne est donc horizontale. Quand vous désactiver le tri (sort) sur le xField et spécifiez une propriété yField, Flex va dessiner verticalement plutôt horizontalement.

Flex ne fait pas de tri quand la donnée est verticale. Vous devez donc être sur que votre data est arrangée correctement dans votre dataProvider. Si votre data n'est pas arrangée correctement, Flex va faire une ligne en zig-zag pour connecter tous les points selon leur position dans le dataProvider.

L'exemple suivant montre deux LineSeries dans un composant LineChart, affichées verticalement plutôt qu'horizontalement.

<?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:1100},
			{Month:"Feb", Profit:1800, Expenses:1055},
			{Month:"Mar", Profit:1200, Expenses:800},
			{Month:"Apr", Profit:1400, Expenses:900},
			{Month:"May", Profit:1400, Expenses:1150},
			{Month:"Jun", Profit:1340, Expenses:600},
			{Month:"Jul", Profit:1600, Expenses:950},
			{Month:"Aug", Profit:1500, Expenses:1140},
			{Month:"Sep", Profit:1800, Expenses:1200},
			{Month:"Oct", Profit:2000, Expenses:1280},
			{Month:"Nov", Profit:2400, Expenses:1300},
			{Month:"Dec", Profit:1500, Expenses:500}
		]);
	]]></mx:Script>

	<mx:Panel title="Vertical Line Chart">
		<mx:LineChart id="myChart"
		dataProvider="{expenses}"
		showDataTips="true"
		>
			<mx:verticalAxis>
				<mx:CategoryAxis
				dataProvider="{expenses}"
				categoryField="Month"
				/>
			</mx:verticalAxis>
			<mx:series>
				<mx:LineSeries
				xField="Profit"
				yField="Month"
				displayName="Profit"
				sortOnXField="false"
				/>
				<mx:LineSeries
				xField="Expenses"
				yField="Month"
				displayName="Expenses"
				sortOnXField="false"
				/>
			</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