Share
Et diagram er en visuell representasjon av data. Dataene kan representeres av symboler, for eksempel barer i et linjediagram, linjer i et linjediagram eller skiver i et kakediagram. Et diagram kan representere tabulære numeriske data, funksjoner eller noen slags kvalitative strukturer.
FusionCharts hjelper deg med å lage animerte og interaktive Flash-diagrammer for web- og skrivebordsprogrammer. Det lever opp dine applikasjoner ved å konvertere monotone data til spennende visualer.
I denne opplæringen lærer vi hvordan du bruker FusionCharts til å lage forskjellige typer grafer ved hjelp av ActionScript og XML.
FusionCharts er en flash karting komponent som kan brukes til å gjengi data-drevet og animert diagrammer i din web og desktop applikasjoner og presentasjoner. Det er smart, brukervennlig og nyskapende funksjoner som gir levende webapplikasjoner ved å konvertere monotone data til spennende visualer.
Den kan også brukes med alle skriptspråk og database. Den brukes sammen med ASP.NET, ASP, PHP, JSP, ColdFusion, Ruby on Rails, Python, enkle HTML-sider eller PowerPoint-presentasjoner. I denne veiledningen vil vi fokusere i Flash-bruken.
Du kan laste ned 3 forskjellige versjoner av FusionCharts.
En gratis versjon kodet i Flash MX (ActionScript1), en fullstendig funksjonell prøveversjon på nedlastingssiden, eller du kan kjøpe en lisens fra $ 69 (ActionScript2) eller Flex-versjonen som bruker ActionScript3 (selv om den ikke er kompatibel med Flash).
I denne opplæringen bruker vi ActionScript 2-versjonen.
Det er alltid fordeler og ulemper når du bruker tredjepartskomponenter til å utvikle dine applikasjoner.
Pros:
Ulemper:
Du kan bruke to metoder for å lage en graf, en som bruker SWFs filer i diagrammer mappe og HTML, eller hvis du kjøper Developer- eller Enterprise-lisensen, kan du bruke klassene direkte.
Vi bruker begge metodene i denne tut.
For å kunne bruke SWF-filmetoden trenger vi en XML-fil og en HTML-fil der vi skal sende XML som et argument til SWF ved hjelp av FlashVars.
La oss starte med XML.
Åpne din favoritt XML eller tekstredigerer og begynn å skrive:
Denne koden forteller Graph SWF hvilke data som skal brukes og angir noen alternativer. Du kan ved første øyekast identifisere dataene som skal brukes.
Du får en bedre beskrivelse av alternativene i dokumentasjonen som følger med nedlastingen.
FusionCharts har en flott samling av diagramstiler. Bla gjennom til diagrammer mappe i FusionCharts-kilden, velg en grafestil og kopier den til prosjektstedet ditt.
I dette eksemplet brukte jeg BasicChart-stilen.
Skriv inn følgende i HTML- eller tekstredigeringsprogrammet:
BasicChart Eksempel
Dette kan virke komplisert, men det er enklere enn du tror. Markeringen over det er en grunnleggende HTML-struktur og en objekt-kode. Hvis du bruker en dedikert editor, vil denne koden automatisk bli generert når et Flash-objekt er satt inn, og du kan legge til eller redigere FlashVars-parameteren for å legge til nettadressen til XML-dataene dine. fil og bredden og høyden på søknaden din.
Nå kan du teste grafen. Åpne html-filen i nettleseren din og se den fungerer.
Hvis du kjøpte Developer- eller Enterprise-lisensen, kan du bruke klassene direkte til å lage en graf.
Opprett en ny Flash-fil (ActionScript 2) og lagre den som BasicChart.fla.
Åpne Handlingspanelet (Alternativ + F9) og skriv denne linjen med kode:
importer com.fusioncharts.core.charts.Column3DChart;
Dette vil importere de nødvendige funksjonene for å tegne et diagram. Det siste ordet representerer stilen på diagrammet du skal lage.
Dette er variablene vi skal bruke, forklart i kommentarene.
Accentsconagua
var container: MovieClip = this.createEmptyMovieClip ("chartContainer", 1); // Oppretter en MC som lagrer grafen var xmlFile: XML = new XML (); // XML-objektet som vil lagre XML-filen var basicChart: Column3DChart; // En forekomst av grafen du velger Denne koden laster XML-filen, og en funksjon lager grafen når lastingen er ferdig.
xmlFile.load ( "data.xml"); // Skriv din xml-fil her xmlFile.onLoad = function (): Gyldig basicChart = new Column3DChart (container, 1, 450, 325, 75, 0, false, "NO", "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 grunnleggende graf. Som du kan se grafkonstruktøren har flere parametere, vil dette bli forklart i neste trinn.
Hvert diagram du lager ved hjelp av ActionScript, trenger noen parametre, disse parametrene er:
FusionCharts Grid Component hjelper deg med å vise enkeltserie FusionCharts XML-data i et tabulært format. Du kan kombinere gridkomponenten med et enkelt seriekart for å danne en flott kombinasjon.
Du kan vise en grid-komponent uten behov for en graf ved å legge til Javascript til HTML-koden din:
Rutenettet vil vises i dette DIV.
Dette bruker FusionCharts javascript-fil for å ringe SSGrid Swf, og opprette et rutenett som ligner dette:
Hvis du vil bruke et rutenett, men også vise en graf, endrer du HTML-filen slik at den ser slik ut:
Diagrammet vil vises i denne DIV.Rutenettet vil vises i dette DIV.
Du vil ende opp med noe slikt:
Du kan bruke de samme XML-dataene med rutenettet og grafen.
FusionCharts lar deg eksportere data fra diagrammer i CSV-format. I Flash kan dette gjøres ved hjelp av kontekstmenyen.
Åpne XML-filen for data og legg til alternativet ShowExportDataMenuItem.
...
Når dette alternativet er lagt til, vises et nytt element i kontekstmenyen:
Etiketten på dette menyelementet kan tilpasses ved å sette inn:
FusionCharts er et nyttig verktøy for å grafere dataene dine på en god måte og uten å måtte lage alt fra grunnen av. Eksperimenter med de forskjellige typene grafer!
Takk for at du leste!
