De ti.charts-module die u kunt vinden op de Appcelerator-marktplaats is alleen voor iOS. Ik wilde een lichtgewicht oplossing die zowel op Android als iOS kon werken en de meest voorkomende grafieken, balk, lijn, taart, enz. Kon bieden. De eenvoudigste manier om dit aan te pakken was voor mij om een javascript-bibliotheek met grafieken in een webweergave te gebruiken.
Mijn kwalificaties:
- Snel
- Geen afhankelijkheid van jQuery
- Animatie bij eerste trekking
- Goede standaardstijl
Nu zijn er veel javascript-grafiekenbibliotheken, maar niet heel veel die aan alle bovenstaande kwalificaties voldoen. Een buitensporig bedrag is afhankelijk van jQuery. Ik heb er al een paar verknald die afhankelijk zijn van jQuery, en ze hebben meestal trage weergavetijden wanneer er te veel gegevenspunten zijn, en met teveel 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 eenvoudig te houden, hoe beter.
Ik stuitte onlangs op een nieuwe bibliotheek na weken zoeken die precies doet wat ik wil. ChartJS. Hier leest u hoe u een grafiek in een webView implementeert, terwijl u ook aangepaste gegevenspunten 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 dat zich hier bevindt
app.js var win = Titanium.UI.createWindow ({backgroundColor: '# fff'}); var chartView = Ti.UI.createWebView ({hoogte: 200, breedte: 320, links: 0, boven: 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 ('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', 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 dan aangeroepen met 2 argumenten. renderChart is het eerste gepasseerde item, en dit betekent dat we ergens in onze code een overeenkomende gebeurtenislistener met dezelfde naam moeten hebben. Het tweede item is het optieobject. Nu kunt u zich afvragen waarom ik een array niet rechtstreeks heb doorgegeven … Het werkt niet, 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.
Om webView met Titanium zelf te laten communiceren, is het gebruik van dergelijke event-handlers noodzakelijk. Titanium en de webView hebben een manier nodig om een communicatielijn te openen, en dat is precies wat dit doet.
views / chart.html
De standaardbestandsextensie van onze kaartbibliotheek is .js. Ik heb geconstateerd dat er conflicten kunnen optreden met Titanium bij het gebruik van een .js-extensie, dus zorg ervoor dat u uw JavaScript-bestanden hernoemt die worden aangeroepen vanuit een webView. 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 vanuit JavaScript in plaats van de attributen aan de HTML toe te voegen. Dit dient om te wissen wat er op het canvas staat wanneer we een nieuwe grafiek met nieuwe gegevens regenereren.
