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

Flex Chart – Modifier la forme des points d'un PlotChart (itemRenderer)

Par défaut, Flex affiche la première serie de données (PlotSeries) d'un PlotChart en dessinant un diamant (diamond) pour chaque point. Quand vous définissez plusieurs PlotSeries, Flex va rendre la deuxième avec des cercles puis avec des carrés. Si vous avez d'autres series avec un renderer par défaut, Flex va recommencer avec le diamond, le cercle, le carré et ainsi de suite.

La forme de diamant est, comme les autres formes, définie dans une classe de rendu (renderer class). Ces classes de rendu définissant les formes font toutes partie du package mx.charts.renderers. Le cercle par exemple est définit par la classe CircleItemRenderer.

Voici la liste des classes de rendu par défaut:

• BoxItemRenderer
• CircleItemRenderer
• CrossItemRenderer
• DiamondItemRenderer
• ShadowBoxItemRenderer
• TriangleItemRenderer

Vous pouvez contrôler l'image qui sera affichée par le graphique Plot Chart en fixant la propriété de style "itemRenderer".

L'exemple suivant modifie le rendu par défaut:

<?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:"January", Profit:2000, Expenses:1500, Amount:450},
			{Month:"February", Profit:1000, Expenses:200, Amount:600},
			{Month:"March", Profit:1500, Expenses:500, Amount:300},
			{Month:"April", Profit:500, Expenses:300, Amount:500},
			{Month:"May", Profit:1000, Expenses:450, Amount:250},
			{Month:"June", Profit:2000, Expenses:500, Amount:700}
		]);
		]]>
	</mx:Script>

	<mx:Panel title="Plot Chart With Custom Item Renderer">
		<mx:PlotChart id="myChart" dataProvider="{expenses}"
		showDataTips="true">
			<mx:series>
				<mx:PlotSeries
				xField="Expenses"
				yField="Profit"
				displayName="Plot 1"
				itemRenderer="mx.charts.renderers.CrossItemRenderer"
				radius="10"
				/>
				<mx:PlotSeries
				xField="Amount"
				yField="Expenses"
				displayName="Plot 2"
				itemRenderer="mx.charts.renderers.DiamondItemRenderer"
				radius="10"
				/>
				<mx:PlotSeries
				xField="Profit"
				yField="Amount"
				displayName="Plot 3"
				itemRenderer=
				"mx.charts.renderers.TriangleItemRenderer"
				radius="10"
				/>
			</mx:series>
		</mx:PlotChart>
		<mx:Legend dataProvider="{myChart}"/>
	</mx:Panel>
</mx:Application>

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