Flex Charts : Introduction aux composants Flex Charting
Bonjour,
ce tutoriel est une introduction à l’utilisation des charts de Flex. Les composants de Charting sont situés dans le package mx.charts qui est disponible avec la version professionnel de Flex builder. Il est également possible de créer des charts avec la version standard de Flex, mais ils auront un filigramme par-dessus. Ces classes permettent très simplement de créer des graphiques de types suivant :
- Area: AreaChart / AreaSeries
- Bar: BarChart / BarSeries
- Bubbles: BubbleChart / BubbleSeries
- Candlestick: CandlestickChart / CandlestickSeries
- Column: ColumnChart / ColumnSeries
- HighLowOpenClose: HLOCChart / HLOCSeries
- Line: LineChart / LineSeries
- Pie: PieChart / PieSeries
- Plot: PlotChart / PlotSeries
Tous ces types de graphiques, sauf le PieChart sont des sous-classes de la classe CartesianChart. Les CartesianChart sont des graphiques qui représentent des données dans un espace cartésien, c'est-à-dire, une espace rectangulaire à deux dimensions. La classe PieChart est une sous-classe de PolarChart, qui représente la donnée dans une espace polaire.
Avant de débuter, nous allons définir les différents termes qui composent un graphique :
- Chart: Définit le type de graphique, ainsi que le data provider. Cette balise permet également de définir de nombreuses propriétés comme par exemple les toolTips. Cette balise est obligatoire.
- Series: Définit une ou plusieurs séries de données qui seront affichées dans le graphique. Cette balise permet aussi de définir le type de ligne (Stroke), le remplissage (Fill) et les renderers (skins) des séries, ainsi que les stroke et fills utilisées par les légendes. Vous pouvez aussi définir un second ensemble de séries pour chaque graphique, pour afficher de multiples séries sur un seul graphique. Chaque série à son propre dataProvider. Cette balise est obligatoire pour rendre un graphique.
- Axis: Définit le type d'axe (numérique ou catégorie). Permet également de définir les labels des axes, les titres, et les propriétés de style comme le padding. Cette balise permet aussi de définir des axes pour un second ensemble de séries.
- Axis Renderer: Définit le style et le placement des ticks (petites barres indiquant les limites de chaque catégorie), permet d'activer ou de désactiver les labels, la rotation des labels et les espaces entre les labels. Cette balise définit aussi un axis renderer pour un second ensemble de séries. Cette balise est optionnelle.
- Elements: Définit les lignes de la grille et les éléments supplémentaires qui vont apparaître sur le graphique. Cette balise est optionnelle.
Maintenant que nous avons définit les différentes parties qui constituent un graphique, passons à la pratique :
Dans nos exemples nous allons utiliser comme dataprovider les données suivantes :
[Bindable] public var expenses:ArrayCollection = new ArrayCollection([ {Month:"Jan", Profit:3150, Expenses:1700, Amount:650}, {Month:"Feb", Profit:2550, Expenses:350, Amount:900}, {Month:"Mar", Profit:1500, Expenses:700, Amount:300}, {Month:"Apr", Profit:3550, Expenses:550, Amount:840}, {Month:"Mai", Profit:2100, Expenses:620, Amount:330}, {Month:"Jun", Profit:1850, Expenses:430, Amount:740} ]);
Et pour les graphiques financiers:
[Bindable] public var TICKER:Array = [ {date:"1-Aug-05",open:42.57,high:43.08,low:42.08,close:42.75}, {date:"2-Aug-05",open:42.89,high:43.5,low:42.61,close:43.19}, {date:"3-Aug-05",open:43.19,high:43.31,low:42.77,close:43.22}, {date:"4-Aug-05",open:42.89,high:43,low:42.29,close:42.71}, {date:"5-Aug-05",open:42.49,high:43.36,low:42.02,close:42.99}, {date:"8-Aug-05",open:43,high:43.25,low:42.61,close:42.65}, {date:"9-Aug-05",open:42.93,high:43.89,low:42.91,close:43.82}, {date:"10-Aug-05",open:44,high:44.39,low:43.31,close:43.38}, {date:"11-Aug-05",open:43.39,high:44.12,low:43.25,close:44}, {date:"12-Aug-05",open:43.46,high:46.22,low:43.36,close:46.1} ];
Création d’un graphique du type Area
<mx:AreaChart id="myChart" dataProvider="{expenses}" showDataTips="true" > <mx:horizontalAxis> <mx:CategoryAxis dataProvider="{expenses}" categoryField="Month" /> </mx:horizontalAxis> <mx:series> <mx:AreaSeries yField="Profit" displayName="Profit" form="curve" /> <mx:AreaSeries yField="Expenses" displayName="Expenses" /> </mx:series> </mx:AreaChart>
yField spécifie le champ du dataprovider qui détermine l’emplacement de la valeur sur l’axe Y.
xField spécifie le champ du dataprovider qui détermine l’emplacement de la valeur sur l’axe X.
form spécifie la forme sous laquelle les séries seront rendues sur le graphique. Les valeurs suivantes sont applicables :
- Segment.
- step.
- reverseStep.
- vertical.
- horizontal.
- curve.
Création d’un graphique du type Barre
<mx:BarChart id="myBarChart" dataProvider="{expenses}" showDataTips="true" > <mx:horizontalAxis> <mx:CategoryAxis dataProvider="{expenses}" categoryField="Month" /> </mx:horizontalAxis> <mx:series> <mx:BarSeries yField="Profit" displayName="Profit" form="curve" /> <mx:BarSeries yField="Expenses" displayName="Expenses" /> </mx:series> </mx:BarChart>
yField spécifie le champ du dataprovider qui détermine l’emplacement de la valeur sur l’axe Y.
xField spécifie le champ du dataprovider qui détermine l’emplacement de la valeur sur l’axe X.
Création d’un graphique du type Bubbles
<mx:BubbleChart id="myBubbleChart" minRadius="1" maxRadius="50" dataProvider="{expenses}" showDataTips="true" > <mx:series> <mx:BubbleSeries xField="Profit" yField="Expenses" radiusField="Amount" displayName="Profit" /> </mx:series> </mx:BubbleChart> <mx:Legend dataProvider="{myChart}"/>
yField spécifie le champ du dataprovider qui détermine l’emplacement de la valeur sur l’axe Y.
xField spécifie le champ du dataprovider qui détermine l’emplacement de la valeur sur l’axe X.
radiusField spécifie le champ du dataprovider qui détermine le rayon de chaque symbole relative au autres point du graphique.
Création d’un graphique du type Candlestick
<mx:CandlestickChart id="myCSchart" dataProvider="{TICKER}" showDataTips="true" height="400" width="400" > <mx:series> <mx:CandlestickSeries dataProvider="{TICKER}" openField="open" highField="high" lowField="low" closeField="close" displayName="TICKER" /> </mx:series> </mx:CandlestickChart>
closeField spécifie le champ du dataprovider qui determine la position sur l’axe Y de la valeur de fermeture de l’élément.
highField spécifie le champ du dataprovider qui détermine la position sur l’axe Y de la plus grande valeur de l’élément.
lowField spécifie le champ du dataprovider qui détermine la position sur l’axe Y de la plus petite valeur de l’élément.
openField spécifie le champ du dataprovider qui détermine la position sur l’axe Y de la valeur d’ouverture de l’élément.
xField spécifie le champ du dataprovider qui détermine la position sur l’axe X de l’élément.
Création d’un graphique du type Colonne
<mx:ColumnChart id="myColumnChart" dataProvider="{expenses}" showDataTips="true" > <mx:horizontalAxis> <mx:CategoryAxis dataProvider="{expenses}" categoryField="Month" /> </mx:horizontalAxis> <mx:series> <mx:ColumnSeries yField="Profit" displayName="Profit" /> <mx:ColumnSeries yField="Expenses" displayName="Expenses" /> </mx:series> </mx:ColumnChart>
yField spécifie le champ du dataprovider qui détermine l’emplacement de la valeur sur l’axe Y.
xField spécifie le champ du dataprovider qui détermine l’emplacement de la valeur sur l’axe X.
Création d’un graphique du type HighLowOpenClose
<mx:HLOCChart id="myHLOCChart" dataProvider="{TICKER}" showDataTips="true" > <mx:verticalAxis> <mx:LinearAxis minimum="30" maximum="50"/> </mx:verticalAxis> <mx:series> <mx:HLOCSeries dataProvider="{TICKER}" openField="open" highField="high" lowField="low" closeField="close" displayName="TICKER" > </mx:HLOCSeries> </mx:series> </mx:HLOCChart>
closeField spécifie le champ du dataprovider qui détermine la position sur l’axe Y de la valeur de fermeture de l’élément.
highField spécifie le champ du dataprovider qui détermine la position sur l’axe Y de la plus grande valeur de l’élément.
lowField spécifie le champ du dataprovider qui détermine la position sur l’axe Y de la plus petite valeur de l’élément.
openField spécifie le champ du dataprovider qui détermine la position sur l’axe Y de la valeur d’ouverture de l’élément.
xField spécifie le champ du dataprovider qui détermine la position sur l’axe X de l’élément.
Création d’un graphique du type Line
<mx:LineChart id="myLineChart" dataProvider="{expenses}" showDataTips="true" > <mx:horizontalAxis> <mx:CategoryAxis dataProvider="{expenses}" categoryField="Month" /> </mx:horizontalAxis> <mx:series> <mx:LineSeries yField="Profit" displayName="Profit" /> <mx:LineSeries yField="Expenses" displayName="Expenses" /> </mx:series> </mx:LineChart>
yField spécifie le champ du dataprovider qui détermine l’emplacement de la valeur sur l’axe Y.
xField spécifie le champ du dataprovider qui détermine l’emplacement de la valeur sur l’axe X.
form spécifie la forme sous laquelle les séries seront rendues sur le graphique. Les valeurs suivantes
- Segment.
- step.
- reverseStep.
- vertical.
- horizontal.
- curve.
Création d’un graphique du type Pie
<mx:PieChart id="myPieChart" dataProvider="{expenses}" showDataTips="true" > <mx:series> <mx:PieSeries field="Amount" nameField="Expense" labelPosition="callout" /> </mx:series> </mx:PieChart>
field spécifie le champ du dataprovider qui détermine les données pour chaque aréa du pie chart.
labelPosition spécifie comment render les labels.
nameField spécifie le champ du dataprovider à utiliser comme nom pour les tooltips et les légendes
Création d’un graphique du type Plot
<mx:PlotChart id="myPlotChart" dataProvider="{expenses}" showDataTips="true" > <mx:series> <mx:PlotSeries xField="Expenses" yField="Profit" displayName="Plot 1" /> <mx:PlotSeries xField="Amount" yField="Expenses" displayName="Plot 2" /> <mx:PlotSeries xField="Profit" yField="Amount" displayName="Plot 3" /> </mx:series> </mx:PlotChart>
yField spécifie le champ du dataprovider qui détermine l’emplacement de la valeur sur l’axe Y.
xField spécifie le champ du dataprovider qui détermine l’emplacement de la valeur sur l’axe X.
radiusField spécifie le champ du dataprovider qui détermine le rayon de chaque symbole relative au autres point du graphique.
vous trouverez ici le projet pour ce tutoriel.
