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

Flex Chart – Modifier les styles d'un ColumnChart (fill, stroke)

Pour personnaliser le styles de colonnes d'un composant ColumnChart, vous devez spécifier des objets SolidColor et Stroke pour les propriétés fill et stroke, respectivement.

L'exemple suivant définit un objet SolidColor personnalisé et un objet Stroke custom lui aussi, et les applique à l'objet ColumnSeries dans le composant ColumnChart:

<?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},
			{Month:"Feb", Profit:1000, Expenses:200},
			{Month:"Mar", Profit:1500, Expenses:500}
		]);
	]]></mx:Script>

	<!-- Define custom colors for use as column fills. -->
	<mx:SolidColor id="sc1" color="blue" alpha=".3"/>
	<mx:SolidColor id="sc2" color="red" alpha=".3"/>
	<!-- Define custom Strokes for the columns. -->
	<mx:Stroke id="s1" color="blue" weight="2"/>
	<mx:Stroke id="s2" color="red" weight="2"/>

	<mx:Panel title="ColumnChart Control with Custom Column Styles">
		<mx:ColumnChart id="myChart" dataProvider="{expenses}" showDataTips="true">
			<mx:horizontalAxis>
				<mx:CategoryAxis
				dataProvider="{expenses}"
				categoryField="Month"
				/>
			</mx:horizontalAxis>
			<mx:series>
				<mx:ColumnSeries
				xField="Month"
				yField="Profit"
				displayName="Profit"
				fill="{sc1}"
				stroke="{s1}"
				/>
				<mx:ColumnSeries
				xField="Month"
				yField="Expenses"
				displayName="Expenses"
				fill="{sc2}"
				stroke="{s2}"
				/>
			</mx:series>
		</mx:ColumnChart>
		<mx:Legend dataProvider="{myChart}"/>
	</mx:Panel>
</mx:Application>

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