Apache Adobe Flex TutorialTutoriaux Adobe Flex & AIR en Français

Flex Chart – Utilisation des fills, des stroke et des fillFunction dans les Charts

Tutorial écrit par Serge Boujo

Agir sur le choix des couleurs dans les Charts

J’ai eu à agrémenter des résultats de graphiques, pour lesquels je souhaitais utiliser des couleurs autres que celles proposées en standard par Flex.
Du fait d’une lecture incomplète de la documentation, j’ai utilisé une FillFunction sans chercher plus loin : j’arrivais à fixer les couleurs pour le graphe, mais non pour la légende.

Flex Source Code Download: Télécharger le code source complet de l'application

La démarche à proscrire

J’ai utilisé une fillFunction pour afficher mes secteurs en rouge et en vert.
Lors de la déclaration de la Legend, ayant spécifié mon Chart en tant que dataProvider, j’étais persuadé que les couleurs affichées dans la Legend suivraient.

La lecture du code de la fonction confirme l’inadéquation de la solution : on remarque que le paramètre item n’est pas utilisé, mais surtout que le résultat renvoyé dépend uniquement du rang de la valeur au sein de la série, trahissant l’esprit d’une fillFunction.

Un petit rappel de la doc:

The signature of the fillFunction is as follows:

function_name(element:ChartItem, index:Number):IFill { ... }

The following table describes the arguments:

• element: The chart item for which the fill is created; type ChartItem.
• index: The index of the chart item in the series's data provider; type Number.

L’exemple de fillFunction ci-dessus fixe en même temps teinte et alpha de la SolidColor, mais il est tout à fait possible de n’intervenir que sur l’un des deux. Le code deviendrait alors, si l’on ne voulait jouer que sur l’opacité.

private function myFillFunc(item:PieSeriesItem, index:Number) : IFill {
  var coul: SolidColor   = new SolidColor(0xDDDDDD);
  if (index == 0){
    coul.alpha = 1.0
  }else {
    coul.alpha = 0.4;
  }
  return coul;
}

Utilisation correcte des fills, des stroke et des fillFunctions dans les Charts

Les erreurs que j’ai commises et décrites dans mon précédent tuto m’ont incité à creuser la question ; une relecture soigneuse et approfondie de la documentation de Flex m’a permis d’y voir un peu plus clair.

La démarche correcte consiste en l’abandon de cette fillFunction et en l’utilisation de fills.

Pour ceux qui veulent approfondir, on peut également fixer des stroke différents pour le tour et pour les séparations des pies.

Voici ce qui en résulte :

• Si l’on veut agir sur les couleurs du graphique et sur celles de la légende, il faut, selon ce que l’on veut faire, s’interroger sur la pertinence du recours à une FillFunction plutôt qu’à l’utilisation de fills et de stroke pour les series.
• En effet, le recours à une function, s’il est, au premier abord, séduisant pour le débutant que je suis, ne se justifie que si l’on veut intervenir sur les couleurs au sein d’une série, voire au sein de plusieurs séries, en fonction de caractéristiques autres que la simple appartenance à la série.
• Dans ce cas où l’on utilise une function, il faudra expliciter la déclaration de la légende. Le fait que la légende partage le dataProvider du graphique ne suffira pas à ce que les couleurs de la légende "suivent" celles du graphique , on devra la ‘construire à la main’.

En d’autres termes, on doit se poser la question suivante : "pour quelles raisons ne veut-on pas utiliser les couleurs proposées en standard ?"

Si la réponse se rapproche de l’une des suivantes :

• parce qu’on préfère les siennes,
• parce qu’on a normalisé les couleurs en fonction de leur signification (par exemple, ce que l’on considère comme anormal sera toujours rouge, préoccupant, toujours orange et correct toujours vert),
• parce qu’on désire s’affranchir du fait que les couleurs sont distribuées en fonction du rang de la serie.

Si, de plus, l’une des assertions suivantes au moins est vérifiée :

• la couleur, au sein d’une série, n’est jamais affectée par la valeur du field du dataProvider, pour la série considérée,
• la couleur d’une valeur au sein d’une serie ne dépend jamais de valeurs d’autres series du même Chart.

Alors on n’utilisera pas de FillFunction, mais on aura recours à des fills et des stroke.

Si, par contre, les couleurs dépendent de tests effectués au sein des valeurs d’une série ou à cheval sur plusieurs séries, alors le recours à une fillFunction sera indispensable.

Les deux tabNavigators suivant recensent des exemples issus de la documentation de Flex, rapportés tels quels ou légèrement modifiés.

A ce sujet, si vous recopiez de la documentation les exemples traitant des ventes de Reiner, Alan, Wolfgang etc… vous constaterez que le dataProvider bégaie, ce qui provoque un ‘trou’ dans l’affichage.

Le premier tabNavigator regroupe  des cas d’utilisation de fills et de stroke, le deuxième présente trois exemples d’utilisation pertinente de fillFunction

Flex Source Code Download: Télécharger le code source complet de l'application