Share
O diagramă reprezintă o reprezentare vizuală a datelor. Datele pot fi reprezentate prin simboluri, cum ar fi barele dintr-o diagramă de bare, liniile dintr-o diagramă de linie sau felii dintr-o diagramă de tip pieptene. O diagramă poate reprezenta date numerice tabulare, funcții sau anumite tipuri de structuri calitative.
FusionCharts vă ajută să creați diagrame animate și interactive Flash pentru aplicații web și desktop. Îmbunătățește aplicațiile prin conversia datelor monotone în imagini vizuale interesante.
În acest tutorial vom învăța cum să folosim FusionCharts pentru a crea diferite tipuri de grafice folosind ActionScript și XML.
FusionCharts este o componentă flash charting care poate fi utilizată pentru a reda diagrame de date și animate în aplicațiile și prezentările web și desktop. Caracteristicile inteligente, ușor de utilizat și inovatoare vizează aplicațiile web prin transformarea datelor monotone în imagini vizuale interesante.
De asemenea, poate fi folosit cu orice limbaj de scripting și bază de date. Acesta este folosit cu ASP.NET, ASP, PHP, JSP, ColdFusion, Ruby on Rails, Python, pagini HTML simple sau chiar PowerPoint Presentations, în acest tutorial ne vom concentra în utilizarea Flash.
Puteți descărca 3 versiuni diferite ale FusionCharts.
O versiune gratuită codată în Flash MX (ActionScript1), o versiune de încercare complet funcțională pe pagina de descărcare sau puteți cumpăra o licență de la $ 69 (ActionScript2) sau versiunea Flex care utilizează ActionScript3 (deși nu este compatibilă cu Flash).
În acest tutorial vom folosi versiunea ActionScript 2.
Există mereu argumente pro și contra atunci când folosiți componente terțe pentru a vă dezvolta aplicațiile.
Pro:
Contra:
Puteți utiliza două metode pentru a crea un grafic, unul utilizând fișierele SWF din fișierul Grafice folder și HTML sau dacă cumpărați licența pentru dezvoltator sau pentru întreprindere, puteți utiliza clasele direct.
Vom folosi ambele metode în acest tut.
Pentru a putea folosi metoda fișierelor SWF vom avea nevoie de un fișier XML și de un fișier HTML în care vom transmite XML ca argument pentru SWF folosind FlashVars.
Să începem cu XML.
Deschideți editorul preferat XML sau text și începeți să scrieți:
Acest cod indică graficului SWF ce date să utilizeze și stabilește câteva opțiuni. Puteți identifica la prima vedere datele care vor fi utilizate.
Veți vedea o descriere mai bună a opțiunilor din documentația inclusă în descărcare.
FusionCharts are o mare colecție de stiluri de diagrame. Răsfoiți la Grafice din sursa FusionCharts, selectați un stil grafic și copiați-l în locația proiectului.
În acest exemplu am folosit stilul BasicChart.
În editorul HTML sau text scrieți următoarele:
Exemplu BasicChart
Acest lucru poate părea complicat, dar este mai simplu decât credeți. Marcajul de mai sus este o structură html de bază și o etichetă obiect, dacă utilizați un editor dedicat, acest cod va fi generat automat atunci când se introduce un obiect Flash, puteți adăuga sau modifica parametrul FlashVars pentru a adăuga adresa URL a datelor XML fișierului și lățimea și înălțimea aplicației.
Acum puteți testa graficul. Deschideți fișierul html în browser și vedeți cum funcționează.
Dacă ați achiziționat licența Developer sau Enterprise, puteți utiliza clasele direct pentru a crea un grafic.
Creați un fișier Flash nou (ActionScript 2) și salvați-l ca BasicChart.fla.
Deschideți panoul Acțiuni (Opțiune + F9) și scrieți acest rând de cod:
import com.fusioncharts.core.charts.Column3DChart;
Aceasta va importa funcțiile necesare pentru a desena o diagramă. Ultimul cuvânt reprezintă stilul graficului pe care îl veți crea.
Acestea sunt variabilele pe care le vom folosi, explicate în comentarii.
Accentsconagua
container var: MovieClip = this.createEmptyMovieClip ("chartContainer", 1); // Crează un MC care va stoca graficul var xmlFile: XML = nou XML (); // Obiectul XML care va stoca fisierul XML var basicChart: Column3DChart; // O instanță a graficului pe care îl alegeți Acest cod încarcă fișierul XML și o funcție creează graficul când se face încărcarea.
xmlFile.load ( "data.xml"); // Scrie fisierul xml aici xmlFile.onLoad = function (): Void basicChart = noua coloana3DChart (container, 1, 450, 325, 75, 0, fals, "EN", "noScale"); // Opțiunile explicate mai târziu în tut basicChart.setXMLData (xmlFile); // XML trebuie să fie un obiect XML basicChart.render (); // Reface diagrama;
Acesta este tot codul de care veți avea nevoie pentru a crea un grafic de bază. După cum puteți vedea constructorul de grafice are mai mulți parametri, acest lucru va fi explicat în pasul următor.
Fiecare diagramă pe care o creați folosind ActionScript va avea nevoie de câțiva parametri, acești parametri fiind:
Componenta FusionCharts Grid vă ajută să afișați date XML dintr-o singură serie FusionCharts într-un format tabelar. Puteți combina componenta grilă cu orice diagramă cu o singură serie pentru a forma o combo bună.
Puteți afișa o componentă Grid fără a fi nevoie de un grafic prin adăugarea acestui Javascript în HTML:
Rețeaua va apărea în cadrul acestui DIV.
Aceasta folosește fișierul javascript al FusionChart pentru a apela SSGrid Swf și a crea o rețea care arată asemănătoare cu aceasta:
Dacă doriți să utilizați o rețea, dar să afișați și un grafic, modificați fișierul HTML astfel:
Graficul va apărea în cadrul acestui DIV.Rețeaua va apărea în cadrul acestui DIV.
Veți ajunge cu ceva de genul:
Puteți utiliza aceleași date XML cu grilă și grafic.
FusionCharts vă permite să exportați date din graficele dvs. în format CSV. În Flash, acest lucru se poate face folosind Context Menu.
Deschideți fișierul XML de date și adăugați opțiunea showExportDataMenuItem.
...
Când se adaugă această opțiune, un element nou este afișat în meniul contextual:
Eticheta acestui element de meniu poate fi personalizată prin setarea:
FusionCharts este un instrument util pentru a vă arăta datele într-un mod bun și fără a fi nevoie să creați totul de la zero. Experimentați cu diferitele tipuri de grafice!
Vă mulțumim pentru lectură!
