Flex Chart – Créer un LineChart à lignes verticales
Dans les tutoriaux sur les tutoriaux LineChart Flex précédents, on utilisait les options par défaut du LineChart Flex. Par défaut, un LineChart montre une progression horizontale.
Mais on peut aussi créer un composant LineChart Flex qui montre une progression verticale. Pour afficher les lignes d'un LineChart verticalement, vous devez:
- Donner explicitement les propriétés xField et yField des objets LineSeries
- Fixer la propriété sortOnXField des LineSeries à false
Par défaut, les points de données d'une Series sont rangés de gauche à droite (sur l'axe X) avant d'être rendus. La ligne est donc horizontale. Quand vous désactiver le tri (sort) sur le xField et spécifiez une propriété yField, Flex va dessiner verticalement plutôt horizontalement.
Flex ne fait pas de tri quand la donnée est verticale. Vous devez donc être sur que votre data est arrangée correctement dans votre dataProvider. Si votre data n'est pas arrangée correctement, Flex va faire une ligne en zig-zag pour connecter tous les points selon leur position dans le dataProvider.
L'exemple suivant montre deux LineSeries dans un composant LineChart, affichées verticalement plutôt qu'horizontalement.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script><![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
public var expenses:ArrayCollection = new ArrayCollection([
{Month:"Jan", Profit:2000, Expenses:1100},
{Month:"Feb", Profit:1800, Expenses:1055},
{Month:"Mar", Profit:1200, Expenses:800},
{Month:"Apr", Profit:1400, Expenses:900},
{Month:"May", Profit:1400, Expenses:1150},
{Month:"Jun", Profit:1340, Expenses:600},
{Month:"Jul", Profit:1600, Expenses:950},
{Month:"Aug", Profit:1500, Expenses:1140},
{Month:"Sep", Profit:1800, Expenses:1200},
{Month:"Oct", Profit:2000, Expenses:1280},
{Month:"Nov", Profit:2400, Expenses:1300},
{Month:"Dec", Profit:1500, Expenses:500}
]);
]]></mx:Script>
<mx:Panel title="Vertical Line Chart">
<mx:LineChart id="myChart"
dataProvider="{expenses}"
showDataTips="true"
>
<mx:verticalAxis>
<mx:CategoryAxis
dataProvider="{expenses}"
categoryField="Month"
/>
</mx:verticalAxis>
<mx:series>
<mx:LineSeries
xField="Profit"
yField="Month"
displayName="Profit"
sortOnXField="false"
/>
<mx:LineSeries
xField="Expenses"
yField="Month"
displayName="Expenses"
sortOnXField="false"
/>
</mx:series>
</mx:LineChart>
<mx:Legend dataProvider="{myChart}"/>
</mx:Panel>
</mx:Application>
Flex Source Code Download: Télécharger le code source complet de l'application
Flex Chart – Appliquer un renderer (skin) à un LineChart avec lineSegmentRenderer
Dans l'exemple précédent, je montrais comment créer un LineChart Flex et comment modifier les styles du LineChart, notamment supprimer l'ombre portée par défaut. Vous pouvez aussi spécifier un programmatic renderer (skin) pour chaque LineSeries en fixant la propriété lineSegmentRenderer de chaque LineSeries. Le renderer par défaut est LineRenderer, mais Flex applique aussi une ombre portée (shadow filter) sur chaque Series. Vous pouvez supprimez cette ombre portée, mais imaginons que vous vouliez garder une ombre portée sur l'une des series. Il vous suffira d'utiliser la classe ShadowLineRenderer comme dans cet exemple:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">
<mx:Script><![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
public var expenses:ArrayCollection = new ArrayCollection([
{Month:"Jan", Profit:2000, Expenses:1500, Amount:450},
{Month:"Feb", Profit:1000, Expenses:200, Amount:600},
{Month:"Mar", Profit:1500, Expenses:500, Amount:300}
]);
]]></mx:Script>
<mx:Panel title="Line Chart with One Shadow">
<mx:LineChart id="myChart" dataProvider="{expenses}" showDataTips="true">
<mx:seriesFilters>
<mx:Array/>
</mx:seriesFilters>
<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:LineSeries
yField="Amount"
displayName="Amount"
lineSegmentRenderer=
"mx.charts.renderers.ShadowLineRenderer"
/>
</mx:series>
</mx:LineChart>
<mx:Legend dataProvider="{myChart}"/>
</mx:Panel>
</mx:Application>
Flex Source Code Download: Télécharger le code source complet de l'application
Flex Chart – Modifier les styles d'un LineChart en MXML et ActionScript
Dans l'article précédent, je présentais le composant Flex LineChart et ses différentes représentations. Comme pour les autres composants Charting de Flex, vous pouvez modifier de nombreux styles, notamment le style d'affichage de la ligne en question.
Vous pouvez changer la largeur et la couleur de la ligne pour chaque Series en utilisant le tag <mx:lineStroke>. La ligne par défaut fait 3 pixels de large et a une ombre. L'exemple suivant fixe une autre couleur et une autre largeur pour l'objet Stroke de la series:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">
<mx:Script><![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
public var expenses:ArrayCollection = new ArrayCollection([
{Month:"Jan", Profit:2000, Expenses:1500, Amount:450},
{Month:"Feb", Profit:1000, Expenses:200, Amount:600},
{Month:"Mar", Profit:1500, Expenses:500, Amount:300}
]);
]]></mx:Script>
<mx:Panel title="Line Chart With Strokes">
<mx:LineChart id="myChart"
dataProvider="{expenses}"
showDataTips="true"
>
<mx:horizontalAxis>
<mx:CategoryAxis
dataProvider="{expenses}"
categoryField="Month"
/>
</mx:horizontalAxis>
<mx:series>
<mx:LineSeries
yField="Profit"
displayName="Profit"
>
<mx:lineStroke>
<mx:Stroke
color="0x0099FF"
weight="20"
alpha=".2"
/>
</mx:lineStroke>
</mx:LineSeries>
<mx:LineSeries
yField="Expenses"
displayName="Expenses"
>
<mx:lineStroke>
<mx:Stroke
color="0x0044EB"
weight="20"
alpha=".8"
/>
</mx:lineStroke>
</mx:LineSeries>
</mx:series>
</mx:LineChart>
<mx:Legend dataProvider="{myChart}"/>
</mx:Panel>
</mx:Application>
Flex Source Code Download: Télécharger le code source complet de l'application
Vous pouvez aussi modifier les lignes d'un LineChart en ActionScript. Pour cela, il faut définir un nouvel objet Stroke, et l'appliquer à la LineSeries en fixant la propriété "lineStroke" avec la méthode setStyle().
Flex Chart – Le composant LineChart (exemples)
Un composant LineChart permet de représenter une série de point, en coordonnées cartésiennes, connectés par une ligne continue. Vous pouvez utiliser une icône ou un symbole pour représenter chaque point de donnée le long de la ligne ou afficher une ligne sans icônes.
Vous pouvez utiliser des LineSeries avec un LineChart pour définir la donnée à afficher pour le graphique. Voici les propriétés de LineSeries que vous serez amenés à modifier:
- yField: Spécifie le champ du dataProvider qui détermine la position sur l'axe Y de chaque point. C'est aussi la hauteur de la ligne à cet endroit.
- xField: Spécifie le champ du dataProvider qui déterminé la position sur l'axe X. Si vous ne précisez pas ce champ, Flex prendra les valeurs dans l'ordre dans lequel elle arrivent.
- interpolateValues: Spécifie la manière par laquelle Flex doit représenter les valeurs manquantes. Si vous mettez cette valeur à false, le graphique aura une ligne brisée à cette endroit. Si elle est à true, Flex va tracer une ligne continue en interpolant la valeur de ce point selon les points adjacents. La valeur par défaut est false.
- form: Spécifie la manière par laquelle la series de donnée est affichée dans le graphique. Les valeurs valides sont les suivantes:
- segment: Les lignes sont connectées en segment, valeur par défaut
- step: Dessine les lignes comme des segments horizontaux et verticaux (palliers)
- reverseStep: Comme le step, sauf que l'orde de dessin est inversé
- vertical: Dessine la ligne verticale depuis le point de coordonnées Y du premier point jusqu'à la coordonée Y du second point (voir schéma)
- horizontal: voir schéma
- curve: Dessine une courbe entre les points
Voici un schéma récapitulatif des différentes formes:
Voici un exemple Flex pour créer un composant LineChart en MXML:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">
<mx:Script><![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
public var expenses:ArrayCollection = new ArrayCollection([
{Month:"Jan", Profit:2000, Expenses:1500, Amount:450},
{Month:"Feb", Profit:1000, Expenses:200, Amount:600},
{Month:"Mar", Profit:1500, Expenses:500, Amount:300}
]);
]]></mx:Script>
<mx:Panel title="Line Chart">
<mx:LineChart id="myChart"
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>
<mx:Legend dataProvider="{myChart}"/>
</mx:Panel>
</mx:Application>
Flex Source Code Download: Télécharger le code source complet de l'application
Mes projets (Open Source)
Autres
