Test : Ajouter un graphique à secteurs
Configuration requise
Niveau de l'utilisateur
Toutes
- Télécharger l'exemple d'application (ZIP, 159 Ko)
Code
<?xml version="1.0" encoding="utf-8"?>
<s:Application ...>
<fx:Script>
<![CDATA[
(...)
protected function chartBtn_clickHandler(event:MouseEvent):void
{
currentState="DepartmentChart";
}
]]>
</fx:Script>
<s:states>
(...)
<s:State name="DepartmentChart"/>
</s:states>
(...)
<s:Buttonid="empBtn" click.DepartmentChart="empBtn_clickHandler(event)" .../>
<s:Button id="deptBtn" enabled.DepartmentChart="false" .../>
<mx:DataGrid id="deptDg" includeIn="DepartmentChart,Departments" .../>
<s:Button id="chartBtn" includeIn="DepartmentChart,Departments" enabled.DepartmentChart="false"
click="chartBtn_clickHandler(event)".../>
<s:Button id="biggerBtn" includeIn="DepartmentChart,Departments" .../>
<mx:PieChart includeIn="DepartmentChart" x="35" y="308" id="deptPieCht" width="282" height="282"
dataProvider="{deptDg.dataProvider}" showDataTips="true">
<mx:series>
<mx:PieSeries field="budget" nameField="name" labelField="name" labelPosition="inside"/>
</mx:series>
</mx:PieChart>
<!--<mx:Legend includeIn="DepartmentChart" dataProvider="{deptPieCht}" x="323" y="308"/>-->
</s:Application>
Didacticiel
Dans les cinq modules précédents, vous avez appris à créer, déboguer, déployer, mettre en forme et habiller une application Flex. Dans ce dernier module, vous allez ajouter et formater des graphiques.
Étape 1 : Créez un état DepartmentChart avec un graphique à secteurs.
Créez cet état à partir de l'état Departments. Désactivez le bouton Chart data et ajoutez un composant PieChart nommé deptPieCht à partir de la vue Composants (voir Figure 1). Disposez-le comme dans la Figure 2.
Étape 2 : Définissez les données du graphique.
En mode Source, affectez à la propriété dataProvider du composant PieChart la valeur correspondante du DataGrid : deptDg.dataProvider. Attribuez la valeur budget à la propriété field et la valeur name à la propriété nameField du composant PieSeries. Supprimez la propriété displayName.
field est la propriété des objets du dataProvider à représenter sous forme de graphique. Par ailleurs, nameField est la propriété des objets du dataProvider à afficher dans la légende.
Le code doit se présenter comme suit :
<mx:PieChart includeIn="DepartmentChart" x="35" y="308" id="deptPieCht"
width="282" height="282" dataProvider="{deptDg.dataProvider}">
<mx:series>
<mx:PieSeries field="budget" nameField="name"/>
</mx:series>
</mx:PieChart>
<mx:Legend includeIn="DepartmentChart" dataProvider="{deptPieCht}" x="323" y="308"/>
Étape 3 : Passez d'un état à l'autre après avoir cliqué sur le bouton Chart data.
Affectez l'id chartBtn au bouton Chart data et générez un gestionnaire click pour ce bouton. Désignez le gestionnaire obtenu comme gestionnaire click de tous les états. Dans le gestionnaire, affectez la valeur DepartmentChart à la propriété currentState.
Supprimez l'état associé à l'événement click en mode Source ou en mode Création, cliquez sur le bouton avec le bouton droit de la souris et sélectionnez Appliquer les propriétés en cours à tous les états. Le bouton doit se présenter comme suit :
<s:Button id="chartBtn"
includeIn="DepartmentChart,DepartmentDetails,Departments" x="591" y="293"
label="Chart data" skinClass="ChartButtonSkin"
enabled.DepartmentChart="false" enabled.DepartmentDetails="false"
click="chartBtn_clickHandler(event)" />
Par ailleurs, le gestionnaire doit se présenter comme suit :
protected function chartBtn_clickHandler(event:MouseEvent):void
{
currentState="DepartmentChart";
}
Exécutez l'application et cliquez sur le bouton Chart data. Les données budgétaires apparaissent dans le graphique à secteurs. Déplacez le pointeur de la souris sur le graphique : il ne se passe rien.
Étape 4 : Affichez des libellés et des astuces sur les données dans le graphique.
Affectez la valeur true à la propriété showDataTips du composant PieChart. Attribuez la valeur name à la propriété labelField et la valeur inside au style labelPosition du composant PieSeries.
labelField est la propriété des objets du dataProvider à afficher dans le composant PieChart. Vous devez attribuer la valeur inside, outside, callout ou insideWithCallout au style labelPosition pour indiquer l'endroit où les libellés doivent apparaître. La valeur par défaut est none.
Le code doit se présenter comme suit :
<mx:PieChart includeIn="DepartmentChart" x="35" y="308" id="deptPieCht"
width="282" height="282"dataProvider="{deptDg.dataProvider}"
showDataTips="true">
<mx:series>
<mx:PieSeries field="budget" nameField="name" labelField="name"
labelPosition="inside"/>
</mx:series>
</mx:PieChart>
Exécutez l’application. Le graphique comporte à présent des libellés et lorsque vous déplacez le pointeur de la souris sur un secteur, une astuce sur les données apparaît (voir Figure 4).
Étape 5 : Supprimez la légende.
Supprimez le composant Legend en mode Création ou la balise Legend en mode Source.
La légende est en effet devenue inutile, puisque vous avez ajouté des libellés.
Dans ce didacticiel, vous avez affiché des données dans un graphique à secteurs. Dans le didacticiel suivant, vous allez effectuer un zoom avant sur un élément du graphique à secteurs, puis afficher les détails dans un graphique à colonnes d'un simple clic.
Pour en savoir plus
Pour en savoir plus sur cette rubrique, consultez les ressources suivantes :