Generare grafici in Flash utilizzando FusionCharts

Un grafico è una rappresentazione visiva dei dati. I dati possono essere rappresentati da simboli, ad esempio barre in un grafico a barre, linee in un grafico a linee o sezioni in un grafico a torta. Un grafico può rappresentare dati numerici tabulari, funzioni o alcuni tipi di strutture qualitative.

FusionCharts ti aiuta a creare grafici Flash animati e interattivi per applicazioni web e desktop. Ravviva le tue applicazioni convertendo dati monotoni in immagini eccitanti.

In questo tutorial impareremo come usare FusionCharts per creare diversi tipi di grafici usando ActionScript e XML.

Passaggio 1: cos'è FusionCharts?

FusionCharts è un componente di creazione di grafici flash che può essere utilizzato per il rendering di grafici animati e guidati dai dati nelle applicazioni e presentazioni Web e desktop. Funzionalità intelligenti, intuitive e innovative animano le tue applicazioni web convertendo dati monotoni in immagini emozionanti.

Può anche essere utilizzato con qualsiasi linguaggio di scripting e database. Viene utilizzato con ASP.NET, ASP, PHP, JSP, ColdFusion, Ruby on Rails, Python, semplici pagine HTML o anche presentazioni PowerPoint, in questo tutorial ci concentreremo sull'utilizzo di Flash.

Passaggio 2: dove posso ottenere FusionCharts?

È possibile scaricare 3 diverse versioni di FusionCharts.

Una versione gratuita codificata in Flash MX (ActionScript1), una versione di prova completamente funzionale nella pagina di download oppure è possibile acquistare una licenza da $ 69 (ActionScript2) o la versione Flex che utilizza ActionScript3 (sebbene non sia compatibile con Flash).

In questo tutorial useremo la versione di ActionScript 2.

Step 3: Pro / Contro

Ci sono sempre pro e contro quando si utilizzano componenti di terze parti per sviluppare le proprie applicazioni.

Professionisti:

• Facile da implementare.
• Varietà di stili di grafici da scegliere.
• Compatibile XML.
• Grafici animati e interattivi.

Contro:

• A seconda della licenza che ti serve, può essere costoso.
• Nessuna versione di ActionScript 3 per Flash.

Passaggio 4: come funziona

È possibile utilizzare due metodi per creare un grafico, uno utilizzando i file SWF contenuti nel file Grafici cartella e HTML, oppure se acquisti la licenza Developer o Enterprise, puoi utilizzare direttamente le classi.

Useremo entrambi i metodi in questo tut.

Passaggio 5: utilizzo dei file SWF

Per poter utilizzare il metodo dei file SWF ci servirà un file XML e un file HTML in cui passeremo l'XML come argomento al file SWF usando FlashVars.

Iniziamo con l'XML.

Passaggio 6: XML

Apri il tuo editor XML o di testo preferito e inizia a scrivere:

Questo codice indica al grafico SWF quali dati utilizzare e imposta alcune opzioni. È possibile identificare a prima vista i dati che verranno utilizzati.

Vedrai una descrizione migliore delle opzioni nella documentazione inclusa nel download.

Passaggio 7: grafico SWF

FusionCharts ha una grande collezione di stili di grafici. Sfoglia il Grafici cartella nell'origine FusionCharts, selezionare uno stile di grafico e copiarlo nella posizione del progetto.

In questo esempio ho usato lo stile BasicChart.

Passaggio 8: HTML

Nel tuo HTML o editor di testo scrivi quanto segue:

Questo può sembrare complicato ma è più semplice di quanto pensi. Il markup sopra è una struttura html di base e un tag oggetto, se si utilizza un editor dedicato questo codice verrà generato automaticamente quando viene inserito un oggetto Flash, quindi è possibile aggiungere o modificare il parametro FlashVars per aggiungere l'URL dei dati XML file e la larghezza e l'altezza della tua applicazione.

Ora puoi testare il grafico. Aprire il file html nel browser e vederlo funzionare.

Passaggio 9: utilizzo di ActionScript

