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

Flex Chart – Utiliser plusieurs Series de type différent dans un même Chart

Tous les graphiques Flex qui héritent de la classe CartesianChart (tous les Charts par défaut sauf PieChart), permettent de mélanger plusieurs Series de data dans le même composant Charting. Vous pouvez ainsi créer un histogramme (ColumnSeries) avec une ligne qui le traverse (LineSeries) ou bien mélanger tous les types de Series. Vous pouvez utiliser une combinaison des objets Series suivant dans un composant CartesianChart:

• AreaSeries
• BarSeries
• BubbleSeries
• CandlestickSeries
• ColumnSeries
• HLOCSeries
• LineSeries
• PlotSeries

Voici un exemple qui mélange des LineSeries et des ColumnSeries:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Script>
	<![CDATA[
	[Bindable]
	public var SMITH:Array = [
		{date:"22-Aug-05", close:45.87},
		{date:"23-Aug-05", close:45.74},
		{date:"24-Aug-05", close:45.77},
		{date:"25-Aug-05", close:46.06},
	];
	[Bindable]
	public var DECKER:Array = [
		{date:"22-Aug-05", close:45.59},
		{date:"23-Aug-05", close:45.3},
		{date:"24-Aug-05", close:46.71},
		{date:"25-Aug-05", close:46.88},
	];
	]]>
	</mx:Script>

	<mx:Panel title="Multiple Data Series" width="400" height="400">
		<mx:ColumnChart id="myChart"
		dataProvider="{SMITH}"
		showDataTips="true"
		height="250"
		width="350"
		>
			<mx:horizontalAxis>
				<mx:CategoryAxis categoryField="date"/>
			</mx:horizontalAxis>
			<mx:verticalAxis>
				<mx:LinearAxis minimum="40" maximum="50"/>
			</mx:verticalAxis>
			<mx:series>
				<mx:ColumnSeries
				dataProvider="{SMITH}"
				xField="date"
				yField="close"
				displayName="SMITH"
				>
				</mx:ColumnSeries>
				<mx:LineSeries
				dataProvider="{DECKER}"
				xField="date"
				yField="close"
				displayName="DECKER"
				>
				</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

L'utilisation de plusieurs Series dans un même composant Chart fonctionne mieux quand les points de donnée sont tous dans le même intervalle (comme un prix courant et un prix moyen). Quand les points sont numériquement dans des intervalles très différents, le graphique peut devenir difficile à comprendre car la donnée est affichée sur un seul axe. La solution est d'utiliser plusieurs axes, chacun avec son propre intervalle, comme on va le voir dans un prochain tutorial Flex.