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.
Mes projets (Open Source)
Autres
