Generere grafer i Flash Bruke FusionCharts

Generate Grafer i Flash Bruke FusionCharts
Del
Del
Del
Del

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

Et diagram er en visuell representasjon av data. Dataene kan være representert med symboler, som barer i et stolpediagram, linjer i et linjediagram, eller skiver i et kakediagram. Et diagram kan representere tabell numeriske data, funksjoner eller noen typer kvalitative strukturer.

FusionCharts hjelper deg å lage animerte og interaktive Flash diagrammer for web og desktop-applikasjoner. Det liver opp dine programmer ved å konvertere monotont data til spennende visuelle.

I denne opplæringen vil vi lære å bruke FusionCharts å lage ulike typer grafer ved hjelp av Actionscript og XML.





Trinn 1: Hva er FusionCharts

FusionCharts er en flash kartlegging komponent som kan brukes til å gjengi data-drevet og animerte diagrammer i web og desktop-applikasjoner og presentasjoner? . Det er smart, brukervennlige og innovative funksjoner friske opp dine webapplikasjoner ved å konvertere monotont data til spennende visuelle.

Det kan også brukes med alle skriptspråk og database. Den brukes med ASP.NET, ASP, PHP, JSP, Coldfusion, Ruby on Rails, Python, enkle HTML-sider eller PowerPoint-presentasjoner, i denne opplæringen vil vi fokusere på Flash-bruk.

Trinn 2 : Hvor kan jeg få FusionCharts

Du kan laste ned 3 forskjellige versjoner av FusionCharts

En gratis versjon kodet i Flash MX (ActionScript1), et fullt fungerende prøveversjon på nedlastingssiden, eller du?. kan kjøpe en lisens fra $ 69 (ActionScript2) eller Flex versjonen wich bruker ActionScript3 (selv om det ikke er kompatibel med Flash).

I denne opplæringen vil vi bruke Actionscript 2-versjonen.

Trinn 3 : Fordeler /ulemper

Det er alltid fordeler og ulemper ved bruk av tredjeparts komponenter for å utvikle dine applikasjoner

Pros:..

Enkel å implementere Anmeldelser
En rekke grafiske stiler å velge

XML kompatibel

Animert og interaktive grafer

Cons:...

Avhengig av lisensen du trenger, kan det være dyrt

Ingen Actionscript 3-versjonen for Flash

Trinn 4:.. Hvordan fungerer det

Du kan bruke to metoder for å lage en graf, en ved hjelp av SWF-filer som finnes i Charts
mappe og HTML, eller hvis du kjøper Developer eller Enterprise-lisens, kan du bruke klassene direkte.

Vi ll bruke begge metodene i denne tut

Trinn 5:. Bruke SWF-filer

For å kunne bruke SWF-filer metoden vi trenger en XML-fil og en HTML-fil hvor vi . vil passere XML som et argument til SWF hjelp FlashVars

La oss starte med XML

Trinn 6:. XML

Åpne din favoritt XML eller tekst editor og start skriving:?
< xml version = "1.0" >? < diagram showBorder = "0" bgAlpha = '0,0' palett = "1" bildetekst = 'mest populære nettleserne - November 2009' showPercentageValues ​​= '1' > < satt name = 'Firefox' value = '47 '/> < satt name = 'IE8' value = '13 0,3 "/> < satt name = 'IE7' value = '13 0,3 "/> < satt name = 'Safari' value = "3.8" /> < satt name = "Opera" value = "2.3" /> < satt name = 'IE6' value = '11 0,6 "/> < satt name = 'Chrome' value = "8.5" /> < /kart >

Denne koden forteller Graph SWF hvilke data som skal bruke og setter noen alternativer. Du kan identifisere ved første øyekast data som skal brukes

Du vil se en bedre beskrivelse av alternativene i dokumentasjonen inkludert i nedlastingen

Trinn 7:.. Graph SWF

FusionCharts har en stor samling av diagramstiler. Bla til Charts
mappe i FusionCharts kilde, velger du en graf stil og kopiere den til prosjektsted.

I dette eksempelet jeg brukte BasicChart stil.

Trinn 8: HTML

I HTML eller tekst editor skriver følgende:
< html > < head > < title > BasicChart Eksempel < /title > < /head > < body > < objekt classid = "CLSID: d27cdb6e-ae6d-11cf-96b8-444553540000" kodebase = "http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0 , 0 "width =" 600 "height =" 400 "id =" BasicChart "> < param name = "movie" value = "../FusionCharts /BasicChart.swf" /> < param name = "FlashVars" value = "& dataURL = data.xml & chartWidth = 600 & chartHeight = 400" > < param name = "kvalitet" value = "high" /> < embed src = "BasicChart.swf" FlashVars = "& dataURL = data.xml & chartWidth = 600 & chartHeight = 300" quality = "high" width = "600" height = "400" name = "BasicChart" type = "application /x-shockwave-flash" pluginspage = "http://www.macromedia.com/go/getflashplayer" /> < /object > < /body > < /html >

Dette kan virke komplisert, men det er simplier enn du tror. Markup over det er en grunnleggende html struktur og et objekt tag, hvis du bruker en dedikert editor denne koden vil bli automatisk generert når en Flash-objekt er satt inn, så kan du legge til eller redigere FlashVars parameter for å legge til nettadressen til XML-data fil og bredden og høyden av søknaden din.

Nå kan du teste grafen. Åpne html-filen i nettleseren din, og se det fungerer

