Modul ti.charts, ki ga najdete na trgu Appcelerator, je samo za iOS. Želel sem si lahke rešitve, ki bi lahko delovala tako na Androidu kot iOS-u in zagotavljala najpogostejše grafikone, vrstico, črto, pito itd. Najpreprostejši način mi je bil, če v spletnem pogledu uporabim knjižnico javanskih grafikonov.
Moje kvalifikacije:
- Hitro
- Ni odvisnosti od jQueryja
- Animacija ob začetnem žrebu
- Dober privzeti stajling
Zdaj je veliko knjižnic grafikonov javascripta, ne pa tudi celotnega, ki izpolnjujejo vse zgoraj navedene kvalifikacije. Nezadovoljen znesek se zanaša na jQuery. Prej sem se zmedel z nekaj, ki so odvisni od jQueryja, in običajno imajo počasne čase upodabljanja, ko je preveč podatkovnih točk, in preveč, ne mislim, veliko. Spletni pogled je ena od najbolj komponentnih komponent, ki jih lahko uporabite, zato več kot lahko naredite za lažje stvari, tem bolje.
Drugi teden sem po tednih iskanja naletel na novo knjižnico, ki počne točno tisto, kar želim. ChartJS. Tu je opisano, kako implementirati grafikon v spletni pogled, hkrati pa prenašati tudi podatkovne točke po meri.
V tem projektu so poleg avtomatsko ustvarjenih datotek še 3 datoteke
app.js
vir / chart.html
vir / chart.wvjs - ta datoteka vsebuje javascript iz Chart.js, ki se nahaja tukaj
app.js var win = Titanium.UI.createWindow ({backgroundColor: '# fff'}); var chartView = Ti.UI.createWebView ({višina: 200, širina: 320, levo: 0, vrh: 0, showScrollbars: false, touchEnabled: false, url: '/source/chart.html'}); win.add (chartView); var gumb = Ti.UI.createButton ({naslov: 'Obnovi', vrh: 220, }); win.add (gumb); button.addEventListener ('klik', funkcija () {var options = {}; options.data = nov 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', opcije); }); win.open ();
Začnemo z ustvarjanjem našega okna, spletnega pogleda in gumba za preoblikovanje grafa z novimi podatki. Ko kliknemo gumb, ustvarimo predmet, ki se imenuje možnosti. Generira se 5 naključnih števil med 1 in 1000 in jih dodeli matriki options.data.
Nato se ti.App.fireEvent pokliče z dvema argumentoma. renderChart je 1. poslani element, kar pomeni, da moramo nekje tam v kodi imeti ustreznega poslušalca dogodkov z istim imenom. Drugi element je objekt z možnostmi. Zdaj se lahko vprašate, zakaj nisem prenesel matrike neposredno …… Ne bo delovalo, pričakuje se predmet. S pritrditvijo matrike na objekt lahko te podatke posredujemo poslušalcu dogodkov, ki se nahaja v naši html datoteki.
Da bi webView komuniciral s samim Titanium, je potrebno uporabljati takšne upravljavce dogodkov. Titanium in webView potrebujeta način, da odpreta linijo komunikacije in ravno to počne.
pogledi / chart.html
Privzeta razširitev datoteke naše knjižnice grafikonov je .js. Ugotovil sem, da lahko pri uporabi razširitve .js pride do konfliktov s Titanium-om, zato se prepričajte, da preimenujete datoteke JavaScript, ki jih kličete iz spletnega pogleda. Moja prednost je .wvjs, vendar lahko resnično uporabite karkoli.
Lahko vidite, da imamo kodo javascript za grafikone znotraj dogodkaListener za renderChart . To se izvede, ko se fireEvent izvede iz naše kode Titanium. Širina in višina platna sta določena iz javascripta, namesto da bi atribute dodali v HTML, to služi namenu razjasniti, kaj obstaja na platnu, ko obnovimo nov grafikon z novimi podatki.
