Modul ti.charts, ktorý nájdete na trhu Appcelerator, je určený len pre iOS. Chcel som odľahčené riešenie, ktoré by fungovalo v systémoch Android aj iOS a poskytovalo najbežnejšie grafy, čiaru, čiaru, koláč atď. Najjednoduchší spôsob, ako to dosiahnuť, bolo použitie grafickej knižnice javascript v rámci webového zobrazenia.
Moja kvalifikácia:
- rýchly
- Žiadna závislosť od jQuery
- Animácia pri počiatočnom losovaní
- Dobrý predvolený štýl
Teraz existuje veľa knižníc mapovania javascript, ale nie veľa, ktoré spĺňajú všetky vyššie uvedené kvalifikácie. Nadmerná suma sa spolieha na jQuery. Rozprával som sa s niekoľkými, ktoré sú závislé od jQuery predtým, a zvyčajne majú pomalé vykresľovacie časy, keď je príliš veľa dátových bodov, a príliš veľa tým myslím nie veľa. WebView je jednou z najnáročnejších komponentov, ktoré môžete použiť, takže čím viac sa dá urobiť, aby sa veci zjednodušili, tým lepšie.
Druhý deň po týždňoch hľadania som narazil na novú knižnicu, ktorá robí presne to, čo chcem. ChartJS. Tu je návod, ako implementovať graf do webView a zároveň odovzdávať vlastné dátové body.
V tomto projekte sú okrem automaticky vygenerovaných súborov aj 3 súbory
app.js
zdroj / chart.html
source / chart.wvjs - tento súbor obsahuje javascript z Chart.js, ktorý sa nachádza tu
app.js var win = Titanium.UI.createWindow ({backgroundColor: '# fff'}); var chartView = Ti.UI.createWebView ({height: 200, width: 320, left: 0, top: 0, showScrollbars: false, touchEnabled: false, url: '/source/chart.html'}); win.add (chartView); tlačidlo var = Ti.UI.createButton ({title: 'Regenerate', top: 220, }); win.add (tlačidlo); 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'), možnosti); }); win.open ();
Začneme tým, že vytvoríme naše okno, zobrazenie na webe a tlačidlo na prekreslenie grafu s novými údajmi. Po kliknutí na tlačidlo vytvoríme objekt s názvom možnosti. Vygeneruje sa 5 náhodných čísel od 1 do 1000 a pridelí sa do poľa options.data.
Ti.App.fireEvent sa potom volá s 2 argumentmi. renderChart je odovzdaná prvá položka, čo znamená, že niekde inde v našom kóde musíme mať zodpovedajúci poslucháč udalostí s rovnakým názvom. Druhá položka je objekt možností. Teraz sa môžete opýtať sami seba, prečo som pole priamo neprešiel ….. Nefunguje to, očakáva sa objekt. Pripojením poľa k objektu môžeme tieto údaje odovzdať poslucháčovi udalostí, ktorý bude umiestnený v našom súbore html.
Aby webView mohol komunikovať so samotným Titanom, je potrebné používať obslužné rutiny udalostí, ako je toto. Titán a webView potrebujú spôsob, ako otvoriť komunikačnú linku, a to je presne to, čo robí.
views / chart.html
Predvolená prípona súboru v našej mapovacej knižnici je .js. Zistil som, že pri používaní prípony .js môžu existovať konflikty s Titanium, takže nezabudnite premenovať súbory javascript, ktoré sa volajú z webView. Moja preferencia je .wvjs, ale môžete skutočne použiť čokoľvek.
Môžete vidieť, že máme náš javascriptový grafový kód v rámci EventListener for renderChart . Toto sa vykoná, keď sa hasEvent spustí z nášho titánového kódu. Šírka a výška plátna sú špecifikované z javascriptu namiesto pridávania atribútov do HTML, čo slúži na vymazanie toho, čo na plátne existuje, keď regenerujeme nový graf s novými údajmi.
