Adobe Flex Tutorial - Adobe Flex Tutorial

25fév/093

Flex Chart – Créer des Charts en ActionScript

Vous pouvez créer, détruire et manipuler les charts Flex en utilisant de l'ActionScript, comme vous le feriez pour tout autre composant Flex.
Quand on travaille avec des blocs Script ou dans des fichiers classe séparés, il vous faudra être bien sûr d'importer les classes appropriées. Voici les imports définis dans la plupart des cas, à vous bien sûr de les adapter pour seulement importer les classes dont vous avez besoin.

import mx.collections.*;
import mx.charts.*;
import mx.charts.series.*;
import mx.charts.renderers.*;
import mx.charts.events.*;

Pour créer un chart en AS3, utilisez simplement le mot-clé "new". Vous pouvez ensuite fixer les propriétés de l'objet Chart comme vous le feriez en MXML. Pour assigner un data provider, utilisez la propriété "dataProvider". Vous devrez ensuite ajouter une nouvelle series à votre Chart. Pour cela, faîtes un "new" sur la classe de series correspondante. Pour appliquer cette series à votre Chart, utilisez la propriété "series".

Notez que la propriété series est de type Array car un Chart peut contenir plusieurs series. Pour ajouter une series, faîtes un push() et pas une assignation directe.

L'exemple suivant définit un composant BarChart avec 2 series:

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

		import mx.collections.ArrayCollection;
		import mx.charts.BarChart;
		import mx.charts.series.BarSeries;
		import mx.charts.CategoryAxis;
		import mx.charts.Legend;

		[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}
		]);

		public var myChart:BarChart;
		public var series1:BarSeries;
		public var series2:BarSeries;
		public var legend1:Legend;

		public function init():void {
			// Créer un objet Chart et lui assigner des propriétés de base
			myChart = new BarChart();
			myChart.showDataTips = true;
			myChart.dataProvider = expenses;
			// Définir les axes (type CategoryAxis).
			var vAxis:CategoryAxis = new CategoryAxis();
			vAxis.categoryField = "Month" ;
			vAxis.dataProvider = expenses;
			myChart.verticalAxis = vAxis;
			// Ajouter les series.
			var mySeries:Array=new Array();
			series1 = new BarSeries();
			series1.xField="Profit";
			series1.yField="Month";
			series1.displayName = "Profit";
			mySeries.push(series1);
			series2 = new BarSeries();
			series2.xField="Expenses";
			series2.yField="Month";
			series2.displayName = "Expenses";
			mySeries.push(series2);
			myChart.series = mySeries;
			// Créer une légende.
			legend1 = new Legend();
			legend1.dataProvider = myChart;
			// Ajouter le Chart et la Légende à la liste d'affichage
			p1.addChild(myChart);
			p1.addChild(legend1);
		}
	]]></mx:Script>
	<mx:Panel id="p1" title="BarChart crée en AS3"/>
</mx:Application>

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

This movie requires Flash Player 11

Remplis sous: ActionScript, Charting, Exemple || Taggé comme: BarChart, BarSeries, CategoryAxis, categoryField, dataProvider, Legend Laisser un commentaire

Articles similaires

Commentaires (3) Trackbacks (2) (Souscrire aux commentaires de cet article)

Michenux
28 avril 2009

Bonjour

J'ai une question sur l'update du dataprovider car çà ne semble pas réagir
pareil en AS3 ou alors il manque quelque chose dans l'exemple.
Sur celui-ci, j'ai rajouté le même BarChart codé en mxml. Il utilise
le même dataprovider que le barchart AS3. J'ai aussi rajouté un bouton
qui change le dataprovider lorsqu'on clique dessus.

Résultats : quand on clique sur le bouton, le BarChart mxml se met à jour mais
pas le BarChart AS3.
Est-ce que vous pouvez m'expliquer pourquoi ? merci.
fnicollet
28 avril 2009

Salut,

Je pense qu'il faut que tu fasses un refresh() sur ton arrayCollection (dataProvider) après modification afin que la MAJ se fasse. C'est automatique grâce au data binding du MXML. A mon avis cela vient de là

Fabien
Michenux
28 avril 2009

Le refresh ne marche pas mais j'ai trouvé la solution et
c'était bien un problème de binding.

Il faut affecter le dataProvider au chart en utilisant la classe
BindingUtils :

COPIER-COLLER
MXML:
<?xml version="1.0"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

creationComplete="init()">

<mx:Script><![CDATA[

import mx.collections.ArrayCollection;

import mx.charts.BarChart;

import mx.charts.series.BarSeries;

import mx.charts.CategoryAxis;

import mx.charts.Legend;

import mx.binding.utils.BindingUtils;

[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}

]);

[Bindable]

public var expenses2:ArrayCollection = new ArrayCollection([

{Month:"Jan", Profit:4000, Expenses:1000},

{Month:"Feb", Profit:4000, Expenses:1000},

{Month:"Mar", Profit:4500, Expenses:1250}

]);

public var myChart:BarChart;

public var series1:BarSeries;

public var series2:BarSeries;

public var legend1:Legend;

public function init():void {

// Créer un objet Chart et lui assigner des propriétés de base

myChart = new BarChart();

myChart.showDataTips = true;

//myChart.dataProvider = expenses;

BindingUtils.bindProperty(myChart,"dataProvider", this, "expenses");

// Définir les axes (type CategoryAxis).

var vAxis:CategoryAxis = new CategoryAxis();

vAxis.categoryField = "Month" ;

vAxis.dataProvider = expenses;

myChart.verticalAxis = vAxis;

// Ajouter les series.

var mySeries:Array=new Array();

series1 = new BarSeries();

series1.xField="Profit";

series1.yField="Month";

series1.displayName = "Profit";

mySeries.push(series1);

series2 = new BarSeries();

series2.xField="Expenses";

series2.yField="Month";

series2.displayName = "Expenses";

mySeries.push(series2);

myChart.series = mySeries;

// Créer une légende.

legend1 = new Legend();

legend1.dataProvider = myChart;

// Ajouter le Chart et la Légende à la liste d'affichage

p1.addChild(myChart);

p1.addChild(legend1);

}

public function changeData():void {

expenses = expenses2 ;

expenses.refresh();

}

]]></mx:Script>

<mx:Button label="changeData" click="changeData()" id="buttonPrint"/>

<mx:Panel id="p1" title="BarChart crée en AS3"/>

<mx:Panel title="Bar Chart">

<mx:BarChart id="testBarChart" showDataTips="true" dataProvider="{expenses}">

<mx:verticalAxis>

<mx:CategoryAxis categoryField="Month"/>

</mx:verticalAxis>

<mx:series>

<mx:BarSeries xField="Profit" yField="Month" displayName="Profit"/>

<mx:BarSeries xField="Expenses" yField="Month" displayName="Expenses"/>

</mx:series>

</mx:BarChart>

<mx:Legend dataProvider="{testBarChart}"/>

</mx:Panel>

</mx:Application>