Componentele Flash au fost întotdeauna cele mai mulțumitoare componente vizuale pe web. Cu Flex, Flash a ajuns la un nivel complet nou de design al interfeței și a făcut-o considerabil mai ușoară. Cu toate acestea, Flex nu dispune de o serie de opțiuni de personalizare, stiluri și animații care sunt furnizate de mai multe 3rd parti componente. Notă printre ele este FusionCharts, care oferă un modul doar pentru Flex. Pentru acest exemplu, vom folosi această suită pentru a crea o diagramă cu bule în Flex.
Configurare
Înainte de a configura modulul FusionCharts for Flex, ar putea fi interesat să știți cum funcționează. Din punct de vedere tehnic, FusionCharts este scris în AS2 și nu poate fi încorporat direct în mediul Flex. Deci, utilizează FlashInterface pentru a comunica cu mediul Flex runtime (AVM2). Dacă doriți să aflați mai multe despre cum funcționează, puteți vedea documentația acestora la www.fusioncharts.com/flex/docs.
Deci, cum se configurează FusionCharts pentru Flex? Este destul de ușor, deoarece FusionCharts for Flex vine ca un modul de bibliotecă SWC pentru Flex. Modulul poate fi complet integrat cu aplicația Flex Builder sau poate fi folosit ca o bibliotecă externă dacă cineva dorește să utilizeze SDK-ul gratuit. Instalarea reală este un proces simplu de copiere-lipire care poate fi executat în 3 pași:
Obțineți modulul FusionCharts pentru Flex și extrageți arhiva. Locația în care ați extras arhiva FusionCharts for Flex va fi denumită ulterior DISTRIBUTION_ROOT. Puteți descărca versiunea de evaluare de la www.fusioncharts.com/flex/Download.asp.
Creați un nou proiect Flex cu care doriți să asociați modulul FusionCharts pentru Flex.
Copiați FusionCharts.swc Componenta Shockwave prezentă la DISTRIBUTION_ROOT / Grafice la PROJECT_ROOT / libs pliant…
Copiați FusionCharts din dosar DISTRIBUTION_ROOT / Grafice la PROJECT_ROOT / src pliant. Acest dosar conține toate obiectele Flash din diagramă.
Următoarea imagine prezintă structura de directoare rezultată după încorporarea modulului FusionCharts for Flex. Am numit proiectul ca FusionCharts, deci un fișier MXML cu același nume este prezent în mod implicit:
Crearea diagramei cu bule
Deci, acum că am înființat biblioteca FusionCharts, putem să ne aruncăm cu grijă să creăm o diagramă cu bule.
Pentru cei care nu sunteți familiarizați cu termenul "diagramă cu bule", acestea sunt grafice care sunt reprezentate grafic ca orice alt set de date continuu.
Doar ei au capacitatea de a reprezenta o dimensiune suplimentară a datelor. Nu numai că acestea pot fi folosite pentru a compara mai multe seturi de date.
Vom compila prețul de cost față de prețul de vânzare al diferitelor fructe cu indicele z reprezentând cantitatea fiecărui fruct. Deci, fără să mai vorbim, să începem:
Pasul 1: Declarația etichetei FusionCharts
În primul rând, trebuie să declarăm FusionCharts în MXML. Etichetele arată după cum urmează.
Pentru utilizarea structurilor de date Flex, cum ar fi ArrayCollections, XMLList etc., trebuie de asemenea să declare eticheta copilului FCChartData. Această etichetă ne va permite să legăm datele obiectului, proprietățile grafice și stilul obiectului FusionCharts.
Pasul 2: Definirea proprietăților diagramă
Acum, să creăm o ArrayCollection pentru a descrie proprietățile de bază ale graficului. Ne vom numi ArrayCollection chartParam. Declarația este următoarea:
[Bindable] vară grafică privatăParam: ArrayCollection = ArrayCollection nou ([caption: 'Grafic anual de vânzări', xAxisName: 'Preț (Bt./kg.)', YAxisName: Costul inițial (Bt./kg. ), ...]);
Dacă observați cu atenție, fiecare element de matrice este un obiect care se întâmplă a fi o listă de proprietăți și valorile lor respective. De exemplu, legenda grafică este declarată ca caption: "Grafic anual de vânzări". Deci, fără a cunoaște nimic despre FusionCharts XML, putem adăuga sau elimina proprietăți în obiectul nostru de diagramă. Dacă doriți să știți despre diferitele proprietăți disponibile, puteți vizita Bubble Chart Reference.
Pasul 3: Furnizarea datelor din diagramă
De asemenea, trebuie să declare setul de date pentru această diagramă. Setul de date poate fi declarat astfel:
Dacă ne uităm mai atent, în ArrayCollection există un total de trei tipuri de obiecte.
În primul rând, etichetă: '5', x: '5', ... este necesară o declarație pentru a defini etichetele axei x.
După aceasta, serialName: '1996', culoare: '227ed5', ... este folosit pentru a declara fiecare set de date noi.
În final, elementele de date individuale sunt declarate ca fiind x: '8', y: '15 ', z:' 33 ', .... Cheile x, y și z sunt indicele axelor pentru acest set de date.
Pasul 4: Legarea datelor Flex către Obiectul FusionCharts
Acum că am declarat toate datele necesare pentru diagrama noastră cu bule, ar trebui să le legăm aceste date în obiectul nostru FusionCharts. După cum am menționat mai sus, toate sursele de date Flex sunt legate de atributele FCChartData etichetă. După legarea parametrilor graficului și a sursei de date, sursa ar arăta astfel:
Pasul 5: Rularea codului
În cele din urmă este timpul să rulați exemplul. Puteți obține codul sursă complet pentru acest exemplu în pachetul sursă. Configurați biblioteca FusionCharts așa cum este descris în secțiunea anterioară și apoi compilați fișierul bubble_example1.mxml. Rulați fișierul SWF rezultat și ar trebui să vedeți o diagramă după cum urmează:
Pasul 6: Adăugarea liniilor de trend
Acum, că am văzut cum să reprezentăm seturile de date pentru diagrame, să o facem mai rece adăugând linii de trend. De fapt, vom adăuga zone de trend spre graficele noastre, mai degrabă decât linii. Ca si inainte, ar trebui sa facem o noua ArrayCollection pentru obiectele din trend-line. Următorul cod ne arată cum să procedăm astfel:
Fiecare obiect din zona de trend doar, declară că este punctul de plecare, punctul final și faptul că este o zonă care nu este o linie și este de culoare. De asemenea, avem opțiunea de a seta proprietăți grafice cum ar fi culoarea, alfa etc.
Din nou, ca și înainte, vom adăuga un atribut nou FChTrendlines pentru noi FCChartData eticheta și legați datele la aceasta. FChTrendline atributul declară că acestea sunt zone orizontale de tendință, pot fi de asemenea declarate zonele trend-trend-uri, Sursa modificată ar fi:
Puteți obține codul sursă pentru graficul modificat din bubble_example2.mxml fișier din pachetul sursă. Dacă compilați și rulați fișierul, noua diagramă ar arăta astfel-
Pasul 7: Adăugarea de stiluri
Este timpul să-l dați afară și într-adevăr să vă îmbogățiți cu diagrame și animații. Adăugarea stilurilor este destul de simplă, în primul rând, da, ați ghicit-o, faceți un nou ArrayCollection. În matricea de stiluri, trebuie să declarăm două tipuri de obiecte:
Obiect stil pentru a defini diferite stiluri
Obiect de aplicație pentru a schimba stiluri pe diferite obiecte
Uitați-vă la cod, dacă acest lucru pare puțin confuz:
Acest tip de declarații de stil sunt avantajoase pentru faptul că pot fi reutilizate și folosite pe mai multe obiecte. În cazul nostru, am aplicat același stil de animație atât pentru zonele noastre de trend. De asemenea, am declarat un stil pentru a face titlul mai mare.
nume: "CanvasAnim", tip: "animație", ...obiect este folosit pentru a declara stiluri. Nume atributul reprezintă numele obiectului și al lui tip atributul reprezintă tipul de stil. Acestea sunt urmate de atributele pertinente pentru un anumit tip de stil. Apoi urmează cartografierea stilurilor pentru anumite obiecte de diagramă. toObject: "Caption", stiluri: "CaptionSize" declarație face asta excret. Este evident că stil atributul este pentru numele stilului și la obiect definește tipul de obiect aplicat.
Legați noul matrice de stiluri de obiectul nostru de diagramă ca mai înainte
Puteți obține codul modificat din bubble_example3.mxml fișier în arhiva sursă. Aplicația rezultată ar arăta astfel:
Pasul 8: Convertiți-l într-o diagramă grafică
Transformarea unei diagrame într-o altă diagramă este foarte ușoară. Tot ce trebuie să faceți este
Modificați tipul diagramei.
Asigurați-vă că datele curente sunt conforme cu datele noului tip de diagramă. Dacă nu, modificați-o în consecință.
Faceți ajustări vizuale pentru a se potrivi noului tip de diagramă.
Pentru a schimba tipul graficului, trebuie doar să setați FCChartType atribuit lui Împrăștia.
Apoi ștergem z-indexul pentru a face datele din diagramă să fie conforme cu tipul de date al diagramei scatter. Datele s-ar transforma ca:
Puteți obține codul modificat din scatter_example.mxml fișier în arhiva sursă. Aplicația rezultată ar arăta astfel:
concluzii
Deci, am terminat în sfârșit cu construirea graficului nostru. Acum poți ieși și răspândi aplicațiile FusionCharts în lume. De cele mai multe ori, construirea de grafice cu FusionCharts este destul de ușoară. Cu etichetele personalizate și legarea datelor Flex furnizate de FusionCharts, este într-adevăr componenta pe care ar trebui să o utilizați pentru aplicațiile Flex.
Urmăriți-ne pe Twitter sau abonați-vă la feed-ul RSS NETTUTS pentru mai multe tutoriale și articole zilnice de dezvoltare web.
Share
Accentsconagua
