Modul ti.charts, který najdete na trhu Appcelerator, je určen pouze pro iOS. Chtěl jsem lehké řešení, které by fungovalo na platformách Android i iOS a poskytovalo nejběžnější grafy, pruhy, čáry, koláč atd. Nejjednodušším způsobem, jak toho dosáhnout, bylo použití mapovací knihovny javascript v rámci webového zobrazení.
Moje kvalifikace:
- Rychle
- Žádná závislost jQuery
- Animace při počátečním losování
- Dobrý výchozí styl
Nyní existuje spousta knihoven mapujících javascript, ale ne mnoho, které by splňovaly všechny výše uvedené kvalifikace. Nadměrná částka závisí na jQuery. Už jsem si pohrával s několika, které jsou závislé na jQuery, dříve a obvykle mají pomalé renderovací časy, když je příliš mnoho datových bodů, a příliš mnoho nemyslím úplně. WebView je jednou z nejnáročnějších součástí, které můžete použít, takže čím více toho lze udělat pro udržení jednoduchosti, tím lépe.
Druhý den po týdnech hledání jsem narazil na novou knihovnu, která dělá přesně to, co chci. ChartJS. Zde je návod, jak implementovat graf do webView a zároveň předávat vlastní datové body.
V tomto projektu jsou kromě automaticky generovaných souborů 3 soubory
app.js
source / chart.html
source / chart.wvjs - tento soubor obsahuje javascript z Chart.js umístěný zde
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čítko var = Ti.UI.createButton ({title: 'Regenerate', top: 220, }); win.add (tlačítko); 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 vytvořením našeho okna, webového zobrazení a tlačítka pro překreslení grafu s novými daty. Po kliknutí na tlačítko vytvoříme objekt nazvaný možnosti. Generuje se 5 náhodných čísel mezi 1 a 1000 a přiřazuje se k poli options.data.
Ti.App.fireEvent se pak volá se 2 argumenty. renderChart je první předaná položka, což znamená, že někde venku v našem kódu musíme mít odpovídající posluchače událostí se stejným názvem. Druhou položkou je objekt voleb. Nyní se můžete zeptat sami sebe, proč jsem neprošel pole přímo ….. To nebude fungovat, očekává se objekt. Připojením pole k objektu můžeme tato data předat posluchači událostí, který bude umístěn v našem souboru html.
Aby webView mohl komunikovat se samotným Titanem, je nutné používat obslužné rutiny událostí, jako je tato. Titan a webView potřebují způsob, jak otevřít komunikační linku, a to přesně dělá.
zhlédnutí / chart.html
Výchozí přípona souboru naší mapovací knihovny je .js. Zjistil jsem, že při použití přípony .js může dojít ke konfliktům s Titanium, takže se ujistěte, že přejmenujete soubory javascript, které se vyvolávají z webView. Moje preference jsou .wvjs, ale můžete opravdu použít cokoli.
Uvidíte, že máme náš kódovací kód javascript v rámci EventListener for renderChart . To se provede, když je fireEvent proveden z našeho titanového kódu. Šířka a výška plátna jsou specifikovány z javascriptu místo přidávání atributů do HTML, což slouží k vymazání toho, co na plátně existuje, když regenerujeme nový graf s novými daty.
