Crea grafici interattivi in ​​Ionic 2

Sep 13, 2025
Come si fa

Quando lavori in una piccola squadra, tende ad essere difficile scrivere e mantenere il codice separato per Android, IOS e Windows. Ecco dove i framework ibridi come Ionic entrano nella foto. Non ci permettono solo di scrivere un singolo pezzo di codice che può essere utilizzato su tutte e tre le piattaforme, ma significano che possiamo farlo usando la nostra pila tecnologica esistente.

In questo tutorial esploremo come affrontare un compito comune come la visualizzazione dei dati in Ionic 2, uno dei framework di app ibridi più promettenti là fuori. Userò la libreria fusionCHarts JavaScript Chart Biblioteca (fusioncharts.com), per questo progetto in quanto offre una grande libreria di oltre 90 grafici, è compatibile con ogni dispositivo e browser, ed è molto facile da lavorare.

Impostazione di Ionic 2

Per sviluppare app con Ionic 2, è necessario node.js versione 4+ e NPM in esecuzione sul tuo sistema operativo. Puoi scaricare il pacchetto node.js da nodejs.org/en/download. e NPM verranno installati insieme ad esso. Se hai già una versione diversa di Node.js in esecuzione e vuoi eseguire anche la versione 4+, puoi farlo attraverso Nodo Versione gestore. .

Successiva è necessario installare ionic 2 beta utilizzando NPM. Per fare questo, correre NPM Install -g Ionic @ beta Nel tuo terminale da un account utente con privilegi di root (stiamo installando il modulo a livello globale). Per simulare l'app ionica, stiamo creando in più piattaforme, abbiamo bisogno di un altro modulo nodo: Cordova. . Puoi installarlo a livello globale usando NPM Install -g Cordova .

Siamo ora pronti a creare la nostra prima app ionica. Tuttavia, con questa configurazione, saremo in grado di vedere l'applicazione in un browser. Per simulare l'app per un dispositivo iOS o Android, dobbiamo costruire quel particolare modulo piattaforma a Cordova. In questo tutorial costrueremo il modulo iOS, quindi è necessario eseguire Piattaforma ionica Aggiungi iOS .

Infine, è necessario installare Xcode. Troverai istruzioni per questo Qui .

Creazione di un'app ionica 2

In questo tutorial, creeremo un'app Ionic 2 chiamate "grafici". Creeremo una cartella 'Charts' nella tua corrente di lavoro corrente e Bootstrap l'app con un'applicazione di esempio. L'app di esempio conterrà una pagina di base, come descritto qui.

Per creare questa app, eseguire Ionic Start Charts --v2 Nella directory di lavoro corrente ( grafici è il nome dell'app e --v2. Dicula Ionic che vogliamo creare un'app ionica 2). Sull'esecuzione di questo comando, a grafici La cartella verrà creata nella directory di lavoro corrente. Per testare l'app nel browser, navigare verso il grafici cartella e run servizio ionico . Questo avrà lanciato l'app nel tuo browser predefinito.

Aggiunta di una nuova pagina

Ora aggiungi una pagina / componente al grafici applicazione che creerà grafici JavaScript. Innanzitutto, aggiungeremo solo una semplice pagina HTML con "Hello World" in esso.

In Ionic 2, le pagine possono essere aggiunte all'app ionica usando il @Pagina Decorator (un modulo ionico basato su componenti angolari a 2), che ha accesso alla completa funzionalità ionica. Una pagina minima nuda richiede un file HTML del modello (che contiene il markup) e un file JavaScript (contenente la logica necessaria). Puoi trovare maggiori dettagli sulle pagine ioniche Qui .

Per creare la pagina aggiungeremo ciambella-grafico.js. e ciambella-grafico.html. file a Grafici / app / pagine donut-grafico directory. Nel file HTML, possiamo aggiungere il codice per la navigazione delle app e un semplice titolo "Hello World": 

 & lt; ion-navbar * navbar e gt;
& lt; pulsante menutoggle & gt;
  & lt; ion-icon name = "menu" & gt; & lt; / ion-icon & gt;
