I componenti Flash sono sempre stati i componenti più visivamente gratificanti sul web. Con Flex, Flash ha raggiunto un livello completamente nuovo di design dell'interfaccia e l'ha reso notevolmente più semplice. Tuttavia, Flex manca della gamma di opzioni di personalizzazione, stili e animazioni fornite da diversi 3rd componenti del party. Tra questi si possono citare FusionCharts, che fornisce un modulo solo per Flex. Per questo esempio, useremo questa suite per creare un grafico a bolle in Flex.
Impostare
Prima di configurare il modulo FusionCharts per Flex, potrebbe interessarti sapere come funziona. Tecnicamente, FusionCharts è scritto in AS2 e non può essere incorporato direttamente nell'ambiente Flex. Quindi utilizza FlashInterface per comunicare con l'ambiente di runtime Flex (AVM2). Se vuoi saperne di più su come funziona, puoi vedere la loro documentazione su www.fusioncharts.com/flex/docs.
Quindi, come si configura FusionCharts per Flex? È abbastanza facile, dato che FusionCharts per Flex si presenta come un modulo di libreria SWC per Flex. Il modulo può essere completamente integrato con l'applicazione Flex Builder o essere utilizzato come libreria esterna se qualcuno desidera utilizzare l'SDK gratuito. L'effettiva installazione è un semplice processo di copia-incolla che può essere eseguito in 3 passaggi:
Ottieni il modulo FusionCharts per Flex ed estrai l'archivio. La posizione in cui è stato estratto l'archivio di FusionCharts per Flex verrà in seguito denominata DISTRIBUTION_ROOT. È possibile scaricare la versione di valutazione da www.fusioncharts.com/flex/Download.asp.
Creare un nuovo progetto Flex con il quale si desidera associare il modulo FusionCharts per Flex.
Copia il FusionCharts.swc Shockwave Component presente a DISTRIBUTION_ROOT / Grafici a PROJECT_ROOT / libs cartella…
Copia il FusionCharts cartella da DISTRIBUTION_ROOT / Grafici al PROJECT_ROOT / src cartella. Questa cartella contiene tutti gli oggetti Flash del grafico.
L'immagine seguente mostra la struttura della cartella risultante dopo aver incorporato il modulo FusionCharts per Flex. Abbiamo denominato il progetto come FusionCharts, quindi un file MXML con lo stesso nome è presente per impostazione predefinita:
Creazione del grafico a bolle
Quindi, ora che abbiamo configurato la libreria FusionCharts, possiamo entrare direttamente nella creazione di un grafico a bolle.
Per quelli di voi che non hanno familiarità con il termine "grafico a bolle", sono grafici che sono tracciati come qualsiasi altro insieme di dati continui.
Solo, hanno la capacità di rappresentare una dimensione extra di dati. Non solo, possono essere utilizzati anche per confrontare più set di dati.
Tracciamo il prezzo di costo rispetto al prezzo di vendita di diversi frutti con lo z-index che rappresenta la quantità di ciascun frutto. Quindi, senza ulteriori indugi, iniziamo:
Passaggio 1: dichiarazione del tag FusionCharts
Per prima cosa dobbiamo dichiarare il FusionCharts tag all'interno del MXML. I tag hanno il seguente aspetto.
Per utilizzare strutture di dati Flex come ArrayCollections, XMLList ecc., Dobbiamo anche dichiarare il tag secondario FCChartData. Questo tag ci consentirà di associare dati di plot, proprietà del grafico e stile all'oggetto FusionCharts.
Passaggio 2: definizione delle proprietà del grafico
Ora creiamo un oggetto ArrayCollection per descrivere le proprietà di base del grafico. Chiameremo il nostro ArrayCollection chartParam. La dichiarazione è la seguente:
Se si nota attentamente, ogni elemento dell'array è un oggetto che risulta essere un elenco di proprietà e i rispettivi valori. Ad esempio, la didascalia del grafico è dichiarata come caption: 'Annual Sales Chart'. Quindi, senza sapere nulla di XML FusionCharts, possiamo aggiungere o rimuovere proprietà al nostro oggetto grafico. Se vuoi conoscere le diverse proprietà disponibili, puoi visitare il riferimento del grafico a bolle.
Passaggio 3: fornitura dei dati del grafico
Dobbiamo anche dichiarare il set di dati per questo grafico. Il set di dati può essere dichiarato come segue:
Se osserviamo da vicino, ci sono un totale di tre tipi di oggetti all'interno di ArrayCollection.
Innanzitutto, il label: '5', x: '5', ... la dichiarazione è necessaria per definire le etichette dell'asse x.
Dopo questo, il seriesName: '1996', colour: '227ed5', ... è usato per dichiarare ogni nuova serie di dati.
E infine, i singoli dati sono dichiarati come x: '8', y: '15 ', z:' 33 ', .... I tasti x, yez sono gli indici degli assi per questo particolare set di dati.
Passaggio 4: Associazione dei dati Flex a oggetti FusionCharts
Ora che abbiamo dichiarato tutti i dati necessari per il nostro grafico a bolle, dovremmo associare questi dati al nostro oggetto FusionCharts. Come accennato in precedenza, tutte le fonti di dati Flex sono legate agli attributi di FCChartData etichetta. Dopo aver vincolato i parametri del grafico e l'origine dati, l'origine dovrebbe essere la seguente:
Passaggio 5: esecuzione del codice
È finalmente il momento di dare l'esempio. È possibile ottenere il codice sorgente completo per questo esempio nel pacchetto sorgente. Imposta la libreria FusionCharts come descritto nella sezione precedente e quindi compila il file bubble_example1.mxml. Esegui il file SWF risultante e dovresti vedere un grafico come segue:
Passaggio 6: aggiunta di linee di tendenza
Ora che abbiamo visto come rappresentare i set di dati per i grafici, rendiamolo più interessante aggiungendo delle linee di tendenza. In effetti aggiungeremo delle zone di tendenza alle nostre carte piuttosto che alle linee. Come prima, dovremmo creare una nuova ArrayCollection per i nostri oggetti trend-line. Il seguente codice ci mostra come farlo:
Ogni oggetto della zona di tendenza dichiara semplicemente che è il punto di partenza, il punto finale e il fatto che si tratta di una zona non di una linea e di un colore. Inoltre abbiamo la possibilità di impostare proprietà grafiche come colore, alfa ecc.
Ancora una volta, come prima aggiungeremo un nuovo attributo FChTrendlines a noi FCChartData tag e associare i dati ad esso. Il FChTrendline attributo dichiara che si tratta di zone di tendenza orizzontali, anche le zone di tendenza verticali possono essere dichiarate, la fonte modificata sarebbe:
È possibile ottenere il codice sorgente per il grafico modificato dal bubble_example2.mxml file nel pacchetto sorgente. Se compili ed esegui il file, il nuovo grafico sarà simile a questo-
Passaggio 7: aggiunta di stili
È il momento di dargli il via e davvero arricchire il tuo grafico con stili e animazioni. Aggiungere stili è abbastanza semplice, in primo luogo, sì, hai indovinato, crea una nuova ArrayCollection. All'interno della matrice per gli stili, dobbiamo dichiarare due tipi di oggetti:
Stile oggetto per definire diversi stili
Un oggetto applicazione per mappare stili su vari oggetti
Basta guardare il codice, se questo sembra un po 'confuso:
Questo tipo di dichiarazioni di stile sono vantaggiose per il fatto che possono essere riutilizzate e utilizzate su più oggetti. Nel nostro caso abbiamo applicato lo stesso stile di animazione a entrambe le nostre zone di tendenza. Abbiamo anche dichiarato uno stile per rendere più grande la didascalia.
Il name: 'CanvasAnim', digita: 'animation', ...l'oggetto è usato per dichiarare gli stili. Il nome attributo rappresenta il nome dell'oggetto e il genere l'attributo rappresenta il tipo di stile. Questi sono seguiti da attributi pertinenti a un particolare tipo di stile. Segue la mappatura degli stili a particolari oggetti grafici. Il toObject: dichiarazione "Caption", stili: "CaptionSize" Esattamente questo. È abbastanza ovvio che il stile attributo è per il nome dello stile e il obiettare definisce il tipo di oggetto applicato a.
Associa la nuova matrice di stili al nostro oggetto grafico come prima
È possibile ottenere il codice modificato dal bubble_example3.mxml file nell'archivio di origine. L'applicazione risultante sarebbe simile a:
Passaggio 8: convertirlo in un grafico di stampa
Convertire un grafico in un altro grafico è davvero facile. Tutto quello che devi fare è
Cambia il tipo di grafico.
Assicurarsi che i dati correnti siano conformi ai dati del nuovo tipo di grafico. In caso contrario, modificalo di conseguenza.
Apporta modifiche visive per adattarsi al tuo nuovo tipo di grafico.
Per cambiare il tipo di grafico, basta semplicemente impostare il FCChartType attribuire a spargimento.
Successivamente cancelliamo lo z-index per rendere i dati del grafico conformi al tipo di dati del grafico a dispersione. I dati si trasformerebbero come:
È possibile ottenere il codice modificato dal scatter_example.mxml file nell'archivio di origine. L'applicazione risultante sarebbe simile a:
conclusioni
Quindi abbiamo finalmente finito con la costruzione del nostro grafico. Ora puoi uscire e diffondere le tue applicazioni FusionCharts nel mondo. Per lo più, la creazione di grafici con FusionCharts è piuttosto semplice. Con i tag personalizzati e l'associazione dati Flex fornita da FusionCharts, è davvero il componente che dovresti utilizzare per le tue applicazioni Flex.
Seguici su Twitter o iscriviti al feed RSS di NETTUTS per ulteriori tuts e articoli di sviluppo web giornalieri.
Share
Accentsconagua
