Adobe Flex Tutorial - Adobe Flex Tutorial

29juin/093

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

Remplis sous: Charting, Exemple, MXML || Taggé comme: ColumnChart, ColumnSeries, dataProvider, horizontalAxis, Legend Laisser un commentaire

Articles similaires

Commentaires (3) Trackbacks (1) (Souscrire aux commentaires de cet article)

esp666
2 août 2010

Cela ne marche plus avec les composants spark... Pourquoi est une grande question.
fnicollet
2 août 2010

Bonjour,
Le fait d'utiliser Spark n'est pas gênant car les composants viennent toujours de Flex 3 (mx). Juste une ou deux adaptations propres à Flex 4 et cela fonctionne:

COPIER-COLLER
MXML:
<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx">

<fx:Declarations>

<fx:Array id="expenses">

<fx:Object

Month="January"

Profit="2000"

Expenses="1500"

Amount="450"

/>

<fx:Object

Month="February"

Profit="1000"

Expenses="200"

Amount="600"

/>

<fx:Object

Month="March"

Profit="1500"

Expenses="500"

Amount="300"

/>

<fx:Object

Month="April"

Profit="500"

Expenses="300"

Amount="500"

/>

<fx:Object

Month="May"

Profit="1000"

Expenses="450"

Amount="250"

/>

<fx:Object

Month="June"

Profit="2000"

Expenses="500"

Amount="700"

/>

</fx:Array>

</fx:Declarations>

<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>

</s:Application>
Fabien
esp666
3 août 2010

oui ici ça marche parce que c'est un composant mx qui est utilisé. Avec les composant spark ce n'est plus possible

For Spark list-based controls, the value of the dataProvider property must implement the IList interface. Classes that implement IList include ArrayCollection, ArrayList, and XMLListCollection.

source http://www.adobe.com/devnet/flex/quickstarts/using_data_providers.html

D'un autre côté cela lève l'ambiguïté causé par l'utilisation d'un array qui est en réalité transformé en collection par les objets mx ce qui limite l'utilisation d'un Array en dataprovider aux données statiques.