Ti.charts-modulen som du kan hitta på Appcelerator-marknaden är endast för iOS. Jag ville ha en lätt lösning som kunde fungera på både Android och iOS och ge den vanligaste av diagram, staplar, linjer, pajer osv. Det enklaste sättet att göra detta var för mig att använda ett javascript-bibliotek för kartläggning i en webbvy.
Mina kvalifikationer:
- Snabb
- Inget jQuery-beroende
- Animering på första dragningen
- Bra standard styling
Nu finns det en hel del javascript-kartbibliotek, men inte en hel del som uppfyller alla ovanstående kvalifikationer. Ett överdrivet belopp är beroende av jQuery. Jag har trasslat med några få som är beroende av jQuery tidigare, och de har vanligtvis långsamma återgivningstider när det blir för många datapunkter, och med för många menar jag inte en hel del. WebView är en av de mest resurskrävande komponenterna du kan använda, så ju mer som kan göras för att hålla saker enkla, desto bättre.
Jag snubblat över ett nytt bibliotek häromdagen efter veckors sökning som gör exakt vad jag vill. ChartJS. Så här implementerar du ett diagram i en webView, samtidigt som du passerar anpassade datapunkter.
Det finns 3 filer i detta projekt, 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 diagramView = Ti.UI.createWebView ({höjd: 200, bredd: 320, vänster: 0, topp: 0, showScrollbars: false, touchEnabled: false, url: '/source/chart.html'}); win.add (chartView); var-knapp = Ti.UI.createButton ({titel: 'Regenerera', överst: 220, }); win.add (knapp); button.addEventListener ('klicka', funktion () {var option = {}; option.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', alternativ); }); win.open ();
Vi börjar med att skapa vårt fönster, webbvy och en knapp för att rita om grafen med ny data. När du klickar på knappen skapar vi ett objekt som heter alternativ. 5 slumpmässiga nummer mellan 1 och 1000 genereras och tilldelas till arrayen option.data.
Ti.App.fireEvent kallas sedan med två argument. renderChart är den första artikeln som passeras, och det betyder att någonstans där ute i vår kod måste vi ha en motsvarande händelse lyssnare 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 att fungera, ett objekt förväntas. Genom att ansluta matrisen till objektet kan vi överföra den informationen till händelse lyssnaren 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 evenemangshanterarna. Titanium och webView behöver ett sätt att öppna en kommunikationslinje, och det är exakt vad det här gör.
visningar / chart.html
Standardfiltillägget i vårt kartbibliotek ä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 anropas från en webView. Jag föredrar .wvjs, men du kan verkligen använda vad som helst.
Du kan se att vi har vår kartläggning av javascript-koden inom eventListener för renderChart . Detta körs när fireEvent körs från vår Titanium-kod. Bredden och höjden för duken specificeras från javascript istället för att lägga till attributen till HTML, detta tjänar syftet med att rensa bort vad som finns i duken när vi regenererar ett nytt diagram med ny data.
