Ti.charts-modulen som du finner i Appcelerator-markedet, er kun for iOS. Jeg ville ha en lettvektsløsning som kunne fungere både på Android og iOS, og gir det mest vanlige av diagrammer, linjer, kaker osv. Den enkleste måten å gå om dette var at jeg skulle bruke et kartleggingsjavascriptbibliotek i en nettvisning.
Mine kvalifikasjoner:
- Fort
- Ingen jQuery-avhengighet
- Animasjon på første tegning
- God standard styling
Nå er det mange javascript kartleggingsbiblioteker, men ikke mye som oppfyller alle de ovennevnte kvalifikasjonene. En uvanlig mengde er avhengig av jQuery. Jeg har messet rundt med noen som er avhengige av jQuery før, og de har vanligvis sakte gjengittider når det kommer til å være for mange datapunkter, og for mange mener jeg ikke mye. WebView er en av de mest ressurskrevende komponentene du kan bruke, så jo mer som kan gjøres for å holde ting enkelt, jo bedre.
Jeg snublet over et nytt bibliotek den andre dagen etter flere uker med å søke som gjør akkurat det jeg vil ha. ChartJS. Slik implementerer du et diagram i en webView, samtidig som du passerer tilpassede datapunkter.
Det er 3 filer i dette prosjektet, bortsett fra automatisk genererte filer
app.js
kilde / chart.html
source / chart.wvjs - denne filen inneholder javascript fra Chart.js som er plassert her
app.js var win = Titanium.UI.createWindow ({backgroundColor: '# fff'}); var chartView = Ti.UI.createWebView ({høyde: 200, bredde: 320, venstre: 0, topp: 0, showScrollbars: false, touchEnabled: false, url: '/source/chart.html'}); win.add (chartView); var-knappen = Ti.UI.createButton ({tittel: 'Regenerere', toppen: 220, }); win.add (knapp); button.addEventListener ("klikk", funksjon () {var options = {}; options.data = nytt 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', alternativer);}); win.open (); Vi starter med å lage vårt vindu, nettvisning og en knapp for å omdøve grafen med nye data. Når knappen klikkes, oppretter vi et objekt som kalles alternativer. 5 tilfeldige tall mellom 1 og 1000 genereres og tilordnes til options.data array.
Ti.App.fireEvent blir deretter kalt med 2 argumenter. renderChart er det første elementet som er bestått, og det betyr at et sted der ute i vår kode, må vi ha en tilsvarende hendelselytter med samme navn. Det andre elementet er alternativobjektet. Nå kan du spørre deg selv hvorfor jeg ikke bestod en matrise direkte ... Det virker ikke, det forventes et objekt. Ved å feste oppstillingen til objektet, kan vi overføre dataene til hendelseslytteren som ligger i vår html-fil.
For webView å kommunisere med Titanium selv, er det nødvendig å bruke hendelsesbehandlerne som dette. Titanium og webView trenger en måte å åpne en kommunikasjonslinje på, og det er akkurat hva dette gjør.
visninger / diagram.html Diagram Ti.App.addEventListener ('renderChart', funksjon (alternativer) {Ti.API.info ('renderingstabell'); var lerret = document.getElementById ('myChart'); canvas.width = 310 ; canvas.height = 190; var data = {etiketter: ["Jan", "Feb", "Mar", "Apr", "Mai"], datasett: [{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);} ); Standardfilutvidelsen til kartleggingsbiblioteket er .js. Jeg har funnet at det kan være konflikter med Titanium når du bruker en .js-utvidelse, så sørg for at du endrer navn på javascript-filene dine som blir kalt fra en webView. Min preferanse er .wvjs, men du kan virkelig bruke hva som helst.
Du kan se at vi har vår kartlegging javascript kode i eventListener for renderChart . Dette utføres når fireEvent utføres fra vår Titanium-kode. Bredden og høyden for lerretet er spesifisert fra javascript i stedet for å legge til attributter til HTML-en. Dette tjener formålet med å fjerne hva som finnes i lerretet når vi regenererer et nytt diagram med nye data.
