Cum sa faci un grafic in Flex cu date predefinite in Adobe Flash Builder 4

No comments - This post in english

Următorul exemplu descrie cum puteţi crea un grafic de tip LineChart în Flex prin utilizarea datelor statice dintr-un sir de valori. Graficul LineChart este creat folosind sintaxa MXML fără cod ActionScript. Exemplu vă arată cum puteţi crea un grafic cu o animatie simplă, fără sa fie nevoie de cunostinte  ActionScript (cu ActionScript puteţi crea grafice mai dinamice şi interactive, dar pentru inceput aceasta este cea mai simplă abordare).

Pentru a face acest exemplu, aveţi nevoie de Adobe Flash Builder 4 (dacă eşti student sau cadru didactic in instituţii de învăţământ eligibile, puteţi beneficia de programul Flex gratuit pentru Educaţie)

1. Se deschide Adobe Flash Buider 4 (sau Adobe Flex Builder 3) şi selectaţi New -> MXML Application

2. Se indica numele aplicatiei, LineChartExample, şi selectaţi un layout pe verticală (componentele vor fi afişate unul după altul, de sus in jos)

New MXML Application

New MXML Application

3. Structura MXML implicită a acestei aplicatii este (folosind cele 2 butoane de deasupra zonei de editare, Source sau Design, se poate schimba modul de editare al aplicatiei Flex):

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
	<s:layout>
		<s:VerticalLayout/>
	</s:layout>
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
</s:Application>

4. Se definesc datele utilizate de grafic intr-un vector (array). După tag-ul </fx: Declarations> se adăuga declaraţia:

<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection; 
 
			[Bindable] 
			public var series1:ArrayCollection = new ArrayCollection([ 
				{Month:"18 nov", value:3.1555}, 
				{Month:"22 nov", value:4.5274}, 
				{Month:"24 nov", value:5.2368}, 
				{Month:"26 nov", value:4.2581}, 
				{Month:"30 nov", value:3.7861}, 
				{Month:"3 dec", value:5.2435}, 
				{Month:"7 dec", value:4.8179}, 
				{Month:"9 dec", value:5.1199} 
			]); 
			[Bindable] 
			public var series2:ArrayCollection = new ArrayCollection([ 
				{Month:"18 nov", value:4.2960}, 
				{Month:"22 nov", value:3.8957}, 
				{Month:"24 nov", value:4.3079}, 
				{Month:"26 nov", value:5.1137}, 
				{Month:"30 nov", value:4.2842}, 
				{Month:"3 dec", value:3.5997}, 
				{Month:"7 dec", value:4.3006}, 
				{Month:"9 dec", value:5.6100} 
			]);
		]]>
	</fx:Script>

După cum puteţi vedea, există 2 liste de valori. Fiecare listă are 8 elemente, care reprezintă valorile pereche pentru o dată şi o valoare. De exemplu, {Month: "22 nov", value: 4.1274}, reprezintă un element din lista ce are 2 valori (pentru data de 22 nov s-a inregistrat vaoarea 4.1274). Valorile de tip sir de caractere sunt plasate între "". Fiecare element al sirului este separat de , (virgula).

5. Adăugaţi diagramă linie. Există 2 moduri de a face asta:

  • din modul de Design selectaţi componenta diagramă linie şi glisaţi-l pe scena, dupa care a stabilit 2 elemente serie şi legenda;

Charts Components

Charts Components

Line Chart Options

Line Chart Options

  • în sursa MXML sev adauga dupa tag-ul </fx: script> urmatoarea definitie:

	<mx:linechart id="linechart1">
		<mx:series>
			<mx:lineseries yfield="" displayname="Series 1" />
			<mx:lineseries yfield="" displayname="Series 2" />
		</mx:series>
	</mx:linechart>
	<mx:legend dataprovider="{linechart1}" />

6. Se face legătura între linia din grafic şi seria de date prin adăugarea la tag-ul <mx:lineseries…/> a proprietatii dataProvider; de asemenea, se indica valoarea utilizata din seria de valori prin proprietatea yField; liniile devin:

<mx:series>
	<mx:lineseries yfield="value" displayname="Series 1" dataprovider="{series1}" />
	<mx:lineseries yfield="value" displayname="Series 2" dataprovider="{series2}" />
</mx:series>

7. Se adauga valorile pe axa orizontală  (sunt folosite valorile de tip data din seria de valori). Se adauga elementul <mx:horizontalAxis> între <mx:LineChart> şi </mx: LineChart>

<mx:horizontalaxis>
	<mx:categoryaxis dataprovider="{series1}" categoryfield="Month" />
</mx:horizontalaxis>

8. Se definesc valorile minime si maxime pentru axa verticala prin adaugarea elementului <mx:verticalAxis> intre <mx:LineChart> si </mx:LineChart>:

<mx:verticalaxis>
		<mx:linearaxis minimum="2.5" maximum="6.5" interval="0.1" />
</mx:verticalaxis>

9. Se adauga elemente informative pe liniile graficului. Acestea devin vizibile cand cursorul se va intersecta cu liniile graficului. Se modifica elementul <mx:LineChart> astfel:

<mx:linechart id="linechart1" showdatatips="true">

10. Se poate modifica culoarea unei linii din grafic, prin intermediul unui element de tipul <mx:lineStroke> astfel:

<mx:lineseries yfield="value" displayname="Series 1" dataprovider="{series1}">
		<mx:linestroke>
			<mx:stroke color="#ffcc00" weight="3" />
		</mx:linestroke>
</mx:lineseries>
<mx:lineseries yfield="value" displayname="Series 2" dataprovider="{series2}" />

11. Graficul este testat prin comanda Run Application din toolbar-ul aplicatiei (Run –> Run LineChartExample in meniu sau CTRL + F11)

 

Get Adobe Flash player


Sursa acestui exemplu poate fi descarcata prin Exemplu Line Chart  – sursa MXML.


  1. No comments yet.
(will not be published)

  1. No trackbacks yet.