Trinn 9:.. Ved hjelp av Action

Hvis du har kjøpt Developer eller Enterprise-lisens kan du bruke klassene direkte for å lage en graf

Opprett en ny Flash-fil (Actionscript 2) og lagre den som BasicChart.fla

Trinn 10:. Importere klasse

Åpne Handlinger panelet ( Tilvalg + F9) og skrive denne linjen med kode:
import com.fusioncharts.core.charts.Column3DChart; Dette vil importere nødvendige funksjoner for å tegne et diagram. Det siste ordet representerer stilen på diagrammet du kommer til å skape

Trinn 11:.. Variabler

Dette er de variablene vi vil bruke, forklarte i kommentarfeltet
Var container : MovieClip = this.createEmptyMovieClip ("chartContainer", 1); //Oppretter en MC som vil lagre graphvar xmlFile: XML = new XML (); //XML objekt som vil lagre XML filevar basicChart: Column3DChart; //En forekomst av grafen du velger
Trinn 12: Load XML

Denne koden laster inn XML-fil og en funksjon skaper grafen når lasting skjer
xmlFile.load ("data. .xml "); //Skriv din xml fil herexmlFile.onLoad = function (): void {basicChart = new Column3DChart (container, 1, 450, 325, 75, 0, false, "EN", "noScale"); //Alternativer forklart senere i tut basicChart.setXMLData (xmlFile); //XML må være et XML-objekt basicChart.render (); //Gjengir diagrammet};

Dette er all koden du trenger for å lage en enkel graf. Som du kan se grafen konstruktøren har flere parametre, vil dette bli forklart i neste trinn

Trinn 13:. Parametere

Hver kartlegge du oppretter ved hjelp Action trenger noen parametere, disse parametrene er :

targetMC: Movie clip henvisning der kartet vil lage sine egne filmklipp

dybde. Dybde inne forelder filmklipp der kartet vil lage sine egne filmklipp.

bredde. Bredde på diagrammet

høyde. Høyde på diagrammet

x: x Plassering av diagrammet

y:. y Plassering av diagrammet.

debugMode: boolsk verdi som angir om diagrammet er i feilsøkingsmodus

lang:. 2 Letter ISO koden for språket i søknaden meldinger. Avhenger av data du har matet

scaleMode: Scale-modus av filmen - noScale eller exactFit

Trinn 14:.. Grid Component

FusionCharts Grid Component hjelper du vise enkelt serie FusionCharts XML-data i et tabellformat. Du kan kombinere rutenettet komponent med en enkelt serie diagrammet for å danne en god jakt combo

Du kan vise et rutenett Component uten behov for en graf ved å legge denne Javascript HTML.
≪ html > < head > < script language = "Javascript" src = "../FusionCharts /FusionCharts.js" > < /script > < /head > < body > < div id = "chartdiv" align = "center" > Rutenettet vil vises i denne DIV. < /div > < script type = "text /javascript" > Var myChart = nye FusionCharts ("../FusionCharts /SSGrid.swf", "myGrid1", "300", "200", "0", "0"); myChart.setDataURL ("Data.xml"); myChart.render ("chartdiv"); < /script > < /body > < /html >

Dette bruker FusionChart Javascript-fil for å ringe SSGrid SWF, og lage et rutenett som ser omtrent slik ut:

Hvis du vil bruke et rutenett, men også viser en graf, endre HTML-fil for å se slik ut:
< p > < html > < head > < script language = "Javascript" src = "../FusionCharts /FusionCharts.js" > < /script > < /head > < body > < div id = "chartDiv" align = "center" > Diagrammet vises i denne DIV. < /div > < script type = "text /javascript" > Var myChart = nye FusionCharts ("../FusionCharts /Column2D.swf", "myChart", "300", "250", "0", "0"); myChart.setDataURL ("Data.xml"); myChart.render ("chartDiv"); < /script > < div id = "gridDiv" align = "center" > Rutenettet vises i denne DIV. < /div > < script type = "text /javascript" > Var myGrid = nye FusionCharts ("../FusionCharts /SSGrid.swf", "myGrid1", "300", "200", "0", "0"); myGrid.setDataURL ("Data.xml"); myGrid.render ("gridDiv"); < /script > < /body > < /html >

Du vil ende opp med noe som dette:

Du kan bruke de samme XML-data med rutenettet og grafen

Trinn 15: Eksport Graph data <. br>

FusionCharts lar deg eksportere data fra listene i CSV-format. I Flash, kan dette gjøres ved hjelp av Context Menu

Åpne yout data XML-fil og legge den showExportDataMenuItem alternativet
<..? Xml version = "1.0" > < diagram showBorder = ' 0 'bgAlpha =' 0,0 'palett =' 1 'caption =' mest populære nettleserne - November 2009 'showPercentageValues ​​=' 1 'showExportDataMenuItem =' 1 '> ... < /kart >

Når dette alternativet er lagt til, et nytt element er vist i hurtigmenyen:

Etiketten av dette menyvalget kan tilpasses ved å sette:
< diagram ... exportDataMenuItemLabel = 'Kopier dataene fra denne tabellen' ... >
Konklusjon

FusionCharts er et nyttig verktøy for å presentere dataene dine i en pen måte, og uten behov for å opprette alt fra bunnen av. Eksperimenter med ulike typer grafer!

Takk for lesing! Anmeldelser