& lt; / button & gt;
& lt; ion-title & gt; ciao ionico & lt; / ion-title & gt;
& lt; / ion-navbar & gt;

& lt; ion-content & gt;
  & lt; h1 & gt; ciao world & lt; / div & gt;
& lt; / ion-content & gt;

Nel file JavaScript, consultiamo il file HTML creato come modello per questo componente. Dal momento che non stiamo facendo qualcosa di fantasia ancora, possiamo semplicemente aggiungere un costruttore vuoto ChartSpage. . 

 Importa {pagina} da "Ionic-Angular";

@Pagina({
  Templateurl: 'Build / Pages / Pie-Chart / Pie-Chart.html'
})

ChartSpage di classe di esportazione {
  costruttore () {
  }
}

Abbiamo appena creato un componente standalone; Ora dobbiamo collegarlo nell'app principale. Per fare ciò, dobbiamo fare riferimento al componente che abbiamo creato nel App.JS. File nella cartella dell'app e utilizzare il componente nel Pagine Proprietà del costruttore del componente dell'app. 

 Importa {ChartSpage} da './ page/donut-chart/donut-chart'

Costruttore (app, piattaforma, menu) {
    // Costruttore di app predefinito
    this.app = app;
    questo.platform = piattaforma;
    questo.menu = menu;
    questo.initializeapp ();
    // imposta le pagine della nostra app - stiamo aggiungendo il grafico a ciambella qui
    questa.pages = [
      {Titolo: 'Benvenuto', componente: helloionicpage},
      {Titolo: "Diaut Chart", Componente: ChartSpage}
    ];

    // crea helloionicpage la pagina Root (o First) - Passaggio predefinito
    this.rootpage = helloionicpage;
}

Dopo aver effettuato queste modifiche, l'app ionica nel browser dovrebbe ricaricare automaticamente (o utilizzare nuovamente il servizio Ionico dal terminale). Ora un nuovo collegamento dovrebbe essere visibile nel menu laterale dell'app, e facendo clic su che dovresti vedere "Ciao mondo" scritto sullo schermo.

Creare un grafico JavaScript

Ora è il momento di modificare la nostra pagina "Ciao mondo" per creare un grafico a ciambella. Per essere in grado di utilizzare la libreria FusionCharts, dobbiamo prima includere il fusioncharts.js. e fusioncharts.charts.js. file in. www / index.html. file.

Suggerimento rapido: se entrambi i file sono nella stessa cartella, aggiungendo fusioncharts.js. sarà sufficiente, poiché questo includerà automaticamente fusioncharts.charts.js. . 

 & lt; script type = "testo / javascript" src = "percorso / to / fusioncharts.js" & gt; & lt; / script & gt;

Modificheremo ora l'HTML dal passaggio precedente per creare un contenitore grafico: 

 & lt; div id = "grafico-container" & gt; & lt; / div & gt;

Nel costruttore in ciambella-grafico.js. , che abbiamo creato sopra, dobbiamo aggiungere il seguente codice per creare il grafico all'interno del contenitore del grafico: 

 fusioncharts.ready (funzione () {
  VAR RevenueChart = New FusionCharts ({
    Tipo: 'doughughut2d',
    Rendirat: 'Chart-Container',
    Larghezza: '100%',
    Altezza: '450',
    DATAFORMAT: 'JSON',
    fonte di dati: {
      "Grafico": {
        "Didascalia": "Spalato delle entrate per categorie di prodotti",
        "Subcaption": "L'anno scorso",
        "Numberprefix": "$",
        "Palettecolors": "# 0075c2, # 1aaf5d, # f2c500, # f45b00, # 8e0000",
        // Altri attributi del grafico
      },
      "Dati": [{
          "Etichetta": "Cibo",
          "Valore": "28504"
        } // più dati
      ]
    }
  }). Render ();
});

In questo codice stiamo creando un nuovo grafico attraverso il costruttore fusionCharts. Le proprietà utilizzate sono brevemente spiegate di seguito:

genere Definisce il tipo di grafico

