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

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):



	
		
	
	
		
	

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

	

		

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:

	
	
		
			
			
		
	
	

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:

		

	
	

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>


	

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

		

		

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:


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

		

		
			
		


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

 

[kml_flashembed publishmethod=”static” fversion=”10.0.0″ useexpressinstall=”true” movie=”https://www.itcsolutions.eu/wp-content/uploads/2010/12/LineChartExample.swf” targetclass=”flashmovie” loop=”true”]

Get Adobe Flash player

[/kml_flashembed]

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