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

Flex Chart – Ajouter des Series à la volée en ActionScript

Dans l'exemple précédent sur les Charts Flex, on a crée un Chart en remplaçant les series existantes.
Dans cet exemple, on va créer 2 ColumnSeries et leur assigner un data provider. On va ensuite créer un Array qui va contenir les Series existantes, et rajouter (push) de nouvelles séries à cet Array.
Enfin, on va assigner la propriété "series" du Chart à ce nouvel Array de Series:

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Script><![CDATA[

		import mx.collections.ArrayCollection;
		import mx.charts.series.ColumnSeries;

		[Bindable]
		private var profit04:ArrayCollection = new ArrayCollection([
			{Month: "Jan", Profit: 2000},
			{Month: "Feb", Profit: 1000},
			{Month: "Mar", Profit: 1500}
		]);

		[Bindable]
		private var profit05:ArrayCollection = new ArrayCollection([
			{Month: "Jan", Profit: 2200},
			{Month: "Feb", Profit: 1200},
			{Month: "Mar", Profit: 1700}
		]);

		[Bindable]
		private var profit06:ArrayCollection = new ArrayCollection([
			{Month: "Jan", Profit: 2400},
			{Month: "Feb", Profit: 1400},
			{Month: "Mar", Profit: 1900}
		]);

		private var series1:ColumnSeries;
		private var series2:ColumnSeries;

		private function addMoreSeries():void {
			if (!series1 || !series2) {
				series1 = new ColumnSeries();
				series1.dataProvider = profit05;
				series1.yField = "Profit";
				series1.xField = "Month";
				series1.displayName = "2005";
				series2 = new ColumnSeries();
				series2.dataProvider = profit06;
				series2.yField = "Profit";
				series2.xField = "Month";
				series2.displayName = "2006";
				var currentSeries:Array = myChart.series;
				currentSeries.push(series1);
				currentSeries.push(series2);
				myChart.series = currentSeries;
			}
		}
		private function resetApp():void {
			myChart.series = [ series0 ];
			series1 = null;
			series2 = null;
		}
	]]></mx:Script>
	<mx:Panel title="Column Chart">
		<mx:ColumnChart id="myChart" dataProvider="{profit04}" showDataTips="true">
			<mx:horizontalAxis>
				<mx:CategoryAxis categoryField="Month"/>
			</mx:horizontalAxis>
			<mx:series>
				<mx:ColumnSeries dataProvider="{profit04}"
				id="series0"
				yField="Profit"
				xField="Month"
				displayName="2004"
				/>
			</mx:series>
		</mx:ColumnChart>
		<mx:Legend dataProvider="{myChart}"/>
	</mx:Panel>
	<mx:HBox>
		<mx:Button id="b1" label="Ajouter de nouvelles Series" click="addMoreSeries()"/>
		<mx:Button id="b2" label="RAZ" click="resetApp()"/>
	</mx:HBox>
</mx:Application>

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