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 Vi ll bruke begge metodene i denne tut 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 Åpne din favoritt XML eller tekst editor og start skriving:? 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 FusionCharts har en stor samling av diagramstiler. Bla til Charts I dette eksempelet jeg brukte BasicChart stil. I HTML eller tekst editor skriver følgende: 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 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 Åpne Handlinger panelet ( Tilvalg + F9) og skrive denne linjen med kode: Dette er de variablene vi vil bruke, forklarte i kommentarfeltet Denne koden laster inn XML-fil og en funksjon skaper grafen når lasting skjer 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 Hver kartlegge du oppretter ved hjelp Action trenger noen parametere, disse parametrene er : 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. 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: Du vil ende opp med noe som dette: Du kan bruke de samme XML-data med rutenettet og grafen 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 Når dette alternativet er lagt til, et nytt element er vist i hurtigmenyen: Etiketten av dette menyvalget kan tilpasses ved å sette: 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
mappe og HTML, eller hvis du kjøper Developer eller Enterprise-lisens, kan du bruke klassene direkte.
Trinn 5:. Bruke SWF-filer
Trinn 6:. XML
< 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 >
Trinn 7:.. Graph SWF
mappe i FusionCharts kilde, velger du en graf stil og kopiere den til prosjektsted.
Trinn 8: HTML
< 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 >
Trinn 9:.. Ved hjelp av Action
Trinn 10:. Importere klasse
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
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
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};
Trinn 13:. Parametere
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
≪ 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 >
< 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 >
Trinn 15: Eksport Graph data <. br>
<..? Xml version = "1.0" > < diagram showBorder = ' 0 'bgAlpha =' 0,0 'palett =' 1 'caption =' mest populære nettleserne - November 2009 'showPercentageValues =' 1 'showExportDataMenuItem =' 1 '> ... < /kart >
< diagram ... exportDataMenuItemLabel = 'Kopier dataene fra denne tabellen' ... >
Konklusjon