Archives du mot-clef Legend

Flex Chart – Utiliser un ArrayCollection comme dataProvider (ActionScript)

Dans les 2 articles précédents, je montre comment assigner un Array d’Object en ActionScript et en MXML comme data provider d’un Chart. Un des inconvénients d’utiliser un simple Array comme dataProvider d’un Chart et que vous ne pouvez utiliser que les méthodes de Array pour manipuler votre donnée. De plus, en utilisant un Array comme data provider, la donnée de ce tableau doit être statique. Même si vous rendez votre Array Bindable, quand la donnée de l’Array change, le chart ne va pas refléter ce changement.

Les Collections sont un mécanisme plus robuste pour un data provider qu’un Array. Elles offrent des opérations comme l’insertion, la suppression d’objets mais aussi le filtrage et le tri. Les Collections supportent aussi les notifications de changement. Un ArrayCollection est un bon moyen d’exposer un Array comme une interface ICollectionView ou IList.

Comme pour un Array, vous pouvez utiliser du MXML pour définir le contenu de votre collection mais cela se révèle assez laborieux et verbeux.

N’oubliez pas d’importer la classe mx.collections.ArrayCollection.

La solution ActionScript est plus élégante à mon goût:

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">
	<mx:Script>
		<![CDATA[
		import mx.collections.ArrayCollection;
		[Bindable]
		private 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="Column Chart">
		<mx:ColumnChart id="myChart" dataProvider="{expenses}" showDataTips="true">
			<mx:horizontalAxis>
				<mx:CategoryAxis
				dataProvider="{expenses}"
				categoryField="Month"
				/>
			</mx:horizontalAxis>
			<mx:series>
				<mx:ColumnSeries
				xField="Month"
				yField="Profit"
				displayName="Profit"
				/>
				<mx:ColumnSeries
				xField="Month"
				yField="Expenses"
				displayName="Expenses"
				/>
			</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

Lire la suite →

Flex Chart – Utiliser un Array d’Object comme dataProvider (MXML)

On a vu dans l’article précédent qu’on pouvait déclarer un Array d’Object comme dataProvider d’un Chart en ActionScript. Vous vous en doutez, on peut aussi le faire en MXML de manière un peu plus lourde:

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">
	<mx:Array id="expenses">
		<mx:Object
			Month="January"
			Profit="2000"
			Expenses="1500"
			Amount="450"
		/>
		<mx:Object
			Month="February"
			Profit="1000"
			Expenses="200"
			Amount="600"
		/>
		<mx:Object
			Month="March"
			Profit="1500"
			Expenses="500"
			Amount="300"
		/>
		<mx:Object
			Month="April"
			Profit="500"
			Expenses="300"
			Amount="500"
		/>
		<mx:Object
			Month="May"
			Profit="1000"
			Expenses="450"
			Amount="250"
		/>
		<mx:Object
			Month="June"
			Profit="2000"
			Expenses="500"
			Amount="700"
		/>
	</mx:Array>
	<mx:Panel title="Column Chart">
		<mx:ColumnChart id="myChart" dataProvider="{expenses}" showDataTips="true">
			<mx:horizontalAxis>
				<mx:CategoryAxis
				dataProvider="{expenses}"
				categoryField="Month"
				/>
			</mx:horizontalAxis>
			<mx:series>
				<mx:ColumnSeries
				xField="Month"
				yField="Profit"
				displayName="Profit"
				/>
				<mx:ColumnSeries
				xField="Month"
				yField="Expenses"
				displayName="Expenses"
				/>
			</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

This movie requires Flash Player 11

Flex Chart – Utiliser un Array d’Object comme dataProvider (ActionScript)

Utiliser un tableau (Array) d’objets (Object) comme data provider pour un chart est l’approche la plus simple. Vous pouvez typiquement créer un Array d’Object comme dans cet exemple:

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">
	<mx:Script>
		<![CDATA[
		import mx.collections.ArrayCollection;
		[Bindable]
		private var expenses:Array = [
			{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="Column Chart">
		<mx:ColumnChart id="myChart" dataProvider="{expenses}" showDataTips="true">
			<mx:horizontalAxis>
				<mx:CategoryAxis
				dataProvider="{expenses}"
				categoryField="Month"
				/>
			</mx:horizontalAxis>
			<mx:series>
				<mx:ColumnSeries
				xField="Month"
				yField="Profit"
				displayName="Profit"
				/>
				<mx:ColumnSeries
				xField="Month"
				yField="Expenses"
				displayName="Expenses"
				/>
			</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

This movie requires Flash Player 11

Flex Chart – Créer des Charts en ActionScript

Vous pouvez créer, détruire et manipuler les charts Flex en utilisant de l’ActionScript, comme vous le feriez pour tout autre composant Flex.
Quand on travaille avec des blocs Script ou dans des fichiers classe séparés, il vous faudra être bien sûr d’importer les classes appropriées. Voici les imports définis dans la plupart des cas, à vous bien sûr de les adapter pour seulement importer les classes dont vous avez besoin.

import mx.collections.*;
import mx.charts.*;
import mx.charts.series.*;
import mx.charts.renderers.*;
import mx.charts.events.*;

Pour créer un chart en AS3, utilisez simplement le mot-clé « new ». Vous pouvez ensuite fixer les propriétés de l’objet Chart comme vous le feriez en MXML. Pour assigner un data provider, utilisez la propriété « dataProvider« . Vous devrez ensuite ajouter une nouvelle series à votre Chart. Pour cela, faîtes un « new » sur la classe de series correspondante. Pour appliquer cette series à votre Chart, utilisez la propriété « series ».

Notez que la propriété series est de type Array car un Chart peut contenir plusieurs series. Pour ajouter une series, faîtes un push() et pas une assignation directe.

Lire la suite →