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

Flex Chart – Utiliser plusieurs Series dans un composant BubbleChart

Comme pour les autres composants Charting Flex, vous pouvez avoir plusieurs Series associées à un composant BubbleChart. Cependant, il faut se soucier d'une chose supplémentaire lorsque l'on utilise des Series multiples dans un composant BubbleChart. Vous devez décider si vous voulez que la taille des bulles d'un series soit relative à celle des bulles des autres Series ou si vous voulez que les tailles soient relatives dans chaque Series.

Par exemple, vous avez deux Series, A et B. La Series A à des valeurs de rayon de 10, 20 et 30. La Series B à des valeurs de rayon de 2, 4 et 8. Votre composant BubbleChart peut afficher les bubbles de la Series A plus grandes que celles de la Series B. Vous pouvez aussi modifier votre BubbleChart pour que la taille des bubbles de la Series A ne soit pas relatives à celle de la Series B. Ainsi, Flex va rendre la bubble avec un rayon de 10 de la Series A et la bubble avec un rayon de 2 de la Series B avec la même taille.

Voici un exemple dans lequel la taille des bulles est relative, de manière globale sur les 2 Series:

<?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]
		private var s1:ArrayCollection = new ArrayCollection( [
			{"x": 20, "y": 10, "r":10 },
			{"x": 40, "y": 5, "r":20 } ,
			{"x": 60, "y": 0, "r":30 }]);
		[Bindable]
		private var s2:ArrayCollection = new ArrayCollection( [
			{"x": 20, "y": 50, "r":2 },
			{"x": 40, "y": 75, "r":4 },
			{"x": 60, "y": 100, "r":8 } ]);
		]]>
	</mx:Script>

	<mx:Panel title="Bubble Chart (Bubbles relative to other series)">
		<mx:BubbleChart id="myChart"
		showDataTips="true"
		>
		<mx:series>
			<mx:BubbleSeries
			dataProvider="{s1}"
			displayName="series1"
			xField="x"
			yField="y"
			radiusField="r"
			/>
			<mx:BubbleSeries
			dataProvider="{s2}"
			displayName="series2"
			xField="x"
			yField="y"
			radiusField="r"
			/>
			</mx:series>
		</mx:BubbleChart>
		<mx:Legend dataProvider="{myChart}"/>
	</mx:Panel>
</mx:Application>

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

Si vous voulez en revanche que la taille des bubbles soit relative à la taille des autres bulles de la même Series, mais pas des autres Series, utilisez un axe radial différent pour chaque Series. Pour cela, ajoutez un tag enfant <mx:radialAxis> au tag <mx:BubbleSeries> dans votre MXML. Cela va créer 2 Series dans un composant BubbleChart dont la taille des bubbles sont indépendantes.

L'exemple suivant montre un composant BubbleChart avec deux Series indépendantes:

<?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]
		private var s1:ArrayCollection = new ArrayCollection( [
			{"x": 20, "y": 10, "r":10 },
			{"x": 40, "y": 5, "r":20 } ,
			{"x": 60, "y": 0, "r":30 }]);
		[Bindable]
		private var s2:ArrayCollection = new ArrayCollection( [
			{"x": 20, "y": 50, "r":2 },
			{"x": 40, "y": 75, "r":4 },
			{"x": 60, "y": 100, "r":8 } ]);
		]]>
	</mx:Script>

	<mx:Panel title="Bubble Chart (Bubbles relative to other series)">
		<mx:BubbleChart id="myChart"
		showDataTips="true"
		>
		<mx:series>
			<mx:BubbleSeries
			dataProvider="{s1}"
			displayName="series1"
			xField="x"
			yField="y"
			radiusField="r"
			>
				<mx:radiusAxis>
					<mx:LinearAxis/>
				</mx:radiusAxis>
			</mx:BubbleSeries>
			<mx:BubbleSeries
			dataProvider="{s2}"
			displayName="series2"
			xField="x"
			yField="y"
			radiusField="r"
			>
				<mx:radiusAxis>
					<mx:LinearAxis/>
				</mx:radiusAxis>
			</mx:BubbleSeries>
			</mx:series>
		</mx:BubbleChart>
		<mx:Legend dataProvider="{myChart}"/>
	</mx:Panel>
</mx:Application>

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