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

Flex Chart – Générer des données aléatoires pour remplir un dataProvider

Si vous voulez tester tous les types de chart, il va vous falloir de la donnée à afficher. Pour cela, vous pouvez écrire de la donner en dur ou bien écrire quelques lignes d'ActionScript qui vont vous générer cette donnée en aléatoire.

L'exemple suivant génère de la donnée de test afin qu'elle soit utilisée avec un composant Chart. En l'occurrence, on va remplir le dataProvider d'un PlotChart avec des Object contenant des données aléatoires:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initApp()" viewSourceURL="srcview/index.html">
	<mx:Script><![CDATA[
		import mx.collections.*;
		// Define data provider array for the chart data.
		[Bindable]
		public var dataSet:ArrayCollection;
		// Define the number of elements in the array.
		public var dsLength:Number = 10;
		public function initApp():void {
			// Initialize data provider array.
			dataSet = new ArrayCollection(genData());
		}
		public function genData():Array {
			var result:Array = [];
			for (var i:int=0;i<dsLength;i++) {
				var localVals:Object = {
				valueA:Math.random()*100,
				valueB:Math.random()*100,
				valueX:Math.random()*100,
				valueY:Math.random()*100
				};
				// Push new object onto the data array.
				result.push(localVals);
			}
			return result;
		}
	]]></mx:Script>
	<mx:Panel title="Plot Chart">
		<mx:PlotChart id="myChart" dataProvider="{dataSet}" showDataTips="true">
			<mx:series>
				<mx:PlotSeries
				xField="valueX"
				yField="valueY"
				displayName="Series 1"
				/>
				<mx:PlotSeries
				xField="valueA"
				yField="valueB"
				displayName="Series 2"
				/>
			</mx:series>
		</mx:PlotChart>
		<mx:Legend id="l1" dataProvider="{myChart}"/>
	</mx:Panel>
</mx:Application>

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