Diagrammes et graphiques

tutoriel_vers_formation_Flex

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 :

diagrammes

 

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 :

diagrammes_2

 

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 :

diagrammes_3
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

diagrammes_4

 

tutoriel_precedent

tutoriel_suivant

L'ensemble des tutoriels Mistra by Mistra est mis à disposition selon les termes de la licence Creative Commons et Paternité - Partage des Conditions Initiales à l'Identique 3.0 Unported. Les autorisations au-delà du champ de cette licence peuvent être obtenues à http://www.mistra.fr/contact-mistra.html.

Prochaines Formations

Promotions sur nos prochaines formations à -30% et -50%

 

Formation Android développement - 11 au 14 Aout- 1100 euros HT

Formation iPhone iPad Développement avancé - 11 au 14 Aout - 1100 euros HT

Formation Xamarin pour iOS et Android - 11 au 14 Aout - 2000 euros HT

Formation Introduction à la programmation - 17 au 19 Septembre- 1000 euros HT

Formation Python - Paris - 15 au 18 Juillet - 750 euros HT

 

 Tarif Spécial "demandeur d'emploi" : 50 % de réduction sur nos formations !

Contactez nous pour toute inscription ou information

01 82 52 25 25

Toutes nos promotions ...