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

Flex Chart – Utiliser plusieurs Axes différents dans un même Chart Flex

Lorsque vous utilisez plusieurs Series de données dans le même graphique, comme expliqué dans ce tutorial Flex, vous aurez sûrement quelques problèmes si les intervalles de données sont très différents. Dans ce cas là, les points de donnée pourraient être situés dans des régions très différentes du Chart. Par exemple, une valeur contenue entre 100€ et 150€, alors qu'un autre prix fluctue entre 2€ et 2.5€. Si vous affichez les deux series de données dans un même graphique, il vous sera difficile de voir un quelconque lien entre les prix, même sur un axe logarithmique. Pour contourner ce problème, vous pouvez utiliser de multiples axes sur votre Chart pour que chaque serie de data soit positionnée de manière relative par rapport à son axe. Tous les Chart qui héritent de CartesianChart (c'est-à-dire tous sauf le Pie Chart) supportent le fait d'avoir plusieurs series sur l'axe horizontal, vertical ou les deux. Pour utiliser plusieurs axes dans un Chart, vous devez tout d'abord définir les Series du Chart et leurs axes. Par exemple, pour un graphique qui mélange des colonnes et des lignes, vous aurez un ColumnSeries et un LineSeries. Pour chacun, Vous allez aussi définir un axe vertical comme dans cet exemple de code:

<mx:series>
	<mx:ColumnSeries id="cs1" dataProvider="{SMITH}" yField="close">
		<mx:verticalAxis>
			<mx:LinearAxis id="v1" minimum="40" maximum="50"/>
		</mx:verticalAxis>
	</mx:ColumnSeries>
	<mx:LineSeries id="cs2" dataProvider="{DECKER}" yField="close">
		<mx:verticalAxis>
			<mx:LinearAxis id="v2" minimum="150" maximum="170"/>
		</mx:verticalAxis>
	</mx:LineSeries>
</mx:series>

Vous devrez ensuite définir les "Axis Renderer", et lier leurs propriétés "axis" aux axes des Series. Dans ce cas, on va définir deux vertical axis renderers, et les lier aux objets LinearAxis:

<mx:verticalAxisRenderers>
	<mx:AxisRenderer placement="left" axis="{v1}"/>
	<mx:AxisRenderer placement="left" axis="{v2}"/>
</mx:verticalAxisRenderers>

Notez que vous pouvez contrôler la position des axes en utilisant la propriété "placement" de l'AxisRenderer. Pour un axe vertical, les valeurs valides sont "left" et "right". Pour un axe horizontal, les valeurs valides sont "top" et "bottom". Les axes peuvent aussi être indépendants des définitions de Series. Par exemple, vous pouvez plus d'une série à un même axe. Dans ce cas, vous pouvez définir l'axe vertical comme ceci:

<mx:horizontalAxis>
	<mx:CategoryAxis id="h1" categoryField="date"/>
<mx:horizontalAxis>

Et les lier (bind) ensuite aux Series, comme ceci:

<mx:ColumnSeries id="cs1" horizontalAxis="{h1}" dataProvider="{SMITH}" yField="close">
...
<mx:LineSeries id="cs2" horizontalAxis="{h1}" dataProvider="{DECKER}" yField="close">

Et vous pouvez lier un AxisRenderer sur ce même axe:

<mx:horizontalAxisRenderers>
	<mx:AxisRenderer placement="bottom" axis="{h1}"/>
</mx:horizontalAxisRenderers>

Voici le code complet de cet exemple Flex avec de multiples axes mais dont les Series partagent les mêmes propriétés définies dans un AxisRenderer commun:

<?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 SMITH:ArrayCollection = new ArrayCollection([
			{date:"22-Aug-05", close:41.87},
			{date:"23-Aug-05", close:45.74},
			{date:"24-Aug-05", close:42.77},
			{date:"25-Aug-05", close:48.06},
		]);

		[Bindable]
		public var DECKER:ArrayCollection = new ArrayCollection([
			{date:"22-Aug-05", close:157.59},
			{date:"23-Aug-05", close:160.3},
			{date:"24-Aug-05", close:150.71},
			{date:"25-Aug-05", close:156.88},
		]);
	]]></mx:Script>

	<mx:Panel title="Column Chart With Multiple Axes">
		<mx:ColumnChart id="myChart" showDataTips="true">
			<mx:horizontalAxis>
				<mx:CategoryAxis id="h1" categoryField="date"/>
			</mx:horizontalAxis>
			<mx:horizontalAxisRenderers>
				<mx:AxisRenderer placement="bottom" axis="{h1}"/>
			</mx:horizontalAxisRenderers>
			<mx:verticalAxisRenderers>
				<mx:AxisRenderer placement="left" axis="{v1}"/>
				<mx:AxisRenderer placement="left" axis="{v2}"/>
			</mx:verticalAxisRenderers>
			<mx:series>
				<mx:ColumnSeries id="cs1"
				horizontalAxis="{h1}"
				dataProvider="{SMITH}"
				yField="close"
				displayName="SMITH"
				>
					<mx:verticalAxis>
						<mx:LinearAxis id="v1" minimum="40" maximum="50"/>
					</mx:verticalAxis>
				</mx:ColumnSeries>
				<mx:LineSeries id="cs2"
				horizontalAxis="{h1}"
				dataProvider="{DECKER}"
				yField="close"
				displayName="DECKER"
				>
					<mx:verticalAxis>
						<mx:LinearAxis id="v2" minimum="150" maximum="170"/>
					</mx:verticalAxis>
				</mx:LineSeries>
			</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