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

Flex Chart – Modifier les styles d'une CandlestickChart (fill, declineFill)

Vous pouvez changer la couleur de remplissage d'une Candlestick avec les propriétés fill et declineFill de la série CandlestickSeries. La propriété fill définit la couleur d'un Candlestick quand la valeur de closeField est plus grande que celle de openField. Quand c'est l'inverse, c'est la propriété declineFill qui gère l'affichage. Vous pouvez aussi définir les propriétés de styles des lignes high/low et des bordures des Candlestick ("chandelles") en utilisant un objet Stroke, comme dans l'exemple suivant:

<?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="Candlestick Chart">
		<mx:CandlestickChart id="mychart"
		dataProvider="{TICKER}"
		showDataTips="true"
		height="400"
		width="400"
		>
			<mx:verticalAxis>
				<mx:LinearAxis title="linear axis" minimum="40" maximum=
				"50"/>
			</mx:verticalAxis>
			<mx:series>
				<mx:CandlestickSeries
				dataProvider="{TICKER}"
				openField="open"
				highField="high"
				lowField="low"
				closeField="close"
				displayName="TICKER"
				>
					<mx:fill>
						<mx:SolidColor color="green"/>
					</mx:fill>
					<mx:declineFill>
						<mx:SolidColor color="red"/>
					</mx:declineFill>
					<mx:stroke>
						<mx:Stroke weight="1" color="black"/>
					</mx:stroke>
				</mx:CandlestickSeries>
			</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