Test : Formater des graphiques
Configuration requise
Niveau de l'utilisateur
Toutes
<?xml version="1.0" encoding="utf-8"?>
<s:Application ...>
<fx:Style source="TestDrive.css"/>
<fx:Script>
<![CDATA[
(...)
import mx.charts.HitData;
import mx.charts.chartClasses.IAxis;
import mx.charts.events.ChartItemEvent;
import mx.charts.series.items.PieSeriesItem;
protected function deptPieCht_itemClickHandler(event:ChartItemEvent):void
{
currentState="DepartmentDetails";
deptColCht.dataProvider=createDataProvider(event.hitData.item);
expenseAxis.title=event.hitData.item.name+" Expenses";
estSeries.setStyle("fill",(event.hitData.chartItem as PieSeriesItem).fill);
}
protected function axisMoneyFormatter(labelValue:Object, previousValue:Object, axis:IAxis):String{
return moneyFormatter.format(labelValue);
}
protected function formatDeptPieTips(hitData:HitData):String{
return"<b>"+hitData.item.name+"</b><br/>"+"Budget: "
+moneyFormatter.format(hitData.item.budget);
}
]]>
</fx:Script>
<fx:Declarations>
(...)
<mx:SeriesInterpolate id="interpolate" duration="1000"/>
<s:SolidColorStroke id="brownStrokeThick" color="#7F7364" weight="5"/>
<s:SolidColorStroke id="brownStrokeThin" color="#7F7364" weight="1"/>
<mx:CurrencyFormatter id="moneyFormatter" currencySymbol="$" precision="0"/>
</fx:Declarations>
(...)
<mx:PieChart includeIn="DepartmentChart,DepartmentDetails" x="35" y="308" id="deptPieCht" width="282" height="282"
dataProvider="{deptDg.dataProvider}" itemClick="deptPieCht_itemClickHandler(event)"
showDataTips="true" dataTipFunction="formatDeptPieTips">
<mx:series>
<mx:PieSeries field="budget" nameField="name" labelField="name" labelPosition="inside" />
</mx:series>
</mx:PieChart>
<mx:ColumnChart includeIn="DepartmentDetails" x="325" y="308" id="deptColCht" height="278" width="363"
showDataTips="true">
<mx:horizontalAxis>
<mx:CategoryAxis id="expenseAxis" title="Expenses" categoryField="field"/>
</mx:horizontalAxis>
<mx:verticalAxis>
<mx:LinearAxis id="amountAxis" title="Amount" minimum="0" maximum="500000"
labelFunction="axisMoneyFormatter"/>
</mx:verticalAxis>
<mx:verticalAxisRenderers>
<mx:AxisRenderer verticalAxisTitleAlignment="vertical" axis="{amountAxis}"
axisStroke="{brownStrokeThick}" tickStroke="{brownStrokeThin}"/>
</mx:verticalAxisRenderers>
<mx:horizontalAxisRenderers>
<mx:AxisRenderer axis="{expenseAxis}"
axisStroke="{brownStrokeThick}" tickStroke="{brownStrokeThin}"/>
</mx:horizontalAxisRenderers>
<mx:series>
<mx:ColumnSeries id="estSeries" displayName="Estimated" yField="est" showDataEffect="{interpolate}"/>
<mx:ColumnSeries displayName="Actual" yField="actual" showDataEffect="{interpolate}" styleName="brownFill"/>
</mx:series>
</mx:ColumnChart>
<mx:Legend includeIn="DepartmentDetails" dataProvider="{deptColCht}" x="596" y="325"/>
<!--<mx:Legend includeIn="DepartmentChart" dataProvider="{deptPieCht}" x="323" y="308"/>-->
</s:Application>
TestDrive.css
mx|PieSeries
{
fills:#7F7364,#BFB59F,#E5DFC3,#586F99,#6782B2,#ADCAFF,#F8F8F4;
}
.brownFill
{
fill:#403029;
}
mx|ColumnChart
{
axis-title-style-name:brownTitles;
}
.brownTitles
{
font-weight:bold;
color:#403029;
}
Didacticiel
Dans ce didacticiel, vous allez personnaliser les graphiques à secteurs et à colonnes. Pour ce faire, vous allez modifier les couleurs du remplissage, des axes et des graduations, faire pivoter les titres des axes et pour finir, formater les titres et libellés des axes et les astuces sur les données.
Étape 1 : Définissez la couleur de remplissage des graphiques.
Dans le fichier TestDrive.css, créez un sélecteur de type PieSeries en attribuant au style fills une liste d'au moins sept couleurs (#7F7364,#BFB59F,#E5DFC3,#586F99,#6782B2,#ADCAFF,#F8F8F4). Créez ensuite un sélecteur de classe nommé brownFill et affectez une couleur (#403029) à sa propriété fill. Dans TestDrive.mxml, attribuez la valeur brownFill à la propriété styleName du composant ColumnSeries Actual.
Les nouveaux sélecteurs doivent se présenter comme suit :
mx|PieSeries
{
fills:#7F7364,#BFB59F,#E5DFC3,#586F99,#6782B2,#ADCAFF,#F8F8F4;
}
.brownFill
{
fill:#403029;
}
Par ailleurs, le composant ColumnSeries doit se présenter comme suit :
<mx:ColumnSeries displayName="Actual" yField="actual" styleName="brownFill"/>
Exécutez l'application et effectuez un zoom avant sur les données relatives aux services. Les nouvelles couleurs sont visibles dans les graphiques à secteurs et à colonnes (voir Figure 10). Vous allez maintenant affecter à la première série de colonnes la couleur de l'élément sélectionné dans le graphique à secteurs.
Étape 2 : Définissez une couleur de remplissage de colonne de façon dynamique.
Affectez au premier objet ColumnSeries l'ID estSeries et, dans le gestionnaire itemClick deptPieCht, utilisez setStyle() pour attribuer au style fill la couleur de l'élément sélectionné dans le graphique à secteurs : (event.hitData.chartItem as PieSeriesitem).fill.
Le composant ColumnSeries doit se présenter comme suit :
<mx:ColumnSeries id="estSeries" displayName="Estimated" yField="est"
showDataEffect="{interpolate}"/>
Par ailleurs, le gestionnaire doit se présenter comme suit :
protected function deptPieCht_itemClickHandler(event:ChartItemEvent):void
{
currentState="DepartmentDetails";
deptColCht.dataProvider=createDataProvider(event.hitData.item);
expenseAxis.title=event.hitData.item.name+" Expenses";
estSeries.setStyle("fill",(event.hitData.chartItem as PieSeriesItem).fill);
}
Veillez à sélectionner PieSeriesItem dans l'assistant de code afin qu'il écrive l'instruction import appropriée :
import mx.charts.series.items.PieSeriesItem;
Exécutez l’application. Lorsque vous sélectionnez un service dans le graphique à secteurs, la première série du graphique à colonnes est désormais affichée dans la même couleur (voir Figure 11). Observez la position du titre de l'axe vertical. Dans l'étape suivante, vous allez le faire pivoter.
Étape 3 : Faites pivoter le titre d'un axe.
Attribuez l'ID amountAxis au composant LinearAxis et affectez une instance de la classe AxisRenderer à la propriété verticalAxisRenderers du composant ColumnChart. Attribuez la valeur vertical au style verticalAxisTitleAlignment et la valeur amountAxis à la propriété axis de l'objet AxisRenderer.
Le code doit se présenter comme suit :
<mx:verticalAxis>
<mx:LinearAxis id="amountAxis" title="Amount" minimum="0"
maximum="500000"/>
</mx:verticalAxis>
<mx:verticalAxisRenderers>
<mx:AxisRenderer verticalAxisTitleAlignment="vertical"
axis="{amountAxis}"/>
</mx:verticalAxisRenderers>
Exécutez l’application. Le titre de l'axe vertical a pivoté (voir Figure 12).
Étape 4 : Affichez le titre des axes en caractères gras.
Dans le fichier TestDrive.css, créez un sélecteur de type ColumnChart et affectez un sélecteur de classe nommé brownTitles au style axis-title-style-name. Créez ensuite un sélecteur de classe nommé brownTitles et affectez la valeur bold au style font-weight et la couleur marron foncé (#403029) au style color.
Ces sélecteurs doivent se présenter comme suit :
mx|ColumnChart
{
axis-title-style-name:brownTitles;
}
.brownTitles{
font-weight:bold;
color:#403029;
}
Exécutez l’application. Les titres des axes sont désormais affichés en gras et en marron.
Étape 5 : Définissez la couleur des axes et des graduations.
Dans le bloc Declarations, créez un objet SolidColorStroke nommé brownStrokeThick et définissez les styles color (#7F7364) et weight (5). Créez un second objet SolidColorStroke nommé brownStrokeThin et définissez les styles color (#7F7364) et weight (1). Dans la propriété verticalAxisRenderers du composant ColumnChart, attribuez les valeurs axisStroke et tickStroke aux objets brownStrokeThick et brownStrokeThin. Affectez une instance de la classe AxisRenderer à la propriété horizontalAxisRenderers, puis attribuez la valeur expenseAxis à la propriété axis et des styles de trait (stroke) identiques à ceux de l'autre rendu.
Ces déclarations doivent se présenter comme suit :
<s:SolidColorStroke id="brownStrokeThick" color="#7F7364" weight="5"/>
<s:SolidColorStroke id="brownStrokeThin" color="#7F7364" weight="1"/>
Par ailleurs, les rendus des axes doivent se présenter comme suit :
<mx:verticalAxisRenderers>
<mx:AxisRenderer verticalAxisTitleAlignment="vertical"
axis="{amountAxis}" axisStroke="{brownStrokeThick}"
tickStroke="{brownStrokeThin}"/>
</mx:verticalAxisRenderers>
<mx:horizontalAxisRenderers>
<mx:AxisRenderer axis="{expenseAxis}"
axisStroke="{brownStrokeThick}" tickStroke="{brownStrokeThin}"/>
</mx:horizontalAxisRenderers>
Exécutez l’application. Les axes et les graduations doivent à présent être marron (voir Figure 13).
Étape 6 : Affichez les libellés d'un axe sous forme de montants en devise.
Dans le bloc Declarations, créez un objet CurrencyFormatter nommé moneyFormatter et définissez ses propriétés afin qu'il soit formaté conformément à votre devise. Dans la balise LinearAxis, affectez la valeur axisDollarFormatter à la fonction labelFunction. Dans le bloc Script, insérez la fonction de formatage illustrée ci-dessous.
Voici un exemple de montant en devise exprimé en dollars américains, sans décimales :
<mx:CurrencyFormatter id="moneyFormatter" currencySymbol="$" precision="0"/>
La balise LinearAxis doit se présenter comme suit :
<mx:LinearAxis id="amountAxis" title="Amount" minimum="0" maximum="500000" labelFunction="axisMoneyFormatter"/>
Voici la fonction de formatage à insérer dans le bloc Script :
import mx.charts.chartClasses.IAxis;
protected function axisMoneyFormatter(labelValue:Object,
previousValue:Object, axis:IAxis):String{
return moneyFormatter.format(labelValue);
}
Cette fonction est appelée par le composant graphique pour chaque libellé situé sur l'axe vertical. Sa signature de méthode (c'est-à-dire ses arguments et son type de retour) est définie par le composant qui l'utilise. Vous pouvez examiner la signature requise par la méthode dans l'API de la classe LinearAxis.
Exécutez l’application. Les libellés de l'axe vertical sont à présent formatés (voir Figure 14).
Étape 7 : Formatez les astuces sur les données.
Affectez la valeur formatDeptPieTips à la fonction dataTipFunction du composant PieChart. Dans le bloc Script, insérez la fonction de formatage illustrée ci-dessous.
La balise d'ouverture du composant PieChart doit se présenter comme suit :
<mx:PieChart includeIn="DepartmentChart,DepartmentDetails" x="35" y="308"
id="deptPieCht" width="282" height="282"
dataProvider="{deptDg.dataProvider}" showDataTips="true"
itemClick="deptPieCht_itemClickHandler(event)"
dataTipFunction="formatDeptPieTips">
Voici la fonction de formatage à insérer dans le bloc Script :
import mx.charts.HitData;
protected function formatDeptPieTips(hitData:HitData):String{
return ""+hitData.item.name+"
"+"Budget: "
+moneyFormatter.format(hitData.item.budget);
}
Cette fonction est appelée par le composant graphique avant l'affichage de chaque astuce de données. Comme pour la fonction labelFunction définie à l'étape précédente, la signature de méthode de la fonction dataTipFunction est définie par le composant qui l'utilise, c'est-à-dire PieChart, et vous pouvez l'examiner dans l'API de cette classe. Notez que vous pouvez utiliser un formatage HTML de base dans cette fonction.
Exécutez l’application. Les astuces sur les données du graphique à secteurs sont désormais formatées pour afficher des montants en devise (voir Figure 15).
Félicitations ! Dans ce module, vous avez appris à ajouter des graphiques à votre application Flex. Vous avez utilisé un graphique à secteurs et un graphique à colonnes et exécuté toutes les tâches de personnalisation courantes. Vous avez ainsi réalisé une analyse détaillée de données, animé des modifications de données et formaté les remplissages, axes, titres, libellés et astuces sur les données.
Tutorials and samples |
Tutorials
- Flex mobile performance checklist
- Flex and Maven with Flexmojos – Part 3: Journeyman
- Migrating Flex 3 applications to Flex 4.5 – Part 4
Flex user forum |
More |
Flex Cookbook |
More |