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 →