Se hai acquistato la licenza Developer o Enterprise puoi utilizzare direttamente le classi per creare un grafico.

Crea un nuovo file Flash (ActionScript 2) e salvalo come BasicChart.fla.

Passaggio 10: importazione della classe

Apri il pannello Azioni (Opzione + F9) e scrivi questa riga di codice:

 import com.fusioncharts.core.charts.Column3DChart;

Questo importerà le funzioni necessarie per disegnare un grafico. L'ultima parola rappresenta lo stile del grafico che stai per creare.

Passaggio 11: variabili

Queste sono le variabili che useremo, spiegate nei commenti.

 var container: MovieClip = this.createEmptyMovieClip ("chartContainer", 1); // Crea un MC che memorizzerà il grafico var xmlFile: XML = new XML (); // L'oggetto XML che memorizzerà il file XML var basicChart: Column3DChart; // Un'istanza del grafico che scegli

Passaggio 12: caricamento XML

Questo codice carica il file XML e una funzione crea il grafico al termine del caricamento.

 xmlFile.load ( "data.xml"); // Scrivi qui il tuo file xml xmlFile.onLoad = function (): Void basicChart = new Column3DChart (container, 1, 450, 325, 75, 0, false, "EN", "noScale"); // Opzioni spiegate più avanti nel tut basicChart.setXMLData (xmlFile); // L'XML deve essere un oggetto XML basicChart.render (); // esegue il rendering del grafico;

Questo è tutto il codice che ti servirà per creare un grafico di base. Come puoi vedere il costruttore del grafico ha diversi parametri, questo verrà spiegato nel prossimo passaggio.

Passaggio 13: Parametri

Ogni grafico che crei usando ActionScript avrà bisogno di alcuni parametri, questi parametri sono:

• targetMC: Riferimento di clip filmato in cui il grafico creerà i propri filmati.
• profondità: Profondità nel filmato principale in cui il grafico creerà i propri filmati.
• larghezza: Larghezza del grafico.
• altezza: Altezza del grafico.
• X: x Posizione del grafico.
• y: y Posizione del grafico.
• modalità di debug: Valore booleano che indica se il grafico è in modalità di debug.
• Lang: Codice ISO 2 lettere per la lingua dei messaggi dell'applicazione. Dipende dai dati che hai nutrito.
• scaleMode: Modalità di scala del film - noScale o exactFit.

Passaggio 14: componente griglia

FusionCharts Grid Component consente di visualizzare dati XML FusionCharts serie singola in un formato tabulare. Puoi combinare il componente della griglia con qualsiasi grafico a serie singola per formare una combo di bell'aspetto.

Puoi visualizzare un componente Grid senza la necessità di un grafico aggiungendo questo Javascript al tuo HTML:

      
 La griglia apparirà all'interno di questo DIV. 
   

Questo utilizza il file javascript di FusionChart per chiamare SSGrid Swf e creare una griglia simile a questa:

Se si desidera utilizzare una griglia ma anche mostrare un grafico, modificare il file HTML in modo che assomigli a questo:

     
Il grafico apparirà all'interno di questo DIV. 
  
La griglia apparirà all'interno di questo DIV. 
   

Finirai con qualcosa di simile a questo:

È possibile utilizzare gli stessi dati XML con la griglia e il grafico.

Passaggio 15: esportazione dei dati del grafico

FusionCharts ti consente di esportare i dati dai tuoi grafici in formato CSV. In Flash, questo può essere fatto usando il menu contestuale.

Apri il tuo file XML di dati e aggiungi l'opzione showExportDataMenuItem.

 ... 

Quando viene aggiunta questa opzione, viene visualizzato un nuovo elemento nel menu di scelta rapida:

L'etichetta di questa voce di menu può essere personalizzata impostando:

Conclusione

FusionCharts è uno strumento utile per rappresentare graficamente i tuoi dati in un bell'aspetto e senza la necessità di creare tutto da zero. Sperimenta con i diversi tipi di grafici!

Grazie per aver letto!