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

Flex Chart – Le composant BubbleChart (exemples)

Vous pouvez utiliser le composant BubbleChart pour représenter de la donnée avec trois valeurs pour chaque point de data:

• Une valeur qui détermine sa position sur l'axe Y
• Une valeur qui détermine sa position sur l'axe X
• Une valeur qui détermine la taille du symbole (la "Bubble"), relativement aux autres point de donnée du graphique.

Le tag <mx:BubbleChart/> prend des paramètres supplémentaires par rapport à l'AreaChart ou au BarChart par exemple. On peut ainsi définir un minRadius et un maxRadius. Ces propriétés de style spécifient le rayon minimum et maxium d'un symbole, en pixels. Le point de data avec la plus grande valeur aura un rayon plus petit que le maxRadius et celui avec la plus petite valeur sera plus grand que le minRadius.

Par exemple, si vous fixez le minRadius à 10 et le maxRadius à 100, tous les points de donnée auront un rayon entre 10 et 50. La valeur par défaut pour le maxRadius est 50 pixels. La valeur par défaut du minRadius est 0 pixels. Vous pouvez aussi contrôler ces valeurs sur les classes BubbleSeries.

Vous pouvez utiliser les BubbleSeries avec un BubbleChart pour définir la donnée du graphique. Voici les propriétés principales:

• yField (obligatoire): Spécifie le champ du dataProvider qui déterminer la position Y de chaque point.
• xField (obligatoire): Spécifie le champ du dataProvider qui déterminer la position X de chaque point.
• radiusField (obligatoire): Spécifie le champ du dataProvider qui déterminer le rayon de chaque symbole, relativement aux autres point de donnée du graphique.

L'exemple suivant montre un BubbleChart en MXML simple:

<?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", Profit:2000, Expenses:120, Amount:45},
			{Month:"Feb", Profit:1000, Expenses:200, Amount:60},
			{Month:"Mar", Profit:1500, Expenses:500, Amount:30}
		]);
	]]></mx:Script>
	<mx:Panel title="Bubble Chart">
		<mx:BubbleChart id="myChart"
		minRadius="1"
		maxRadius="50"
		dataProvider="{expenses}"
		showDataTips="true"
		>
			<mx:series>
				<mx:BubbleSeries
				xField="Profit"
				yField="Expenses"
				radiusField="Amount"
				displayName="Profit"
				/>
			</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

Personnaliser le style des Bubbles d'un BubbleChart (remplissage "fill" et contour "stroke")

Pour personnaliser le remplissage et le contour des bulles, vous allez utiliser les propriétés fill et stroke auxquelles vous allez passez des objets SolidColor et Stroke.

<?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 }]);
		]]>
	</mx:Script>
	<!-- Define custom color and line style for the bubbles. -->
	<mx:SolidColor id="sc1" color="blue" alpha=".3"/>
	<mx:Stroke id="stroke1" color="blue" weight="2"/>

	<mx:Panel title="BubbleChart Control with Custom Bubble Styles">
		<mx:BubbleChart id="myChart" showDataTips="true">
			<mx:series>
				<mx:BubbleSeries
				dataProvider="{s1}"
				displayName="series1"
				xField="x"
				yField="y"
				radiusField="r"
				fill="{sc1}"
				stroke="{stroke1}"
				/>
			</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