De module ti.charts die u op de Appcelerator-marktplaats kunt vinden, is alleen voor iOS. Ik wilde een lichtgewicht oplossing die zowel op Android als iOS kon functioneren en de meest gebruikelijke kaarten, bar, lijn, taart, enz. Kon bieden. De eenvoudigste manier om dit te doen, was voor mij om een javascriptbibliotheek voor in kaart brengen te gebruiken in een webweergave.
Mijn kwalificaties:
- Snel
- Geen jQuery-afhankelijkheid
- Animatie bij eerste trekking
- Goede standaard styling
Nu zijn er veel javascript-grafieken van bibliotheken, maar niet heel veel die voldoen aan alle bovenstaande kwalificaties. Een buitensporige hoeveelheid is afhankelijk van jQuery. Ik heb wat geknutseld met een paar die eerder afhankelijk waren van jQuery, en ze hebben meestal langzame rendertijden als er te veel datapunten worden, en met te veel bedoel ik niet heel veel. De webView is een van de meest resource-intensieve componenten die u kunt gebruiken, dus hoe meer u kunt doen om dingen simpel te houden, hoe beter.
Ik kwam onlangs een nieuwe bibliotheek tegen na weken zoeken, dat doet precies wat ik wil. ChartJS. Hier leest u hoe u een diagram kunt implementeren in een webView, terwijl u ook aangepaste datapunten doorgeeft.
Er zijn 3 bestanden in dit project, afgezien van automatisch gegenereerde bestanden
app.js
source / chart.html
source / chart.wvjs - dit bestand bevat het javascript van Chart.js hier
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); var-knop = Ti.UI.createButton ({title: 'Regenerate', top: 220, }); win.add (button); button.addEventListener ('klik', functie () {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', opties);}); win.open (); We beginnen met het maken van ons venster, webweergave en een knop om de grafiek opnieuw te tekenen met nieuwe gegevens. Wanneer op de knop wordt geklikt, maken we een object met de naam opties. 5 willekeurige getallen tussen 1 en 1000 worden gegenereerd en toegewezen aan de array options.data.
Ti.App.fireEvent wordt vervolgens aangeroepen met 2 argumenten. renderChart is het eerste item dat is gepasseerd, en dit betekent dat we ergens in onze code een overeenkomstige gebeurtenislistener met dezelfde naam moeten hebben. Het tweede item is het opties-object. Nu vraag je je misschien af waarom ik niet direct een array heb doorgegeven ...... Het zal niet werken, er wordt een object verwacht. Door de array aan het object te koppelen, kunnen we die gegevens doorgeven aan de gebeurtenislistener die zich in ons html-bestand bevindt.
Voor de webView om met Titanium zelf te communiceren, is het gebruik van de event handlers zoals deze noodzakelijk. Titanium en de webview hebben een manier nodig om een communicatielijn te openen, en dat is precies wat dit doet.
views / chart.html Diagram Ti.App.addEventListener ('renderChart', functie (opties) {Ti.API.info ('rendering chart'); var canvas = document.getElementById ('myChart'); canvas.width = 310 ; canvas.height = 190; var data = {labels: ["Jan", "Feb", "Mar", "Apr", "May"], datasets: [{fillColor: "rgba (220, 220, 220, 0.5)", strokeColor: "rgba (220, 220, 220, 1)", data: options.data}]} var ctx = document.getElementById ("myChart"). getContext ("2d"); nieuw diagram (ctx) .Bar (gegevens);} ); De standaardbestandsuitbreiding van onze diagrambibliotheek is .js. Ik heb geconstateerd dat er conflicten kunnen zijn met Titanium bij het gebruik van een .js-extensie, dus zorg ervoor dat je de javascript-bestanden die worden gebeld vanaf een webview, hernoemt. Mijn voorkeur gaat uit naar .wvjs, maar je kunt echt alles gebruiken.
U kunt zien dat we onze JavaScript-code voor grafieken in de eventListener voor renderChart hebben . Dit wordt uitgevoerd wanneer fireEvent wordt uitgevoerd vanuit onze Titanium-code. De breedte en hoogte voor het canvas worden opgegeven via javascript in plaats van de kenmerken aan de HTML toe te voegen, dit heeft als doel het wissen van wat er in het canvas bestaat wanneer we een nieuw diagram met nieuwe gegevens genereren.
