Modul ti.charts koji možete pronaći na tržištu Appcelerator-a namijenjen je samo za iOS. Želio sam lagano rješenje koje bi moglo funkcionirati i na Androidu i iOS-u i pružati najčešće grafikone, traku, liniju, pita i slično. Najjednostavniji način da to učinim bio mi je korištenje javascript knjižnice za grafikone unutar web prikaza.
Moje kvalifikacije:
- Brzo
- Nema jQuery ovisnosti
- Animacija na početnom izvlačenju
- Dobar zadani stil
Sada postoji puno biblioteka za izradu JavaScripta, ali ne i cijeli niz koji ispunjavaju sve gore navedene kvalifikacije. Neodređeni iznos se oslanja na jQuery. Prije sam zabrljao s nekoliko onih koji su ovisni o jQuery-u, a oni obično imaju sporo razdoblje prikazivanja kad ima previše podataka, a pod previše mislim na ne puno. WebView je jedna od komponenti s najintenzivnijim resursima koje možete koristiti, pa što je više moguće učiniti jednostavnijim, to bolje.
Drugi dan nakon tjedana pretraživanja naišao sam na novu knjižnicu koja radi upravo ono što želim. ChartJS. Evo kako implementirati grafikon u webView, istovremeno prolazeći i prilagođene podatkovne točke.
U ovom su projektu 3 datoteke, osim automatski generiranih datoteka
app.js
Izvor / chart.html
izvor / chart.wvjs - ova datoteka sadrži javascript s Chart.js koji se nalazi ovdje
app.js var win = Titanium.UI.createWindow ({backgroundColor: '# fff'}); var chartView = Ti.UI.createWebView ({visina: 200, širina: 320, lijevo: 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 = novi niz (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 ();
Započinjemo stvaranjem našeg prozora, web prikaza i gumba za crtanje grafikona novim podacima. Kad kliknemo gumb, stvaramo objekt koji se zove opcije. Generira se 5 slučajnih brojeva između 1 i 1000 i dodjeljuje se nizu options.data.
Tada se poziva Ti.App.fireEvent s 2 argumenta. renderChart je prva stavka koja je prošla, a to znači da negdje vani u našem kodu moramo imati odgovarajućeg slušatelja događaja s istim nazivom. Druga stavka je objekt mogućnosti. Sad se možete pitati zašto nisam direktno proslijedio niz …… Neće raditi, očekuje se objekt. Pričvršćivanjem niza na objekt, te podatke možemo proslijediti slušatelju događaja koji će se nalaziti unutar naše html datoteke.
Da bi webView mogao komunicirati sa samim Titaniumom potrebno je korištenje alata za obradu događaja poput ovog. Titanium i webView trebaju način za otvaranje linije komunikacije i upravo to čini.
pregleda / chart.html
Zadano proširenje datoteke naše biblioteke za grafikone je .js. Otkrio sam da može doći do sukoba s Titaniumom kada koristite .js ekstenziju, pa obavezno preimenujte svoje JavaScript datoteke koje se pozivaju s webView. Moja preferira .wvjs, ali stvarno možete koristiti bilo što.
Možete vidjeti da imamo naš JavaScript kod za grafikone u okviru EventListenera za renderChart . To se izvodi kad se fireEvent izvrši iz našeg Titanium koda. Širina i visina platna određene su iz javascripta umjesto dodavanja atributa u HTML, ovo služi za svrhu uklanjanja onoga što na platnu postoji kada regeneriramo novi grafikon s novim podacima.
