Ang module ng ti.charts na maaari mong mahanap sa merkado ng Appcelerator ay para lamang sa iOS. Nais ko ang isang magaan na solusyon na maaaring gumana sa parehong Android at iOS at magbigay ng pinakakaraniwan sa mga tsart, bar, linya, pie, atbp. Ang pinakasimpleng paraan upang magawa ito ay para sa akin na gumamit ng isang charting javascript library sa loob ng isang web view.
Aking mga kwalipikasyon:
- Mabilis
- Walang pag-asa sa jQuery
- Animasyon sa paunang draw
- Magandang default na estilo
Ngayon maraming mga library ng javascript charting, ngunit hindi isang buong pulutong na nakakatugon sa lahat ng mga kwalipikasyon sa itaas. Ang isang walang halaga na halaga ay umaasa sa jQuery. Na-messed ako sa paligid ng iilan na nakasalalay sa jQuery dati, at kadalasan ay mayroon silang mabagal na render beses kapag may napakaraming mga puntos ng data, at sa pamamagitan ng napakaraming ibig sabihin ay hindi isang buong pulutong. Ang webView ay isa sa mga pinaka mapagkukunan na masinsinang mga sangkap na maaari mong magamit, kaya't higit na magagawa upang mapanatiling simple ang mga bagay, mas mabuti.
Nababagabag ako sa isang bagong aklatan sa susunod na araw pagkatapos ng mga linggo ng paghahanap na ginagawa mismo ang nais ko. ChartJS. Narito kung paano ipatupad ang isang tsart sa isang webView, habang dinadaan ang pasadyang mga puntos ng data.
Mayroong 3 mga file sa proyektong ito, bukod sa awtomatikong nabuo ng mga file
app.js
mapagkukunan / tsart.html
mapagkukunan / tsart.wvjs - ang file na ito ay naglalaman ng javascript mula sa Chart.js na matatagpuan dito
app.js var win = Titanium.UI.createWindow ({backgroundColor: '# fff'}); var chartView = Ti.UI.createWebView ({taas: 200, lapad: 320, kaliwa: 0, tuktok: 0, showScrollbars: false, touchEnabled: false, url: '/source/chart.html'}); win.add (tsartView); pindutan ng var = Ti.UI.createButton ({pamagat: 'Regenerate', tuktok: 220, }); win.add (button); button.addEventListener ('click', function () {var options = {}; options.data = bagong 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', mga pagpipilian);}); win.open ();
Nagsisimula kami sa pamamagitan ng paglikha ng aming window, view ng web, at isang pindutan upang mai-redraw ang graph gamit ang mga bagong data. Kapag na-click ang pindutan, lumikha kami ng isang bagay na tinatawag na mga pagpipilian. 5 mga random na numero sa pagitan ng 1 at 1000 ay nabuo at itinalaga sa array.data array.
Ang Ti.App.fireEvent ay pagkatapos ay tinawag na may 2 argumento. renderChart ang ika-1 item na naipasa, at nangangahulugan ito na sa isang lugar doon sa aming code, kailangan nating magkaroon ng kaukulang tagapakinig ng kaganapan na may parehong pangalan. Ang pangalawang item ay ang object ng mga pagpipilian. Ngayon, maaari mong tanungin ang iyong sarili kung bakit hindi ako dumaan ng isang array nang direkta …… Hindi ito gagana, ang isang bagay ay inaasahan. Sa pamamagitan ng paglakip ng array sa bagay, maaari naming maipasa ang data na iyon sa tagapakinig ng kaganapan na matatagpuan sa loob ng aming html file.
Para sa webView upang makipag-usap sa Titanium mismo, ang paggamit ng mga handler ng kaganapan tulad nito ay kinakailangan. Ang Titanium at ang webView ay nangangailangan ng isang paraan upang buksan ang isang linya ng komunikasyon, at iyan mismo ang ginagawa nito.
pananaw / tsart.html
Ang default na extension ng file ng aming library ng charting ay .js. Natagpuan ko na maaaring magkaroon ng mga salungatan sa Titanium kapag gumagamit ng isang extension ng .js, kaya siguraduhing pinalitan mo ang iyong javascript file na tinawag mula sa isang webView. Ang aking kagustuhan ay .wvjs, ngunit maaari mo talagang gamitin ang anuman.
Maaari mong makita na mayroon kaming aming charting javascript code sa loob ng eventListener para sa renderChart . Isinasagawa ito kapag naisagawa ang fireEvent mula sa aming Titanium code. Ang lapad at taas para sa canvas ay tinukoy mula sa javascript sa halip na idagdag ang mga katangian sa HTML, nagsisilbi itong layunin ng pag-alis ng kung ano ang umiiral sa canvas kapag muling nabuo ang isang bagong tsart na may bagong data.
