Apache Adobe Flex TutorialTutoriaux Adobe Flex & AIR en Français

Flex Chart – Le composant CandlestickChart (exemples)

Le composant CandlestickChart représente des données de type financières, comme séries de Candlestick ("chandelle" en français ou "boîte à moustache"), représentant les valeurs "high", "low", "open" et "close" de la data. Le haut et le bas de la ligne verticale représentent les valeurs "high" et "low" de la donnée alors que le haut et le bas de la boîte représentent les valeurs "opening" et "closing". Chaque CandleStick est rempli differement suivant si la valeur "close" du point de donnée est plus haute ou plus basse que la valeur "open".

Ce composant ne va pas servir à tout le monde, c'est sûr, mais il peut être intéressant pour visualiser certains aspects financiers (des valeurs de cours financiers j'imagine).

Le composant CandlestickChart contient des CandlestickSeries, qui doivent obligatoirement avoir 4 points: "high", "low", "open" et "close". Si vous ne voulez pas utiliser de propriété "open", vous pouvez utiliser le composant HighLowOpenCloseChart (HLOCChart).

Vous pouvez utiliser des CandlestickSeries avec le CandlestickChart pour définir votre donnée.

Voici les propriétés principales d'une CandlestickSeries:

• closeField: Spécifie le champ du dataProvider qui va déterminer l'emplacement sur l'axe Y de la valeur "close" d'un élément. Cette propriété définit le haut ou le bas de la "chandelle"
• highField: Spécifie le champ du dataProvider qui va déterminer l'emplacement sur l'axe Y de la valeur "high" d'un élément. Cette propriété définit le haut de la ligne dans la "chandelle"
• lowField: Spécifie le champ du dataProvider qui va déterminer l'emplacement sur l'axe Y de la valeur "close" d'un élément. Cette propriété définit le bas de la ligne dans la "chandelle"
• openField: Spécifie le champ du dataProvider qui va déterminer l'emplacement sur l'axe Y de la valeur "open" d'un élément. Cette propriété définit le haut ou le bas de la "chandelle"
• xField: Spécifie le champ du dataProvider qui va déterminer l'emplacement sur l'axe X d'un élément. Si cette propriété est laissée à chaine vide (""), Flex va faire le rendu des colonnes dans lequel elles apparaissent dans le dataProvider(valeur par défaut)

Si le "closeField" est plus bas que l'"openField", Flex va appliquer un remplissage à la "chandelle". La couleur de ce remplissage est par défaut le couleur du contour de la boîte. Elle est définie pas la propriété de style "declineFill". Si le "closeField" est plus haut que l'"openField", Flex fait un remplissage avec du blanc par défaut.

L'image suivante indique les propriétés qui définissent l'apparence de la Candlestick. Comme vous le voyez, la position de la propriété closeField peut être soit en haut, soit en bas de la "chandelle", suivant la valeur relative de l'"openField".

L'exemple suivant crée un composant CandlestickChart en MXML:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Script><![CDATA[
		[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}
		];
	]]></mx:Script>

	<mx:Panel title="Candlestick Chart">
		<mx:CandlestickChart id="mychart"
		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>
		<mx:Legend dataProvider="{mychart}"/>
	</mx:Panel>
</mx:Application>

Flex Source Code Download: Télécharger le code source complet de l'application