Ti.charts-modulen som du kan finne på Appcelerator-markedet, er bare for iOS. Jeg ville ha en lett løsning som kunne fungere på både Android og iOS og gi det vanligste av diagrammer, stolper, linjer, kaker osv. Den enkleste måten å gjøre dette på var for meg å bruke et kart-javascript-bibliotek i en webvisning.
Mine kvalifikasjoner:
- Rask
- Ingen jQuery-avhengighet
- Animasjon på første tegning
- God standard styling
Nå er det mange javascript-kartleggingsbiblioteker, men ikke en hel masse som oppfyller alle de ovennevnte kvalifikasjonene. Et overordnet beløp er avhengig av jQuery. Jeg har rotet meg med noen få som er avhengige av jQuery før, og de har typisk sakte gjengivelsestider når det blir for mange datapunkter, og med for mange mener jeg ikke så 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 forleden etter uker med søk som gjør akkurat det jeg vil. 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 ligger her
app.js var win = Titanium.UI.createWindow ({backgroundColor: '# fff'}); var diagramView = Ti.UI.createWebView ({høyde: 200, bredde: 320, venstre: 0, topp: 0, showScrollbars: false, touchEnabled: false, url: '/source/chart.html'}); win.add (chartView); var-knapp = Ti.UI.createButton ({tittel: 'Regenerere', topp: 220, }); win.add (knapp); button.addEventListener ('klikk', funksjon () {var alternativer = {}; 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', alternativer);}); win.open ();
Vi starter med å opprette vårt vindu, webvisning og en knapp for å tegne grafen med nye data. Når du klikker på knappen, oppretter vi et objekt som heter alternativer. 5 tilfeldige tall mellom 1 og 1000 blir generert og tildelt til alternativet.data-matrisen.
Ti.App.fireEvent kalles da med 2 argumenter. renderChart er den første varen som er bestått, og dette betyr at et sted der ute i koden vår, må vi ha en tilsvarende begivenhetslytter med samme navn. Det andre elementet er opsjonsobjektet. Nå kan du spørre deg selv hvorfor jeg ikke passerte en matrise direkte …… Det vil ikke fungere, det forventes et objekt. Ved å knytte matrisen til objektet, kan vi overføre disse dataene til hendelseslytteren som vil være lokalisert i html-filen vår.
For at WebView skal kommunisere med Titanium selv, er det nødvendig å bruke hendelseshåndterere som dette. Titanium og webView trenger en måte å åpne en kommunikasjonslinje på, og det er nøyaktig hva dette gjør.
visninger / chart.html
Standard filendelsen til kartbiblioteket vårt er .js. Jeg har funnet ut at det kan være konflikter med Titanium når du bruker en .js-utvidelse, så sørg for at du gir nytt navn til javascript-filene som blir kalt fra en webView. Mine preferanser er .wvjs, men du kan virkelig bruke hva som helst.
Du kan se at vi har vår kartlegging av javascript-koden innen eventListener for renderChart . Dette utføres når fireEvent kjøres fra vår Titanium-kode. Bredden og høyden for lerretet er spesifisert fra javascript i stedet for å legge til attributtene til HTML, dette tjener formålet med å fjerne hva som finnes i lerretet når vi gjenoppretter et nytt diagram med nye data.
