Adobe Flex Tutorial - Adobe Flex Tutorial

1juil/097

Flex Chart – Utiliser un fichier XML comme dataProvider

Vous pouvez définir votre donnée dans un fichier XML structuré. L'exemple suivant montre le contenu d'un fichier nommé data.xml:

<data>
	<result month="Jan-04">
		<apple>81768</apple>
		<orange>60310</orange>
		<banana>43357</banana>
	</result>
	<result month="Feb-04">
		<apple>81156</apple>
		<orange>58883</orange>
		<banana>49280</banana>
	</result>
</data>

Vous pouvez charger ce fichier directement comme source d'un mx:Model comme dans l'exemple suivant:

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">
	<mx:Model id="results" source="data.xml"/>
	<mx:Panel title="Line Chart">
		<mx:LineChart id="myChart" dataProvider="{results.result}" showDataTips="true">
			<mx:horizontalAxis>
				<mx:CategoryAxis categoryField="month"/>
			</mx:horizontalAxis>
			<mx:series>
				<mx:LineSeries yField="banana" displayName="Banana"/>
				<mx:LineSeries yField="apple" displayName="Apple"/>
				<mx:LineSeries yField="orange" displayName="Orange"/>
			</mx:series>
		</mx:LineChart>
		<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

Vous pouvez utiliser des XML plus complexes pour définir la data de votre dataProvider. Par exemple, un dataProvider XML peut avoir plusieurs noeuds imbriqués. Dans ce cas, cependant, vous devez avoir une dataFunction pour définir les champs que le Chart doit utiliser.

Remplis sous: Charting, Exemple, XML || Taggé comme: dataFunction, LineChart, LineSeries, XML Laisser un commentaire

Articles similaires

Commentaires (7) Trackbacks (0) (Souscrire aux commentaires de cet article)

Aude
5 février 2010

Bonjour,
J'aurais voulu savoir s'il est possible de changer dynamiquement le xml utilisé comme data provider ?
Merci
fnicollet
5 février 2010

Bonjour,
il est parfaitement possibles de le faire. il y a plusieurs options pour cela. Tu peux utiliser un Loader :
http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/display/Loader.html
(voir exemple d'utilisation en bas)
Ou alors, tu peux utiliser un HTTPService (même pour un fichier en local):
http://livedocs.adobe.com/flex/3/langref/mx/rpc/http/HTTPService.html

Fabien
Aude
5 février 2010

Merci pour la réponse rapide.
Peut-être que j'aurais dû donner davantage de détails : en fait j'ai une fenêtre avec 2 charts et des onglets en haut. Je souhaiterais changer dynamiquement le mx:Model en fonction de l'onglet cliqué. J'ai vu qu'il n'était pas possible de mettre une variable.

Si ta réponse convient pour mon cas je suis désolée mais je n'arrive pas à voir comment, est-ce que tu pourrais me donner plus de détail ?
Merci par avance
fnicollet
5 février 2010

Comment ça il n'est pas possible de le mettre dans une variable ?
Tu peux très bien avoir comme dataProvider, un ArrayCollection qui est lié à la propriété dataProvider de ton chart
( Ensuite, tu modifies ton ArrayCollection et tout va se mettre à jour

Fabien
Aude
5 février 2010

Ok pour un array mais qd on utilise un xml via comme dans le tuto ci-dessus? L'attribut source de Model ne peut pas prendre une variable comme valeur et je n'arrive pas à modifier sa valeur via une fonction qui ferait une nouvelle attribution comme là : results.source="autre.xml".
Donc comment faire ?
fnicollet
5 février 2010

Alors, je pense que results.source = "autre.xml" ne fonctionne pas car Model va agir à la compilation, tu ne peux pas le modifier à l'exécution dont le Binding ne se fait pas.
Le plus simple pour toi, c'est de ne pas utiliser mais une variable Bindable de type XML et d'alimenter ton chart avec ce XML.
Et encore mieux, tu peux parser ton XML, le mettre dans des objets typés dans un ArrayCollection, c'est toi qui voit

Fabien
Aude
5 février 2010

Je craignais cette réponse...
Merci pour ton aide en tout cas!