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
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
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
Flex Chart – Comprendre l'utilisation des dataProvider
Les composants de Charting ont une propriété dataProvider qui permet de définir la donnée affichée par ce Chart. Le dataProvider crée un niveau d'abstraction entre les composants Flex et la donnée que vous utilisez. Vous pouvez peupler plusieurs charts avec le même data provider, changer de data provider à l'exécution, ou modifier le data provider pour que ces changements apparaissent dans tous les graphiques utilisant ce data provider.
Pour utiliser la donnée d'un data provider dans un composant Chart, vous faîtes la correspondance entre les propriétés xField et yField des Series du Chart aux champs du data provider. La propriété xField définit la donnée pour l'axe horizontal et la propriété yField définit la data pour l'axe vertical.
Par exemple, assumons que votre data provider ait la structure suivante:
{Month: "Feb", Profit: 1000, Expenses: 200, Amount: 60}
Pour ceux qui ne sont pas à l'aise avec cette notation, c'est un objet contenant 3 propriétés: Month, Profit et Amount et à chacune correspond une valeur: "Feb", 1000, 60.
Vous pouvez utiliser les champs Profit et Expenses et ignorer le champ Month en faisant la correspondance entre un champ et la propriété xField ainsi qu'entre yField et un autre champ, comme dans l'exemple suivant:
<mx:PlotSeries xField="Profit" yField="Expenses"/>
Comme résultat, chaque point de donnée sera l'intersection entre les champs Profit et Expenses du data provider. Voila le résultat de cela:
Flex Source Code Download: Télécharger le code source complet de l'application
Flex Tree – Utiliser une filterFunction en récursif sur des noeuds XML
Lorsque vous utiliser un dataProvider dans un composant Flex d'affichage de data (DataGrid, List, Tree, ...), vous pouvez utiliser plusieurs types de dataProvider (XMLList, ArrayCollection par exemple) qui seront ensuite convertis par derrière par Flex pour qu'il puisse effectuer ses opérations et afficher la data. De base, toute votre donnée sera affichée, ou tout du moins celle qui peut être affichée dans une liste par exemple.
Quand vous aurez beaucoup de data, vous voudrez souvent la filtrer selon un critère. Par exemple, laisser l'utilisateur taper le nom qu'il cherche et n'afficher que la data contenant ce texte. Pour cela, il faut utiliser une filterFunction. Celle-ci va être appelée par Flex automatiquement pour chaque élément pour savoir si la data doit être affichée ou non.
La signature d'une filterFunction est simple, elle prend un item de type Object en argument et renvoie un Boolean (true ou false donc). Flex va donc passer tous les objets du dataProvider dans cette fonction et suivant le Boolean retourné par la fonction, il va l'afficher ou non. Voici la tête d'une filterFunction:
public function myFilterFunction(item:Object):Boolean{
// ...vérifications sur item
return true ou false suivant si on veux afficher ce résultat;
}
Seulement, si vous essayez avec un Tree, vous verrez que cela ne fonctionne pas. Le filtre est seulement appliqué aux nœuds de plus haut niveau de la collection, il n'est pas appliqué de manière récursive sur les nœuds enfants.
Mes projets (Open Source)
Autres
