Create en dynamisk Bar Graph Generator Bruke XML + AS3
Del
Del
to
Del

Dette Cyber ​​mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.

Et stolpediagram eller søylediagram er et diagram med rektangulære barer hvis lengder er proporsjonal med de verdiene de representerer. De er ofte brukt for å sammenligne to eller flere verdier som ble tatt over tid eller under ulike forhold, vanligvis på små datasett.

I denne opplæringen, vil vi lage et søylediagram generator ved hjelp av XML og AS3.

Trinn 1: Kort oversikt

Ved hjelp av Actionscript 3, vil vi få de nødvendige grafen data fra en XML-fil, deretter skjerm de konverterte data i animerte barer og en info område

Trinn 2:.. Starte

Åpne Flash og opprette en ny Flash-fil (Actionscript 3)

Sett scenen størrelse til 600x300 og legge en grå radial bakgrunn (# E6E6E6, #CCCCCC).

Vår graf generator vil bli opprettet i sin helhet av kode, så dette vil være det eneste du skal gjøre i Stage.
< h2> Trinn 3: XML

Åpne yout favoritt XML editor (hvilken som helst tekst editor vil fungere) og legge til følgende linjer:?
< xml version = "1.0" > < grafer width = "50" > < grafen name = "Yellow" value = "50" color = "0xFDC13E" /> < grafen name = "Blue" value = "80" color = "0x25B7E2" /> < grafen name = "Green" value = "30" color = "0xB8CF36" /> < grafen name = "Red" value = "10" color = "0xE7473F" /> < /grafer >

Dette er XML som vi skal bruke for å få data, vil vi ikke skal bruke barnas navn, men attributtene

bredde. Bredden av hver bar

navn:.. Navnet på elementet, som skal vises i informasjonsområdet

verdi. Verdien av dette elementet, vises på toppen av stolpene

farge: Fargen på bar, i Heksadesimal

Dette er filen som sluttbrukeren trenger å redigere for å vise sine egne data

Trinn 4.. :!.. Action

Det er Action tid

Opprett en ny Action File (Cmd + N) og lagre den som "Graph.as", i klasser katalogen

Trinn 5: Pakke
pakken {

Pakken søkeord lar deg organisere koden din inn i grupper som kan importeres av andre scripts. Det anbefales å navngi dem starter med en liten bokstav og bruke intercaps for etterfølgende ord for eksempel: myClasses

I eksemplet er klassen lagret på samme sted som den Fla filen..

Trinn 6:. Importere Nødvendige Classes

Disse er nødvendige klasser, for en mer detaljert beskrivelse om hver klasse, henvises til Flash Hjelp (F1)
import fl.transitions .Tween, import fl.transitions.easing.Strong, import flash.display.Sprite, import flash.text.TextField, import flash.text.TextFormat, import flash.text.TextFieldAutoSize, import flash.net.URLLoader; import flash. net.URLRequest, import flash.events.Event;
Trinn 7: Erklærte og Utvide Class

strekker
søkeord definerer en klasse som er en underklasse av en annen klasse. Underklasse arver alle metoder, egenskaper og funksjoner, på den måten vi kan bruke dem i klassen vår.
Public class Graph strekker Sprite {

I dette eksempelet, arver Graph klassen alle metoder og egenskaper for Sprite Class .

Trinn 8: Variabler

Dette er de variablene vi vil bruke, forklarte i kommentarfeltet
private Var graphContainer: Sprite = new Sprite (); privat Var xmlFile:. XML; //XML Object å analysere XML fileprivate Var URLLoader: URLLoader = new URLLoader (); //De fil loaderprivate Var totalBars: int; //Lagrer antall barer i graphprivate Var tween: Tween; //En Tween gjenstand for animationprivate Var tf: tekstformat = new tekstformat (); //Tekstformat
Trinn 9: Constructor

Konstruktøren er en funksjon som kjøres når et objekt er opprettet fra en klasse. Denne koden er den første som skal utføres når du gjør en forekomst av et objekt, eller kjører ved hjelp av Document Class
offentlig funksjon Graph (). Void {/* Text Format * /tf.color = 0x666666; tf.size = 12; tf.font = "Helvetica"; createGraphContainer (); LoadXML (); createBars ();}
Trinn 10: Graph Container

Denne funksjonen vil skape x og y-aksen linjene i grafen med tegningen API
privat funksjon createGraphContainer (): void {graphContainer.. graphics.lineStyle (1, 0x9C9C9E); graphContainer.graphics.moveTo (30, 30); graphContainer.graphics.lineTo (30, 270); graphContainer.graphics.lineTo (570, 270); addChild (graphContainer);}
Trinn 11: Load XML Funksjon

Dette er funksjonen som håndterer lasting av XML-filen. Vi angir en standard paramenter å unngå å kalle funksjonen med en annen .as fil, i stedet vi skal kalle det fra dokument Class
privat funksjon LoadXML. (File: String = "graph.xml"): void //Din xml datafil {urlLoader.load (ny URLRequest (fil)); //Laster filen i parameter urlLoader.addEventListener (Event.COMPLETE, parseXML); Kaller en funksjon når lasten er fullført}
Trinn 12:. Parse XML

Denne funksjonen setter dataene lastet til XML objekt og kaller funksjoner for å lage grafen ved hjelp av disse dataene
privat funksjon parseXML (e: Hendelses): void {xmlFile = new XML (e.target.data); . totalBars = xmlFile.children () length (); createBars (); display ();}
Trinn 13: Lag Barer

Denne koden håndterer bar skapelse
privat funksjons createBars (): void {for (var i.: int = 0; i < totalBars; i ++) //Dette for sjekker antall barer i xml {var bar: Sprite = new Sprite (); //En sprite for hver bar bar.graphics.beginFill (xmlFile.children () [i] @ farge.); //Gets fargen på baren fra xml bar.graphics.drawRect (0, 0, xmlFile @ bredde, xmlFile.children () [i] @ verdi..); //Oppretter baren henhold til xml bestemt bredde bar.graphics.endFill (); bar.x = 40 + (. xmlFile @ bredde * i) + (10 * i); //Bar posisjon bar.y = 270 - bar.height; Var val: Textfield = new Textfield (); //A Textfield å vise verdien val.defaultTextFormat = tf; val.autoSize = TextFieldAutoSize.RIGHT; val.text = xmlFile.children () [i]. @ Verdi; //Gets verdien fra xml val.x = 55 + (xmlFile @ bredde * i.) + (10 * i); //Tekstfeltet posisjon val.y = 255 - bar.height; tween = new Tween (bar, "height", Strong.easeOut, 0, bar.height, 1, true); //Animerer baren addChild (bar); //Legger sprites å iscenesette addChild (val); }}
Steg 14:. Info Område

Informasjon om grafen vil bli vist i øverste høyre hjørne, denne funksjonen vil ta seg av det
private funksjonsdisplay (): void {for (var i: int = 0; i < totalBars; i ++) {var color: Sprite = new Sprite (); //Oppretter sprites og textfields for hver bar Var navn: Textfield = new Textfield (); names.defaultTextFormat = tf; names.autoSize = TextFieldAutoSize.LEFT; names.text = xmlFile.children () [i]. @ Navn; /* Posisjon * /names.x = 500; names.y = 30 + (20 * i); /* Farge firkanter * /color.graphics.beginFill (xmlFile.children () [i] @ farge.); color.graphics.drawRect (0, 0, 10, 10); color.graphics.endFill (); color.x = 490; color.y = 31 + (20 * i); addChild (navn); addChild (farge); }}
Trinn 15:. Dokument Class

Gå tilbake til FLA filen og i Properties Panel legge "Graph" i klassen feltet for å gjøre dette til dokument Class

Konklusjon

Test filmen og se diagrammet vises på scenen.

Du kan tilpasse dine grafer på mange måter, ved hjelp av XML-filen, og også legge til nye funksjoner med Actionscript. Prøv det!

Jeg håper du likte denne opplæringen, Takk for lesing. Anmeldelser