Ti.charts-modulet, som du kan finde på Appcelerator-markedet, er kun til iOS. Jeg ville have en let løsning, der kunne fungere på både Android og iOS og give det mest almindelige af diagrammer, bjælke, linje, cirkel osv. Den enkleste måde at gøre dette på var for mig at bruge et javascript-bibliotek til kortlægning i en webvisning.
Mine kvalifikationer:
- Hurtig
- Ingen jQuery-afhængighed
- Animation ved første træk
- God standard styling
Nu er der en masse javascript-kortlægningsbiblioteker, men ikke en hel masse, der opfylder alle ovennævnte kvalifikationer. Et overdreven beløb er afhængig af jQuery. Jeg har rodet rundt med et par, der er afhængige af jQuery før, og de har typisk langsom gengivelsestider, hvor der bliver for mange datapunkter, og med for mange mener jeg ikke en hel masse. WebView er en af de mest ressourceintensive komponenter, du kan bruge, så jo mere der kan gøres for at holde tingene enkle, jo bedre.
Jeg snuble over et nyt bibliotek den anden dag efter uges søgning, der gør nøjagtigt hvad jeg vil. ChartJS. Sådan implementeres et diagram i en webView, mens du også passerer tilpassede 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, der er 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-knap = Ti.UI.createButton ({title: 'Regenerate', top: 220, }); win.add (knap); button.addEventListener ('klik', funktion () {var optioner = {}; 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', muligheder); }); win.open ();
Vi starter med at oprette vores vindue, webvisning og en knap for at tegne grafen med nye data. Når der klikkes på knappen, opretter vi et objekt kaldet indstillinger. 5 tilfældige tal mellem 1 og 1000 genereres og tildeles til optionen.data array.
Ti.App.fireEvent kaldes derefter med 2 argumenter. renderChart er den første vare, der er bestået, og det betyder, at vi et sted derude i vores kode skal bruge en tilsvarende begivenhedslytter med samme navn. Det andet punkt er indstillingsobjektet. Nu kan du spørge dig selv, hvorfor jeg ikke sendte en matrix direkte …… Det vil ikke fungere, et objekt forventes. Ved at knytte matrixen til objektet kan vi overføre disse data til begivenhedslytteren, der vil være placeret i vores html-fil.
For at WebView skal kunne kommunikere med Titanium selv, er det nødvendigt at bruge begivenhedshåndterere som dette. Titanium og webView har brug for en måde at åbne en kommunikationslinje på, og det er præcis, hvad det gør.
visninger / chart.html
Standard filtypenavnet til vores kortbibliotek 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 omdøbe dine javascript-filer, der kaldes fra en webView. Min præference er .wvjs, men du kan virkelig bruge hvad som helst.
Du kan se, at vi har vores kortlægning af javascript-kode inden for eventListener til renderChart . Dette udføres, når fireEvent udføres fra vores Titanium-kode. Bredden og højden for lærredet er specificeret fra javascript i stedet for at tilføje attributterne til HTML, dette tjener formålet med at rydde ud, hvad der findes i lærredet, når vi regenererer et nyt diagram med nye data.
