„Ti.charts“ modulis, kurį galite rasti „Appcelerator“ prekyvietėje, yra skirtas tik „iOS“. Norėjau lengvo sprendimo, kuris galėtų veikti tiek „Android“, tiek „iOS“ ir pateiktų dažniausias diagramas, juostą, liniją, pyragą ir kt. Paprasčiausias būdas buvo tai padaryti, naudodamas diagramos „javascript“ biblioteką interneto rodinyje.
Mano kvalifikacija:
- Greitai
- Jokios priklausomybės nuo „jQuery“ nėra
- Animacija pradiniame piešinyje
- Geras numatytasis stilius
Dabar yra daugybė „javascript“ diagramų sudarymo bibliotekų, bet ne visa partija, kuri atitiktų visas aukščiau išvardytas kvalifikacijas. Nereikalingos sumos priklauso nuo „jQuery“. Aš anksčiau susipainiojau su keliais, kurie priklauso nuo „jQuery“, ir paprastai jų pateikimo laikas yra lėtas, kai yra per daug duomenų taškų, o per daug turiu omenyje ne visai daug. „WebView“ yra vienas iš daugiausiai išteklių naudojančių komponentų, kurį galite naudoti, todėl kuo daugiau galite padaryti, kad viskas būtų paprasta, tuo geriau.
Kitą dieną po kelių savaičių ieškojau, kas daro būtent tai, ko aš, suklupo po naują biblioteką. „ChartJS“. Štai kaip įdiegti diagramą į „webView“, kartu perduodant pasirinktinius duomenų taškus.
Šiame projekte, be automatiškai sugeneruotų failų, yra 3 failai
app.js
šaltinis / diagrama.html
šaltinis / chart.wvjs - šiame faile yra čia esančių Chart.js javascript
app.js var win = Titanium.UI.createWindow ({backgroundColor: '# fff'}); var chartView = Ti.UI.createWebView ({aukštis: 200, plotis: 320, kairė: 0, viršuje: 0, „showScrollbars“: false, touchEnabled: false, url: '/source/chart.html'}); win.add (chartView); var mygtukas = Ti.UI.createButton ({pavadinimas: 'Regenerate', viršuje: 220, }); win.add (mygtukas); button.addEventListener ('spustelėkite', function () {var options = {}; options.data = new masyvas (Math.floor (Math.random () * 1001), Math.floor (Math.random () * 1001), „Math.floor“ („Math.random () * 1001“), „Math.floor“ („Math.random“) (100 *), „Math.floor“ („Math.random“) (100 *) 1001); „Ti.App.fireEvent“ („renderChart“, galimybės); }); win.open ();
Pirmiausia sukuriame savo langą, žiniatinklio vaizdą ir mygtuką, kad galėtumėte brėžti diagramą naujais duomenimis. Kai paspaudžiamas mygtukas, sukuriame objektą, vadinamą parinktimis. Sudaromi 5 atsitiktiniai skaičiai nuo 1 iki 1000 ir priskiriami „options.data“ masyvui.
Tada „Ti.App.fireEvent“ iškviečiamas 2 argumentais. „renderChart“ yra 1-as elementas, praėjęs, ir tai reiškia, kad kažkur ten, kur yra mūsų kodas, turime turėti atitinkamą renginio klausytoją tuo pačiu vardu. Antrasis elementas yra parinkčių objektas. Dabar galite paklausti savęs, kodėl aš neperdaviau masyvo tiesiai … … Jis neveiks, laukiama objekto. Pritvirtinę masyvą prie objekto, mes galime perduoti tuos duomenis įvykio klausytojui, kuris bus mūsų html faile.
Norint, kad „webView“ galėtų susisiekti su pačiu „Titanium“, būtina naudoti tokius renginių tvarkytojus, kaip šis. „Titanium“ ir „webView“ reikia būdo, kaip atverti ryšio liniją, ir būtent tai ir daro.
peržiūros / diagrama.html
Numatytasis mūsų diagramų bibliotekos failo plėtinys yra .js. Radau, kad naudojant „.js“ plėtinį gali kilti konfliktų su „Titanium“, todėl įsitikinkite, kad pervardėte savo „Java“ failus, kurie yra pašaukti iš „webView“. Mano pasirinkimas yra .wvjs, bet jūs tikrai galite naudoti bet ką.
Galite pamatyti, kad turime „diagramos“ javascript kodą „renderChart“ renginių priežiūros priemonėse . Tai vykdoma, kai fireEvent vykdomas iš mūsų titano kodo. Drobės plotis ir aukštis nurodomi iš „javascript“, o ne pridedant atributus į HTML. Tai padeda išsiaiškinti, kas egzistuoja drobėje, kai atnaujiname naują diagramą su naujais duomenimis.
