Ti.charts modulis, kuru varat atrast Appcelerator tirgū, ir paredzēts tikai operētājsistēmai iOS. Es gribēju vieglu risinājumu, kas varētu darboties gan Android, gan iOS un nodrošinātu visizplatītāko diagrammu, joslu, līniju, pīrāgu utt. Visvienkāršākais veids, kā to sasniegt, bija tīmekļa diagrammā izmantot diagrammu javascript bibliotēku.
Mana kvalifikācija:
- Ātri
- Nav atkarības no jQuery
- Animācija sākotnējā izlozē
- Labs noklusējuma stils
Tagad ir daudz javascript diagrammu bibliotēku, bet ne visai daudz, kas atbilstu visām iepriekšminētajām kvalifikācijām. Pārmērīga summa paļaujas uz jQuery. Es esmu sajaucis ar dažiem, kas iepriekš ir atkarīgi no jQuery, un parasti tiem ir lēns renderēšanas laiks, kad ir pārāk daudz datu punktu, un pārāk daudz es domāju ne visai daudz. WebView ir viens no resursietilpīgākajiem komponentiem, ko varat izmantot, tāpēc jo vairāk var darīt, lai viss būtu vienkāršāk, jo labāk.
Es otro dienu pēc nedēļām ilgas meklēšanas paklupju pa jaunu bibliotēku, kas dara tieši to, ko es gribu. ChartJS. Tālāk ir norādīts, kā diagrammu ieviest WebView, vienlaikus pārejot arī uz pielāgotajiem datu punktiem.
Šajā projektā ir 3 faili, neskaitot automātiski ģenerētos failus
app.js
avots / diagramma.html
avots / chart.wvjs - šis fails satur javascript no Chart.js, kas atrodas šeit
app.js var win = Titanium.UI.createWindow ({backgroundColor: '# fff'}); var chartView = Ti.UI.createWebView ({augstums: 200, platums: 320, pa kreisi: 0, augšpusē: 0, showScrollbars: false, touchEnabled: false, url: '/source/chart.html'}); win.add (chartView); var poga = Ti.UI.createButton ({nosaukums: 'Atjaunot', augšpusē: 220, }); win.add (poga); button.addEventListener ('klikšķis', function () {var options = {}; options.data = jauns masīvs (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', opcijas);}); win.open ();
Mēs sākam, izveidojot logu, tīmekļa skatu un pogu, lai diagrammu pārzīmētu ar jauniem datiem. Kad tiek noklikšķināta uz pogas, mēs izveidojam objektu, ko sauc par opcijām. Tiek ģenerēti 5 nejauši skaitļi no 1 līdz 1000, un tiem tiek piešķirts options.data masīvs.
Pēc tam Ti.App.fireEvent tiek izsaukts ar 2 argumentiem. renderChart ir pirmais nodotais vienums, un tas nozīmē, ka kaut kur tur mūsu kodā mums ir jābūt atbilstošam pasākuma klausītājam ar tādu pašu vārdu. Otrais vienums ir opciju objekts. Tagad jūs varat sev pajautāt, kāpēc es tieši neizturēju masīvu …… Tas nedarbosies, tiek gaidīts objekts. Piestiprinot masīvu objektam, mēs varam nodot šos datus notikumu klausītājam, kas atradīsies mūsu html failā.
Lai WebView varētu sazināties ar pašu Titānu, ir nepieciešami šādi notikumu apstrādātāji. Titānam un webView ir nepieciešams veids, kā atvērt saziņas līniju, un tas ir tieši tas, ko tas dara.
skatījumi / diagramma.html
Mūsu diagrammu bibliotēkas noklusējuma faila paplašinājums ir .js. Es atklāju, ka, izmantojot .js paplašinājumu, var būt konflikti ar Titanium, tāpēc pārliecinieties, vai esat pārdēvējis savus javascript failus, kas tiek izsaukti no WebView. Mana priekšrocība ir .wvjs, taču jūs patiešām varat izmantot visu, ko vēlaties.
Varat redzēt, ka mūsu diagrammu veidošanas javascript kods ir vietnē renderChartLiteer . Tas tiek izpildīts, kad fireEvent tiek izpildīts no mūsu Titāna koda. Audekla platums un augstums tiek norādīts no javascript, nevis atribūtu pievienošanai HTML. Tas kalpo tam, lai nodzēstu to, kas pastāv audeklā, kad mēs atjaunojam jaunu diagrammu ar jauniem datiem.
