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

Flex Chart – Modifier la donnée en temps réel, basculement de Series

Dans le dernier article, je montrais un exemple dans lequel on pouvait ajouter et supprimer des points de data d'un Chart. Vous pouvez aussi changer les champs associés aux Series pour changer la donnée d'un Chart en temps réel (at runtime).

Pour cela, il faut changer la valeur du champ du dataProvider (comme xField et yField) sur l'objet Series. Pour obtenir une référence vers une Series, vous pouvez utiliser son id ou y accéder par le tableau series du Chart si vous connaissez son index.

L'exemple suivant bascule entre deux data series quand l'utilisateur clique sur le bouton:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="initApp();">
	<mx:Script><![CDATA[
		[Bindable]
		public var dataSet:Array;
		public var myStates:Array =
		["Wisconsin","Ohio","Arizona","Penn"];
		public var curSeries:String;

		public function initApp():void {
			var newData:Array = [];
			for(var i:int=0;i<myStates.length;i++) {
				newData[i] = {
					Apples: Math.floor(Math.random()*150),
					Oranges: Math.floor(Math.random()*150),
					myState: myStates[i]
				}
			}
			dataSet = newData;
			curSeries = "apples";
		}

		public function changeData():void {
			var series:Object = myChart.series[0];
			if (curSeries == "apples") {
				curSeries="oranges";
				series.yField = "Oranges";
				series.displayName = "Oranges";
				series.setStyle("fill",0xFF9933);
			} else {
				curSeries="apples";
				series.yField = "Apples";
				series.displayName = "Apples";
				series.setStyle("fill",0xFF0000);
			}
		}
	]]></mx:Script>

	<mx:Panel title="Column Chart">
		<mx:ColumnChart id="myChart"
		dataProvider="{dataSet}"
		showDataTips="true"
		>
			<mx:horizontalAxis>
				<mx:CategoryAxis
				dataProvider="{dataSet}"
				categoryField="myState"
				/>
			</mx:horizontalAxis>
			<mx:series>
				<mx:ColumnSeries
				yField="Apples"
				displayName="Apples"
				>
					<mx:fill>
						<mx:SolidColor color="0xFF0000"/>
					</mx:fill>
				</mx:ColumnSeries>
			</mx:series>
		</mx:ColumnChart>
		<mx:Legend dataProvider="{myChart}"/>
	</mx:Panel>
	<mx:Button id="b1"
		label="Basculer les Series"
		click="changeData()"
	/>
</mx:Application>

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