Flash-komponenter har alltid vært de mest visuelt gledelige komponentene på nettet. Med Flex har Flash nådd et helt nytt nivå av grensesnittdesign, og har gjort det betydelig enklere. Flex mangler imidlertid mangfoldet av tilpasningsalternativer, stiler og animasjoner som tilbys av flere 3rd partikkomponenter. Bemerkelsesverdig blant dem er FusionCharts, som gir en modul bare for Flex. For dette eksempelet vil vi bruke denne pakken til å lage et boble diagram i Flex.
Setter opp
Før vi setter opp FusionCharts for Flex-modulen, kan det være interessant for deg å vite hvordan det fungerer. Teknisk er FusionCharts skrevet i AS2 og kan ikke direkte legges inn i Flex-miljøet. Så bruker den FlashInterface til å kommunisere med Flex runtime miljøet (AVM2). Hvis du vil vite mer om hvordan det fungerer, kan du se dokumentasjonen deres på www.fusioncharts.com/flex/docs.
Så hvordan konfigurerer man FusionCharts for Flex? Det er ganske enkelt, da FusionCharts for Flex kommer som en SWC-biblioteksmodul for Flex. Modulen kan integreres fullt ut med Flex Builder-programmet, eller brukes som et eksternt bibliotek hvis noen ønsker å bruke gratis SDK. Den faktiske installasjonen er en enkel kopi-lime prosess som kan utføres i tre trinn:
Få FusionCharts for Flex-modulen og hent ut arkivet. Plasseringen hvor du har hentet FusionCharts for Flex-arkivet, blir senere referert til som DISTRIBUTION_ROOT. Du kan laste ned evalueringsversjonen fra www.fusioncharts.com/flex/Download.asp.
Opprett et nytt Flex-prosjekt som du vil knytte FusionCharts for Flex-modulen til.
Kopier FusionCharts.swc Shockwave Component til stede på DISTRIBUTION_ROOT / diagrammer til PROJECT_ROOT / libs mappe…
Kopier FusionCharts mappe fra DISTRIBUTION_ROOT / diagrammer til PROJECT_ROOT / src mappe. Denne mappen inneholder alle diagrammets Flash-objekter.
Følgende bilde viser den resulterende mappestrukturen etter at du har integrert FusionCharts for Flex-modulen. Vi har kalt prosjektet som FusionCharts, så en MXML-fil med samme navn er til stede som standard:
Opprette Bubble Chart
Så nå som vi har satt opp FusionCharts-biblioteket, kan vi dykke rett inn for å lage et boble diagram.
For de av dere som ikke er kjent med begrepet "boble diagram", er de grafer som er plottet som alle andre kontinuerlige datasett.
Bare de har evne til å representere en ekstra dimensjon av data. Ikke bare det, de kan brukes til å sammenligne flere datasett også.
Vi vil plotte kostprisen vs. salgsprisen på forskjellige frukter med z-indeksen som representerer mengden av hver frukt. Så, uten videre, la oss begynne:
Trinn 1: Deklarer FusionCharts Tag
For det første må vi erklære FusionCharts koder i MXML. Merkene ser ut som følger.
For å bruke fleksible datastrukturer som ArrayCollections, XMLList etc., må vi også deklarere barnetiketten FCChartData. Denne taggen tillater oss å binde plottdata, diagramegenskaper og stil til FusionCharts-objektet.
Trinn 2: Definere diagramegenskaper
La oss nå lage en ArrayCollection for å beskrive de grunnleggende egenskapene til diagrammet. Vi skal ringe vår ArrayCollection chartParam. Erklæringen er som følger:
Hvis du legger merke til nøye, er hvert element i et element som er en liste over egenskaper og deres respektive verdier. For eksempel er diagramteksten deklarert som bildetekst: 'Årlig salgskart'. Så, uten å vite noe om FusionCharts XML, kan vi legge til eller fjerne egenskaper til vårt kartobjekt. Hvis du vil vite om de forskjellige egenskapene som er tilgjengelige, kan du besøke Bubble Chart Reference.
Trinn 3: Gir diagramdata
Vi må også deklarere datasettet for dette diagrammet. Datasettet kan deklareres som følger:
Hvis vi ser nærmere, er det totalt tre typer objekter i ArrayCollection.
For det første, label: '5', x: '5', ... Erklæring er nødvendig for å definere x-akse-etikettene.
Etter dette, serienavn: '1996', farge: '227ed5', ... brukes til å deklarere hvert nytt sett med data.
Og til slutt er de enkelte dataelementene deklarert som x: '8', y: '15 ', z:' 33 ', .... Tastene x, y og z er aksenindeksene for dette bestemte datasettet.
Trinn 4: Binde Flexdata til FusionCharts Object
Nå som vi har erklært alle nødvendige data for vårt bobleoversikt, bør vi binde disse dataene til vårt FusionCharts-objekt. Som vi nevnte tidligere, er alle Flex-datakilder bundet til egenskapene til FCChartData stikkord. Etter å ha bundet kartparametrene og datakilden, ser kilden ut som følger:
Trinn 5: Kjører koden
Det er endelig tid til å kjøre eksemplet. Du kan få den komplette kildekoden for dette eksemplet i kildepakken. Oppsett FusionCharts-biblioteket som beskrevet i forrige avsnitt, og kompilér deretter bubble_example1.mxml-filen. Kjør den resulterende SWF-filen, og du bør se et diagram som følger:
Trinn 6: Legge til trendlinjer
Nå som vi har sett hvordan vi representerer datasettene for diagrammene, la oss gjøre det kulere ved å legge til trendlinjer til det. Faktisk vil vi legge til trendsoner i våre diagrammer i stedet for bare linjer. Som tidligere måtte vi lage en ny ArrayCollection for våre trendlinjeposter. Følgende kode viser oss hvordan du gjør det:
Hvert trend-soneobjekt erklærer bare startpunktet, sluttpunktet og det faktum at det er en sone ikke en linje, og den er farge. Vi har også muligheten til å sette grafiske egenskaper som farge, alfa osv.
Igjen, som før vil vi legge til et nytt attributt FChTrendlines til vår FCChartData tag, og bind dataene til den. De FChTrendline attributt erklærer at disse er horisontale trendsoner, kan vertikale trendsoner også deklareres. Den modifiserte kilden vil være:
Du kan få kildekoden for det endrede diagrammet fra bubble_example2.mxml fil i kildepakken. Hvis du kompilerer og kjører filen, vil det nye diagrammet se slik ut-
Trinn 7: Legge til stiler
Tid til å sparke det og virkelig krydre deg med diagrammer og stiler. Å legge stiler er ganske enkelt, for det første, ja du gjettet det, lag en ny ArrayCollection. Innenfor arrayet for stiler må vi deklarere to typer objekter:
Stilobjekt for å definere forskjellige stiler
Et programobjekt for å kartlegge stiler på ulike objekter
Bare se på koden, hvis dette virker litt forvirrende:
Denne typen stildeklarasjoner er fordelaktig for det faktum at de kan brukes på nytt og brukes over flere objekter. I vårt tilfelle har vi brukt samme animasjonsstil til begge våre trendsoner. Vi har også erklært en stil for å gjøre bildeteksten større.
De navn: 'CanvasAnim', type: 'animasjon', ...objekt brukes til å erklære stiler. De Navn Attributt representerer navnet på objektet og type Attributt representerer typen stil. Disse blir etterfulgt av attributter som er relevante for en bestemt type stil. Deretter kommer kartlegging av stiler til bestemte kartobjekter. De toObject: 'Caption', stiler: 'CaptionSize' deklarasjon gjør exatctly det. Det er ganske åpenbart at stil Attributtet er for navnet på stilen og toObject definerer typen objekt som er påført.
Bind den nye stilen til vårt diagramobjekt som før
Du kan få den endrede koden fra bubble_example3.mxml fil i kildearkivet. Den resulterende applikasjonen vil se ut som:
Trinn 8: Konvertere det til et plottediagram
Det er veldig enkelt å konvertere et diagram til et annet diagram. Alt du trenger å gjøre er
Endre diagramtypen.
Kontroller at gjeldende data stemmer overens med dataene i den nye karttypen. Hvis ikke, endre det tilsvarende.
Gjør visuelle justeringer slik at den passer til din nye karttype.
For å endre diagramtypen, sett ganske enkelt inn FCChartType tilskrive Spre.
Deretter slettes z-indeksen for å gjøre diagramdataene i samsvar med scatter-datatypen. Dataene ville bli forvandlet som:
Du kan få den endrede koden fra scatter_example.mxml fil i kildearkivet. Den resulterende applikasjonen vil se ut som:
konklusjoner
Så vi er endelig ferdig med å bygge vårt diagram. Nå kan du gå ut og spre dine FusionCharts-applikasjoner til verden. For det meste er byggekart med FusionCharts ganske enkelt. Med de tilpassede kodene og Flex data-bindingen som tilbys av FusionCharts, er det virkelig komponenten du bør bruke for Flex-applikasjoner.
Følg oss på Twitter, eller abonner på NETTUTS RSS Feed for flere daglige webutviklingsverktøy og artikler.
Share
Accentsconagua