rendat. è l'ID del contenitore in cui vogliamo rendere il grafico

larghezza e altezza sono usati per impostare le dimensioni del grafico

formato dei dati È il formato in cui nutriremo i dati del grafico (puoi usare JSON e XML)

fonte di dati Contiene i cosmetici del grafico all'interno dei fusionCharts grafico oggetto e i dati effettivi da tracciare all'interno del dati Vettore

Anche se ho mostrato solo quattro attributi nel grafico Oggetto, ci sono più di cento altri che puoi usare per migliorare il design del tuo grafico. Puoi leggere di più su questo Qui .

Una volta aggiunto questo codice, esegui servizio ionico per rilanciare l'app. Dovresti vedere un collegamento 'Donut Chart' nel tuo menu laterale. Se hai seguito correttamente tutti i miei passi, quando fai clic su quel link, dovresti vedere un grafico a ciambella! In caso contrario, fare riferimento al codice sul GitHub Repo per questo progetto per vedere dove sei andato storto.

Nota: dopo averlo controllato nel browser, utilizzare Ionic emula iOS Per caricare la tua app nel simulatore iOS.

Riassumendo

Our doughnut chart representing the revenue split of a hypothetical company by product categories

La nostra tabella di ciambelle che rappresenta la suddivisione delle entrate di un'azienda ipotetica da parte delle categorie di prodotti

Come appena hai visto, non è difficile iniziare con la visualizzazione dei dati in Ionic 2. Sebbene abbia appena effettuato una semplice tabella di ciambella per dimostrare il processo, è possibile creare grafici complessi con più set di dati utilizzando lo stesso processo . L'unica cosa necessaria per capire è il formato in cui FusionCharts accetta i dati per quel particolare tipo di grafico. Una volta che sei in grado di farlo, sarai in grado di fare qualsiasi grafico dalla biblioteca.

Se hai bisogno di aiuto con questo argomento o se avete domande sul contenuto di questo tutorial, sentiti libero di prendermi su Twitter .Sono sempre felice di aiutare!

Questo articolo è originariamente apparso in Magazine netta Edizione 283; Compralo qui .

Come si fa - Articoli più popolari

Adobe XD: Come utilizzare la funzione Auto-Animate

Come si fa Sep 13, 2025

(Immagine di immagine: Adobe) Nonostante il suo ingresso in ritardo nel gioco di prototipazione, Adobe XD è uno dei ..

Costruisci un componente testa di SEO-friendly per Nextjs / React

Come si fa Sep 13, 2025

(Immagine di immagine: spazio negativo sui pexels) Mentre reagire è una potente libreria JavaScript, non include tut..

Dipingi un'impostazione del gioco Sci-Fi in Photoshop

Come si fa Sep 13, 2025

Ho sempre pensato che l'originalità si trovi da qualche parte tra ciò che ti piace e ciò che osservi. Amo mescolare gli elemen..

Come prototipare un'app mobile con origami studio

Come si fa Sep 13, 2025

In un mondo in cui gli utenti hanno grandi aspettative della loro esperienza sul web e sul cellulare, la prototipazione e la valutazione dell'utente è la chiave. È ora comunale progressivam..

5 consigli per migliorare le tue creazioni VR

Come si fa Sep 13, 2025

Leader del workshop Vertex. Glen Southern. Condivide i suoi migliori consigli per aiutart..

Come dipingere un ritratto atmosferico in Photoshop

Come si fa Sep 13, 2025

Dipingere un ritratto può essere un compito difficile. Anche se hai imparato Come disegnare una faccia , puoi fac..

Crea un etch digitale uno schizzo

Come si fa Sep 13, 2025

In questo tutorial, prendiamo il giocattolo del disegno meccanico a un schizzo come ispirazione e tenta di implementare queste ca..

Fai una doppia esposizione in Photoshop

Come si fa Sep 13, 2025

Adobe sta lanciando una nuova serie di tutorial video oggi chiamato lo rendono ora, il che mira a delineare come creare specifici progetti di progettazione utilizzando vari Nuvo..

Categorie