El mòdul de ti.charts que podeu trobar al mercat d'Appcelerator només és per a iOS. Volia una solució lleugera que pogués funcionar tant a Android com a iOS i que proporcionés el més comú de gràfics, barres, línies, pastís, etc.
Les meves qualificacions:
- Ràpid
- Sense dependència de jQuery
- Animació en sorteig inicial
- Bon estil predeterminat
Ara hi ha moltes biblioteques de gràfics de javascript, però no moltes que compleixen totes les qualificacions anteriors. Una quantitat desmesurada depèn de jQuery. Ja he embolicat amb uns quants que depenen de jQuery abans, i normalment tenen temps de reproducció lents quan hi ha massa punts de dades i, per molts, no em refereixo a molts. El WebView és un dels components amb més recursos que podeu utilitzar, de manera que com més es pugui fer per mantenir les coses senzilles, millor.
L’altre dia em vaig topar amb una nova biblioteca després de setmanes de recerca que fes exactament el que vull. ChartJS. A continuació, es mostra com implementar un gràfic en un WebView mentre es passen també punts de dades personalitzats.
Hi ha 3 fitxers en aquest projecte, a part dels fitxers generats automàticament
app.js
font / chart.html
source / chart.wvjs: aquest fitxer conté el javascript de Chart.js que es troba aquí
app.js var win = Titanium.UI.createWindow ({backgroundColor: '# fff'}); var chartView = Ti.UI.createWebView ({altura: 200, amplada: 320, esquerra: 0, superior: 0, showScrollbars: false, touchEnabled: false, url: '/source/chart.html'}); win.add (chartView); var button = Ti.UI.createButton ({title: 'Regenerate', top: 220, }); win.add (botó); button.addEventListener ('clic', 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", opcions);}); win.open ();
Comencem creant la nostra finestra, la vista web i un botó per redibuixar el gràfic amb dades noves. Quan es fa clic al botó, creem un objecte anomenat opcions. Es generen 5 números aleatoris entre 1 i 1000 i s’assignen a la matriu options.data.
Aleshores es crida Ti.App.fireEvent amb 2 arguments. renderChart és el primer element passat, i això vol dir que, en algun lloc del codi, hem de tenir un oient d'esdeveniments corresponent amb el mateix nom. El segon ítem és l’objecte d’opcions. Ara és possible que et preguntis per què no vaig passar directament una matriu …… No funcionarà, s'espera un objecte. Adjuntant la matriu a l'objecte, podem passar aquestes dades a l'escolta d'esdeveniments que es trobaran dins del nostre fitxer html.
Perquè el WebView es comuniqui amb el propi Titanium, és necessari utilitzar gestors d'esdeveniments com aquest. Titanium i el webView necessiten una forma d’obrir una línia de comunicació, i això és exactament el que això fa.
views / chart.html
L'extensió per defecte del fitxer de la nostra biblioteca de gràfics és .js. He trobat que hi pot haver conflictes amb Titanium quan utilitzeu una extensió .js, així que assegureu-vos que canvieu el nom dels fitxers javascript que s’anomenen des d’una webView. La meva preferència és .wvjs, però realment podeu utilitzar qualsevol cosa.
Podeu veure que tenim el nostre codi javascript de gràfics dins de l' evidència EventListener per a renderChart . Això s’executa quan el fireEvent s’executa des del nostre codi de titani. L’amplada i l’alçada del llenç s’especifiquen en javascript en lloc d’afegir els atributs a l’HTML, això té l’objectiu d’esborrar el que hi ha al llenç quan regenerarem un gràfic nou amb dades noves.
