Appcelerator -markkinapaikasta löytyvä ti.charts-moduuli on tarkoitettu vain iOS: lle. Halusin kevyen ratkaisun, joka voisi toimia sekä Androidissa että iOS: ssä ja tarjota yleisimmät kaaviot, palkit, rivit, piirakat jne. Yksinkertaisin tapa edetä tässä oli käyttää JavaScriptin kirjastokarttaa Web-näkymässä.
Tutkintoni:
- Nopeasti
- Ei jQuery-riippuvuutta
- Animaatio alkuperäisessä piirtämisessä
- Hyvä oletusmuoto
Nyt on olemassa paljon javascript-kartoituskirjastoja, mutta ei kovin paljon, jotka täyttävät kaikki yllä olevat vaatimukset. Kohtuuton määrä luottaa jQueryyn. Olen hämmentynyt muutamiin, jotka ovat riippuvaisia jQuerystä aiemmin, ja niiden tyypilliset renderusajat ovat yleensä hitaita, kun datapisteitä on liian paljon, ja liian monilla tarkoitan, ettei kovin paljon. WebView on yksi resurssivaiheisimmista komponenteista, joita voit käyttää, joten mitä enemmän voidaan tehdä asioiden pitämiseksi yksinkertaisina, sitä parempi.
Kompasin uuden kirjaston yli toisena päivänä viikkojen etsinnän jälkeen, joka tekee juuri sen, mitä haluan. ChartJS. Tässä on miten kaavio voidaan toteuttaa webView-tietokantaan samalla kun kuljetetaan myös mukautettuja datapisteitä.
Projektissa on 3 tiedostoa, lukuun ottamatta automaattisesti luomia tiedostoja
app.js
lähde / chart.html
Lähde / chart.wvjs - tämä tiedosto sisältää javascriptin täältä sijaitsevalta Chart.js-sivustolta
app.js var win = Titanium.UI.createWindow ({backgroundColor: '# fff'}); var chartView = Ti.UI.createWebView ({korkeus: 200, leveys: 320, vasen: 0, yläosa: 0, showScrollbars: false, touchEnabled: false, url: '/source/chart.html'}); win.add (chartView); var-painike = Ti.UI.createButton ({nimi: 'Regenerate', yläosa: 220, }); win.add (nappi); button.addEventListener ('napsauta', function () {var options = {}; options.data = uusi taulukko (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', vaihtoehdot);}); win.open ();
Aloitamme luomalla ikkunan, web-näkymän ja painikkeen piirtääksesi kuvaajan uudella tiedolla. Kun painiketta napsautetaan, luomme objektin, jota kutsutaan vaihtoehdoiksi. Luodaan 5 satunnaislukua välillä 1 - 1000, ja ne osoitetaan options.data-taulukkoon.
Ti.App.fireEvent kutsutaan sitten 2 argumentilla. renderChart on ensimmäinen ohitettu kohde, ja tämä tarkoittaa, että jollain koodikoodissamme on oltava vastaava tapahtuman kuuntelija, jolla on sama nimi. Toinen kohde on vaihtoehtoobjekti. Nyt voit kysyä itseltäsi, miksi en välittänyt taulukkoa suoraan …… Se ei toimi, esine odotetaan. Liittämällä taulukon objektiin, voimme siirtää tiedot tapahtuman kuuntelijalle, joka sijaitsee html-tiedostossamme.
Jotta webView voi kommunikoida itse Titaniumin kanssa, tällaisten tapahtumakäsittelijöiden käyttö on välttämätöntä. Titaani ja webView tarvitsevat tavan avata viestintälinja, ja juuri tämä tekee sen.
näkemyksiä / chart.html
Karttakarttakirjastomme oletus tiedostopääte on .js. Olen todennut, että Titaniumin kanssa voi olla ristiriitoja .js-laajennuksen käyttämisessä, joten varmista, että nimeät uudelleen javasView-tiedostosi, joita kutsutaan webView-tiedostosta. Minun mielestäni on .wvjs, mutta voit todella käyttää mitä tahansa.
Voit nähdä, että meillä on kaavio javascript-koodilla renderChart-tapahtumanListener- ohjelmassa . Tämä suoritetaan, kun fireEvent suoritetaan titaanikoodiltamme. Kankaan leveys ja korkeus määritetään javascript-tiedostosta sen sijaan, että määritteet lisättäisiin HTML-koodiin. Tämän tarkoituksena on tyhjentää kankaassa oleva sisältö, kun uudet kaaviot luodaan uudella tiedolla.
