Grafieken genereren in Flash met behulp van FusionCharts

Een diagram is een visuele weergave van gegevens. De gegevens kunnen worden weergegeven door symbolen, zoals staven in een staafdiagram, lijnen in een lijndiagram of segmenten in een cirkeldiagram. Een diagram kan tabulaire numerieke gegevens, functies of sommige soorten kwalitatieve structuren vertegenwoordigen.

Met FusionCharts kunt u geanimeerde en interactieve Flash-diagrammen maken voor web- en desktoptoepassingen. Het maakt uw toepassingen levendig door monotone gegevens om te zetten in opwindende beelden.

In deze tutorial zullen we leren hoe je FusionCharts kunt gebruiken om verschillende soorten grafieken te maken met behulp van ActionScript en XML.

Stap 1: Wat is FusionCharts?

FusionCharts is een flash-diagramcomponent die kan worden gebruikt om gegevensgestuurde en geanimeerde diagrammen weer te geven in uw web- en desktoptoepassingen en -presentaties. Het is slim, gebruiksvriendelijke en innovatieve functies verlevendigen uw webapplicaties door monotone gegevens om te zetten in opwindende beelden.

Het kan ook worden gebruikt met elke scripttaal en database. Het wordt gebruikt met ASP.NET, ASP, PHP, JSP, ColdFusion, Ruby on Rails, Python, eenvoudige HTML-pagina's of zelfs PowerPoint-presentaties, in deze tutorial zullen we ons concentreren in het gebruik van Flash.

Stap 2: Waar kan ik FusionCharts krijgen?

U kunt 3 verschillende versies van FusionCharts downloaden.

Een gratis versie gecodeerd in Flash MX (ActionScript1), een volledig functionele proefversie op de downloadpagina of u kunt een licentie kopen van $ 69 (ActionScript2) of de Flex-versie die ActionScript3 gebruikt (hoewel deze niet compatibel is met Flash).

In deze zelfstudie gebruiken we de ActionScript 2-versie.

Stap 3: Voors / tegens

Er zijn altijd voor- en nadelen wanneer u componenten van derden gebruikt om uw toepassingen te ontwikkelen.

Voors:

• Eenvoudig te implementeren.
• Verschillende grafische stijlen om uit te kiezen.
• XML-compatibel.
• Geanimeerde en interactieve grafieken.

nadelen:

• Afhankelijk van de licentie die u nodig heeft, kan deze prijzig zijn.
• Geen ActionScript 3-versie voor Flash.

Stap 4: Hoe het werkt

U kunt twee methoden gebruiken om een ​​grafiek te maken, één met behulp van de SWF-bestanden in de Grafieken map en HTML, of als u de Developer- of Enterprise-licentie koopt, kunt u de klassen rechtstreeks gebruiken.

We zullen beide methoden gebruiken in deze tut.

Stap 5: De SWF-bestanden gebruiken

Om de SWF-bestandsmethode te kunnen gebruiken, hebben we een XML-bestand en een HTML-bestand nodig, waar we de XML als argument doorgeven aan de SWF met behulp van FlashVars.

Laten we beginnen met de XML.

Stap 6: XML

Open uw favoriete XML- of teksteditor en begin met schrijven:

Deze code vertelt de grafische SWF welke gegevens moeten worden gebruikt en stelt enkele opties in. U kunt op het eerste gezicht de gegevens identificeren die zullen worden gebruikt.

U krijgt een betere beschrijving van de opties in de documentatie bij uw download.

Stap 7: Graph SWF

FusionCharts heeft een grote verzameling diagramstijlen. Blader naar de Grafieken map in de FusionCharts-bron, selecteer een grafiekstijl en kopieer deze naar uw projectlocatie.

In dit voorbeeld heb ik de BasicChart-stijl gebruikt.

Stap 8: HTML

Noteer het volgende in uw HTML- of teksteditor:

Dit lijkt misschien ingewikkeld, maar het is eenvoudiger dan je denkt. De opmaak hierboven is een basale html-structuur en een object-tag. Als u een speciale editor gebruikt, wordt deze code automatisch gegenereerd wanneer een Flash-object wordt ingevoegd. Vervolgens kunt u de FlashVars-parameter toevoegen of bewerken om de URL van uw XML-gegevens toe te voegen bestand en de breedte en hoogte van uw toepassing.

Nu kunt u de grafiek testen. Open het html-bestand in uw browser en zie het werken.

