Ti.charts-modulen som du hittar på Appcelerator-marknaden är endast för iOS. Jag ville ha en lättlösning som kan fungera på både Android och iOS och ge det vanligaste av diagram, streck, linje, paj, etc. Det enklaste sättet att gå till detta var att jag skulle kunna använda ett kartläggning javascriptbibliotek i en webbvy.
Mina kvalifikationer:
- Snabb
- Inget jQuery beroende
- Animering vid första teckning
- Bra standard styling
Nu finns det många javascript kartläggningsbibliotek, men inte en hel del som uppfyller alla ovanstående kvalifikationer. En oordnad mängd är beroende av jQuery. Jag har krossat med några som är beroende av jQuery innan, och de har vanligtvis långsamma återhämtningstider när det blir för många datapunkter, och för många menar jag inte mycket. WebView är en av de mest resursintensiva komponenterna du kan använda, så ju mer som kan göras för att hålla sakerna enkla, desto bättre.
Jag snubblat över ett nytt bibliotek den andra dagen efter veckor av sökning som gör exakt vad jag vill ha. ChartJS. Så här implementerar du ett diagram i en webbvy, samtidigt som du passerar anpassade datapunkter.
Det finns 3 filer i det här projektet, bortsett från automatiskt genererade filer
app.js
källa / chart.html
source / chart.wvjs - den här filen innehåller javascript från Chart.js som finns här
app.js var win = Titanium.UI.createWindow ({backgroundColor: '# fff'}); var chartView = Ti.UI.createWebView ({höjd: 200, bredd: 320, vänster: 0, topp: 0, visaScrollbars: false, touchEnabled: false, url: '/source/chart.html'}); win.add (chartView); var-knappen = Ti.UI.createButton ({titel: 'Regenerera', topp: 220, }); win.add (knapp); button.addEventListener ("click", funktion () {var options = {}; options.data = ny 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', alternativ); }); win.open (); Vi börjar med att skapa vårt fönster, webbvisning och en knapp för att omgradera grafen med nya data. När knappen klickar skapar vi ett objekt som heter alternativ. 5 slumptal mellan 1 och 1000 genereras och tilldelas till options.data array.
Ti.App.fireEvent kallas sedan med 2 argument. renderChart är det första objektet som passerat, och det betyder att någonstans där ute i vår kod måste vi ha en motsvarande evenemangslyttare med samma namn. Det andra objektet är alternativobjektet. Nu kan du fråga dig själv varför jag inte skickade en matris direkt ... Det kommer inte fungera, ett föremål förväntas. Genom att fästa arrayen till objektet kan vi vidarebefordra den data till händelseläsenaren som kommer att finnas i vår HTML-fil.
För att webView ska kunna kommunicera med Titanium själv är det nödvändigt att använda händelseshanteraren. Titan och webView behöver ett sätt att öppna en kommunikationslinje, och det är precis vad det här gör.
views / chart.html Diagram Ti.App.addEventListener ('renderChart', funktion (alternativ) {Ti.API.info ('renderingskarta'); var kanvas = document.getElementById ('myChart'); canvas.width = 310 ; canvas.height = 190; var data = {etiketter: ["Jan", "Feb", "Mar", "Apr", "Maj"], dataset: [{fillColor: "rgba (220, 220, 220, 0, 5)" strokeColor: "rgba (220, 220, 220, 1)", data: options.data}]} var ctx = document.getElementById ("myChart"). getContext ("2d"), nytt diagram (ctx) .Bar (data);} ); Standardfiltillägget i vårt kartläggningsbibliotek är .js. Jag har funnit att det kan vara konflikter med Titanium när du använder en .js-förlängning, så se till att du byter namn på dina javascript-filer som kallas från en webView. Min preferens är .wvjs, men du kan verkligen använda vad som helst.
Du kan se att vi har vår kartläggning javascript kod inom eventListener för renderChart . Detta körs när fireEvent exekveras från vår Titanium-kod. Bredden och höjden för duken är specificerad från javascript istället för att lägga till attributen till HTML-filen. Det här syftar till att rensa ut det som finns i duken när vi regenererar ett nytt diagram med nya data.
