Il modulo ti.charts che puoi trovare nel marketplace di Appcelerator è solo per iOS. Volevo una soluzione leggera che potesse funzionare sia su Android che su iOS e fornire il più comune di grafici, barra, linea, grafico a torta, ecc. Il modo più semplice per farlo era per me usare una libreria javascript grafica in una vista web.
Le mie qualifiche:
- Veloce
- Nessuna dipendenza jQuery
- Animazione al sorteggio iniziale
- Buon stile predefinito
Ora ci sono molte librerie di creazione di grafici javascript, ma non molte che soddisfano tutte le qualifiche di cui sopra. Una quantità eccessiva si affida a jQuery. Ho già fatto qualche scherzo con alcuni che dipendono da jQuery e in genere hanno tempi di rendering lenti quando ci sono troppi punti dati, e per troppi intendo non molto. Il webView è uno dei componenti più ricchi di risorse che è possibile utilizzare, quindi più si può fare per mantenere le cose semplici, meglio è.
Mi sono imbattuto in una nuova biblioteca l'altro giorno dopo settimane di ricerche che fa esattamente quello che voglio. ChartJS. Ecco come implementare un grafico in un webView, passando anche punti dati personalizzati.
Ci sono 3 file in questo progetto, a parte i file generati automaticamente
app.js
source / chart.html
source / chart.wvjs: questo file contiene il javascript di Chart.js che si trova qui
app.js var win = Titanium.UI.createWindow ({backgroundColor: '# fff'}); var chartView = Ti.UI.createWebView ({altezza: 200, larghezza: 320, sinistra: 0, in alto: 0, showScrollbars: false, touchEnabled: false, url: '/source/chart.html'}); win.add (ChartView); var button = Ti.UI.createButton ({title: 'Rigenerare', in alto: 220, }); win.add (pulsante); button.addEventListener ('click', function () {var options = {}; options.data = new Array (Math.floor (Math.random () * 1001), Math.floor (Math.random () * 1001), Math.floor (Math.random () * 1001), Math.floor (Math.random () * 1001), Math.floor (Math.random () * 1001)); Ti.App.fireEvent ('renderChart', opzioni); }); win.open ();
Iniziamo creando la nostra finestra, la visualizzazione Web e un pulsante per ridisegnare il grafico con nuovi dati. Quando si fa clic sul pulsante, creiamo un oggetto chiamato opzioni. 5 numeri casuali tra 1 e 1000 vengono generati e assegnati alla matrice options.data.
Ti.App.fireEvent viene quindi chiamato con 2 argomenti. renderChart è il primo oggetto passato e questo significa che da qualche parte là fuori nel nostro codice, dobbiamo avere un listener di eventi corrispondente con lo stesso nome. Il secondo elemento è l'oggetto opzioni. Ora, potresti chiederti perché non ho passato direttamente un array …… Non funzionerà, è previsto un oggetto. Collegando l'array all'oggetto, possiamo trasmettere quei dati al listener di eventi che si troverà all'interno del nostro file html.
Perché webView comunichi con Titanium stesso, è necessario utilizzare i gestori di eventi in questo modo. Titanium e webView necessitano di un modo per aprire una linea di comunicazione, ed è esattamente ciò che fa.
views / chart.html
L'estensione di file predefinita della nostra libreria per grafici è .js. Ho scoperto che possono esserci conflitti con Titanium quando si utilizza un'estensione .js, quindi assicurarsi di rinominare i file javascript che vengono chiamati da un webView. La mia preferenza è .wvjs, ma puoi davvero usare qualunque cosa.
Puoi vedere che abbiamo il nostro codice javascript grafico all'interno di eventListener per renderChart . Questo viene eseguito quando fireEvent viene eseguito dal nostro codice Titanium. La larghezza e l'altezza per la tela sono specificate da JavaScript invece di aggiungere gli attributi all'HTML, questo serve allo scopo di cancellare ciò che esiste nella tela quando rigeneriamo un nuovo grafico con nuovi dati.