Stap 9: ActionScript gebruiken

Als u de ontwikkelaars- of bedrijfslicentie hebt aangeschaft, kunt u de klassen rechtstreeks gebruiken om een ​​grafiek te maken.

Maak een nieuw Flash-bestand (ActionScript 2) en sla het op als BasicChart.fla.

Stap 10: De klasse importeren

Open het deelvenster Handelingen (optie + F9) en schrijf deze regel code:

 import com.fusioncharts.core.charts.Column3DChart;

Dit zal de nodige functies importeren om een ​​grafiek te tekenen. Het laatste woord vertegenwoordigt de stijl van de grafiek die u gaat maken.

Stap 11: Variabelen

Dit zijn de variabelen die we zullen gebruiken, uitgelegd in de opmerkingen.

 var container: MovieClip = this.createEmptyMovieClip ("chartContainer", 1); // Creëert een MC die de grafiek zal opslaan var xmlFile: XML = new XML (); // Het XML-object dat het XML-bestand zal opslaan var basicChart: Column3DChart; // Een exemplaar van de grafiek die u kiest

Stap 12: XML laden

Deze code laadt het XML-bestand en een functie maakt de grafiek wanneer het laden is voltooid.

 xmlFile.load ( "data.xml"); // Schrijf hier uw xml-bestand op xmlFile.onLoad = function (): Void basicChart = new Column3DChart (container, 1, 450, 325, 75, 0, false, "EN", "noScale"); // Opties later uitgelegd in de tut basicChart.setXMLData (xmlFile); // De XML moet een XML-object basicChart.render () zijn; // Geeft het diagram weer;

Dit is alle code die u nodig hebt om een ​​basisgrafiek te maken. Zoals u kunt zien heeft de constructor van de grafiek verschillende parameters, dit zal in de volgende stap worden uitgelegd.

Stap 13: Parameters

Elke grafiek die u met behulp van ActionScript maakt, heeft enkele parameters nodig, deze parameters zijn:

• targetMC: Referentie van de filmclip waarin het diagram zijn eigen filmclips maakt.
• diepte: Diepte binnen de bovenliggende filmclip waarin de grafiek zijn eigen filmclips zal maken.
• breedte: Breedte van de kaart.
• hoogte: Hoogte van de kaart.
• X: x Positie van de kaart.
• Y: y Positie van de kaart.
• debugMode: Booleaanse waarde die aangeeft of het diagram zich in de foutopsporingsmodus bevindt.
• LANG: 2 Letter ISO-code voor de taal van applicatie-berichten. Afhankelijk van de gegevens die u heeft ingevoerd.
• scaleMode: Schaalmodus van de film - noScale of exactFit.

Stap 14: rastercomponent

FusionCharts Grid Component helpt u FusionCarts XML-gegevens uit een reeks weer te geven in een tabel. U kunt de rastercomponent combineren met een enkel seriegrafiek om een ​​goed uitziende combo te vormen.

U kunt een rasteronderdeel weergeven zonder dat u een grafiek nodig hebt door deze JavaScript aan uw HTML toe te voegen:

      
 Het raster verschijnt in deze DIV. 
   

Dit gebruikt het JavaScript-bestand van de FusionChart om de SSGrid Swf aan te roepen en een raster te maken dat er ongeveer zo uitziet:

Als u een raster wilt gebruiken maar ook een grafiek wilt weergeven, wijzigt u het HTML-bestand om er als volgt uit te zien:

     
Het diagram verschijnt in deze DIV. 
  
Het raster verschijnt in deze DIV. 
   

Je krijgt zoiets als dit:

U kunt dezelfde XML-gegevens gebruiken met het raster en de grafiek.

Stap 15: Graph-gegevens exporteren

Met FusionCharts kunt u gegevens uit uw grafieken exporteren in CSV-indeling. In Flash kan dit via het contextmenu worden gedaan.

Open uw XML-gegevensbestand en voeg de optie showExportDataMenuItem toe.

 ... 

Wanneer deze optie wordt toegevoegd, wordt een nieuw item weergegeven in het contextmenu:

Het label van dit menu-item kan worden aangepast door in te stellen:

Conclusie

FusionCharts is een handig hulpmiddel om uw gegevens goed weer te geven en zonder dat u alles vanuit het niets hoeft te creëren. Experimenteer met de verschillende soorten grafieken!

Bedankt voor het lezen!