Diagrammes et graphiques

L'affichage des données dans un diagramme (chart) constitue l'un des points forts de Flex. Le framework Flex propose en effet de créer des graphiques et d'en personnaliser l'apparence de façon simple et rapide.

Les composants Flex permettent de gérer un grand nombre de diagrammes : 

• Diagrammes comparatifs : circulaire (PieChart), nuage de points (PlotChat), barres (BarChart), colonnes (ColumnChart) ;
• Diagrammes d'évolution : ligne (LineChart) et aires (AreaChart) ;
• Diagramme multi-valué : bulles (BubbleChart) ;
• Diagrammes boursiers : highLowOpenClose (HLOCChart) et candleStick (CandleStickChart)

Un diagramme présente graphiquement une ou plusieurs séries de données et se déclare selon le même modèle, quel que soit sont type. Prenons les données suivantes pour nos graphiques à venir :

ce qui se traduit en ActionScript 3 par les lignes suivantes :

[Bindable]
public var model:ArrayCollection = new ArrayCollection();
 
model.addItem({month:"janvier", value:6, secondValue: 40});
model.addItem({month:"février", value:45, secondValue: 15});
model.addItem({month:"mars", value:29, secondValue: 25});
model.addItem({month:"avril", value:35, secondValue: 50});
model.addItem({month:"mai", value:68, secondValue: 40});

Création d'un diagramme

Tous les diagrammes fonctionnent sur le même principe. Pour créer un graphique, les informations minimales nécessaires sont :

• le type de diagramme,
• le fournisseur de données (dataProvider),
• la ou les séries de données à afficher.

Créons un diagramme de type ligne représentant les données de notre exemple :

A la ligne 1, nous indiquons le type de diagramme et le fournisseur de données : nous fournissons ici l'ArrayCollection model. Les champs à utiliser sur les axes x et y sont précisées dans les lignes suivantes, lors de la définition des séries de données à afficher.

La balise (ligne 2) permet ensuite d'indiquer le début de la déclaration des séries de données.

La ligne 3, enfin, déclare une série de type LineSeries. Chaque composant de diagramme possède son propre type de série : nous créons ici un composant de type LineChart, les séries sont donc de type LineSeries. Les paramètres spécifient que les valeurs à prendre en compte pour l'axe vertical (yField) correspondent au champ "value" du dataProvider.

L'exécution donne alors un affichage semblable à celui-ci :

Personnalisation de l'affichage

Des paramètres supplémentaires peuvent être ajoutés pour personnaliser le diagramme en lui-même, ainsi que l'affichage de la zone de données et des axes. L'affichage précédent peut par exemple être transformé en celui-ci :

Le code correspondant à cet affichage est le suivant :

      dataProvider="{model}"
      showDataTips="true" >
 
 
                  dataProvider="{model}"
                  categoryField="month"
                  displayName="Mois" />
 
 
 
 
 

Dans ce nouveau code, une nouvelle propriété est apparue dans la définition du composant LineChart : showDataTips (ligne 3), à laquelle nous avons assigné la valeur "true". Cette propriété permet d'afficher des informations relatives à un point du graphique, lorsqu'il est survolé par la souris.

Nous avons également ajouté, aux lignes 6 à 11, la définition explicite de l'axe horizontal. Cette définition est optionnelle, elle n'était pas présente dans notre premier graphique et possédait donc les valeurs par défaut : un axe linéaire, dont la numérotation commence à 0. 

Différents axes sont disponibles : 

• axes numériques : linéaire (mx:LinearAxis, axe par défaut), logarithmique (mx:LogAxis), ou prévu pour les affichages de date et heure (mx:DateTimeAxis)
• groupement de valeurs : mx:CategoryAxis est utile pour représenter un ensemble de libellés sur un axe.

Enfin, nous affichons deux séries de données : la première, ligne 13, contient les mêmes valeurs (yField) que précédemment, et précise que l'affichage devra se faire en ligne courbe, à l'aide de la propriété form, dont nous verrons les valeurs possibles juste après.

La deuxième, ligne 14, prend les valeurs du champ "secondValue" du dataProvider et les applique à l'axe vertical. Elle indique une autre valeur pour la propriété form, qui permet cette fois d'afficher un graphique en escalier.

L'illustration ci-dessous présente les différentes valeurs possibles pour la propriété form et leur effet visuel :