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

Flex Chart – Le composant PlotChart (exemples)

Vous pouvez utiliser le composant PlotChart pour représenter de la donnée en coordonnées Cartésiennes, dans laquelle, chaque point a une valeur déterminant sa position le long de l'axe X, et une valeur déterminant sa position sur l'axe Y. Vous pourrez aussi définir la forme que Flex va afficher pour chaque point de data avec un renderer sur les PlotSeries.

Vous allez utiliser la classe PlotSeries avec le composant PlotChart pour définir la donnée du Chart. Voici les propriétés principales que vous serez amenés à modifier:

• yField: Spécifie le champ du dataProvider qui va déterminer la position Y de chaque point
• xField: Spécifie le champ du dataProvider qui va déterminer la position X de chaque point
• radius: Définit le rayon, en pixels, de chaque symbole. Valeur par défaut: 5 pixels.

Les propriétés xField et yField sont obligatoires sur chaque PlotSeries du composant PlotChart.

Voici un exemple simple de PlotChart Flex en MXML:

<?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">
		<mx:PlotChart id="myChart" dataProvider="{expenses}"
		showDataTips="true">
			<mx:series>
				<mx:PlotSeries
				xField="Expenses"
				yField="Profit"
				displayName="Plot 1"
				/>
				<mx:PlotSeries
				xField="Amount"
				yField="Expenses"
				displayName="Plot 2"
				/>
				<mx:PlotSeries
				xField="Profit"
				yField="Amount"
				displayName="Plot 3"
				/>
			</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