Ti.charts-modulet, som du kan finde på Appcelerator-markedspladsen, er kun til iOS. Jeg ønskede en letvægtsløsning, der kunne fungere både på Android og iOS og give det mest udbredte af diagrammer, linjer, tærter osv. Den enkleste måde at gøre om dette var, at jeg kunne bruge et javascriptbibliotek i en webvisning.
Mine kvalifikationer:
- Hurtig
- Ingen jQuery afhængighed
- Animation på første træk
- God standard styling
Nu er der mange javascript charting biblioteker, men ikke en masse, der opfylder alle ovennævnte kvalifikationer. Et uforholdsmæssigt stort beløb stole på jQuery. Jeg har messet rundt med nogle få, der er afhængige af jQuery før, og de har typisk langsomt gengivelsestider, når der kommer til at være for mange datapunkter, og for mange mener jeg ikke meget. WebView er en af de mest ressourceintensive komponenter, du kan bruge, så jo mere der kan gøres for at holde tingene simple, jo bedre.
Jeg snuble over et nyt bibliotek den anden dag efter uger med søgning, der gør præcis, hvad jeg vil have. ChartJS. Sådan implementeres et diagram i en webView, samtidig med at du passerer brugerdefinerede datapunkter.
Der er 3 filer i dette projekt, bortset fra automatisk genererede filer
app.js
kilde / chart.html
source / chart.wvjs - denne fil indeholder javascript fra Chart.js placeret her
app.js var win = Titanium.UI.createWindow ({backgroundColor: '# fff'}); var chartView = Ti.UI.createWebView ({højde: 200, bredde: 320, venstre: 0, top: 0, showScrollbars: false, touchEnabled: false, url: '/source/chart.html'}); win.add (chartView); var-knappen = Ti.UI.createButton ({title: 'Regenerere', top: 220, }); win.add (knap); button.addEventListener ('klik', funktion () {var options = {}; options.data = nyt 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', muligheder); }); win.open (); Vi starter med at oprette vores vindue, webvisning og en knap for at omdanne grafen med nye data. Når knappen trykkes, opretter vi et objekt kaldet indstillinger. 5 tilfældige tal mellem 1 og 1000 genereres og tildeles til options.data array.
Ti.App.fireEvent kaldes derefter med 2 argumenter. renderChart er det første element bestået, og det betyder, at et sted derude i vores kode, skal vi have en tilsvarende hændelseslytter med samme navn. Det andet punkt er indstillingsobjektet. Nu kan du spørge dig selv, hvorfor jeg ikke bestod et array direkte ...... Det virker ikke, et objekt forventes. Ved at vedhæfte arrayet til objektet kan vi videregive dataene til den hændelseslytter, der vil være placeret i vores html-fil.
For at webView skal kommunikere med Titanium selv, er det nødvendigt at bruge hændelseshåndtererne som dette. Titanium og webView har brug for en måde at åbne en kommunikationslinje på, og det er præcis hvad dette gør.
views / chart.html Diagram Ti.App.addEventListener ('renderChart', funktion (muligheder) {Ti.API.info ('renderingstabel'); var canvas = document.getElementById ('myChart'); canvas.width = 310 ; canvas.height = 190; var data = {etiketter: ["Jan", "Feb", "Mar", "Apr", "Maj"], datasæt: [{fillColor: "rgba (220, 220, 220, 0, 5)" strokeColor: "rgba (220, 220, 220, 1)", data: options.data}] var ctx = document.getElementById ("myChart"). getContext ("2d"); nyt diagram (ctx) .Bar (data);} ); Standardfiludvidelsen for vores chartringsbibliotek er .js. Jeg har fundet, at der kan være konflikter med Titanium, når du bruger en .js-udvidelse, så sørg for, at du omdøber dine javascript-filer, der bliver kaldt fra en webView. Min præference er .wvjs, men du kan virkelig bruge hvad som helst.
Du kan se, at vi har vores chartring javascript kode inden for eventListener for renderChart . Dette udføres, når fireEvent udføres fra vores Titanium-kode. Bredden og højden for lærredet er angivet fra javascript i stedet for at tilføje attributterne til HTML'en. Dette tjener formålet med at rydde ud af, hvad der findes i lærredet, når vi regenererer et nyt kort med nye data.
