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

Flex Chart – Le composant HLOCChart (exemples)

Le composant HLOCChart (HLOC = HighLowOpenClose) représentes des données financières en une série de ligne, représentant les valeurs "high", "low", "open" et "close" de votre donnée. Le haut et le bas de la ligne représentent les valeurs "high" et "low" du point de donnée . Le marqueur gauche (tick) représente la valeur "open" et celui qui pointe vers la droite représente la valeur "close".

Voici un schéma qui explique cela:

Contrairement au CandlestickChart, le HLOCChart n'a pas obligatoirement besoin d'avoir une valeur pour le champ "open".

Vous pouvez utiliser les HLOCSeries avec le composant HLOCChart pour définir comment afficher la donnée.Voici les principales propriétés que vous serez amenés à modifier sur une HLOCSeries:

• closeField: Spécifie le champ du dataProvider qui va déterminer la position Y de la valeur "closing" de l'élément. Cette propriété définit la position du marqueur droit sur la ligne verticale.
• highField: Spécifie le champ du dataProvider qui va déterminer la position Y de la valeur "high" de l'élément. Cette propriété définit la position du haut de la ligne verticale.
• lowField: Spécifie le champ du dataProvider qui va déterminer la position Y de la valeur "low" de l'élément. Cette propriété définit la position du bas de la ligne verticale.
• openField (optionnel): Spécifie le champ du dataProvider qui va déterminer la position Y de la valeur "open" de l'élément. Cette propriété définit la position du marqueur gauche sur la ligne verticale.
• xField: Spécifie le champ du dataProvider qui va déterminer la position X de l'élément. Si vous laissez cette propriété à une chaine vide (""), Flex va rendre les batonnets dans l'ordre dans lequel ils apparaissent dans le dataProvider.

Voici un exemple de HLOCChart en MXML simple:

<?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 TICKER:ArrayCollection = new ArrayCollection([
			{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="HighLowOpenClose Chart">
		<mx:HLOCChart id="myChart"
		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>
		<mx:Legend dataProvider="{myChart}"/>
	</mx:Panel>
</mx:Application>

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