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

Flex Chart – Modifier la donnée en temps réel, changement de dataProvider

En utilisant de l'ActionScript, vous pouvez changer la data d'un Chart à l'exécution (runtime) de plusieurs manières. Vous pouvez changer le dataProvider d'un Chart ou d'une Series.

L'exemple suivant fait une correspondance (Binding) entre la propriété dataProvider et une variable locale. Un bouton permet ensuite de basculer de dataProvider en utilisant cette variable locale.

<?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 expenses:ArrayCollection = new ArrayCollection([
			{Month:"Jan", Profit:2000, Expenses:1500, Amount:450},
			{Month:"Feb", Profit:1000, Expenses:200, Amount:600},
			{Month:"Mar", Profit:1500, Expenses:500, Amount:300}
		]);
		[Bindable]
		public var expenses2:ArrayCollection = new ArrayCollection([
			{Month:"Jan", Profit:2400, Expenses:1509, Amount:950},
			{Month:"Feb", Profit:3000, Expenses:2200, Amount:400},
			{Month:"Mar", Profit:3500, Expenses:1200, Amount:200}
		]);
		[Bindable]
		public var dp:ArrayCollection = expenses;
		public function changeDataProvider():void {
			if (dp==expenses) {
				dp = expenses2;
			} else {
				dp = expenses;
			}
		}
	]]></mx:Script>

	<mx:Panel title="Line Chart">
		<mx:LineChart id="myChart" dataProvider="{dp}" showDataTips="true">
			<mx:horizontalAxis>
				<mx:CategoryAxis
				dataProvider="{dp}"
				categoryField="Month"
				/>
			</mx:horizontalAxis>
			<mx:series>
				<mx:LineSeries
				yField="Profit"
				displayName="Profit"
				/>
				<mx:LineSeries
				yField="Expenses"
				displayName="Expenses"
				/>
				<mx:LineSeries
				yField="Amount"
				displayName="Amount"
				/>
			</mx:series>
		</mx:LineChart>
		<mx:Legend dataProvider="{myChart}"/>
	</mx:Panel>
	<mx:Button id="b1"
		label="Changer de Data Provider"
		click="changeDataProvider()"
	/>
</mx:Application>

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