Az Appcelerator piactéren található ti.charts modul csak iOS-re vonatkozik. Könnyű megoldást akartam, amely mind az Androidon, mind az iOS rendszeren működhet, és a leggyakoribb táblázatokat, sávokat, vonalakat, piteket stb. Biztosítja. A legegyszerűbb módszer ennek megvalósításához az volt, hogy a javascript könyvtárat diagramozzam egy webnézetben.
Képesítéseim:
- Gyors
- Nincs jQuery függőség
- Animáció a kezdeti rajzoláskor
- Jó alapértelmezett stílus
Jelenleg nagyon sok javascript könyvtárazó könyvtár található, de nem egy csomó, amely megfelel a fenti képesítéseknek. Hatalmas összeg függ a jQuery-től. Korábban összezavartam néhányat, amelyek a jQuery-től függenek, és jellemzően lassú megjelenítési idők vannak, amikor túl sok adatpont van, és túl sokkal nem egészre gondolok. A webView az egyik leginkább erőforrás-igényes összetevő, amelyet használhat, ezért minél többet lehet tenni a dolgok egyszerűvé tétele érdekében, annál jobb.
Másnap hetekig tartó keresés után megbotlottam egy új könyvtárban, amely pontosan azt tette, amit szeretnék. ChartJS. Így állíthatja be a diagramot a webView-ba, miközben átadja az egyedi adatpontokat is.
A projektben 3 fájl található, kivéve az automatikusan létrehozott fájlokat
app.js
forrás / chart.html
source / chart.wvjs - ez a fájl tartalmazza az itt található Chart.js javaslatát
app.js var win = Titanium.UI.createWindow ({backgroundColor: '# fff'}); var chartView = Ti.UI.createWebView ({magasság: 200, szélesség: 320, bal: 0, felső: 0, showScrollbar: false, touchEnabled: false, url: '/source/chart.html'}); win.add (chartView); var gomb = Ti.UI.createButton ({cím: 'Regenerate', tetején: 220, }); win.add (gomb); button.addEventListener ('kattintás', function () {var options = {}; options.data = új tömb (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', lehetőségek); }); win.open ();
Először úgy hozzuk létre az ablakot, a web nézetet és a gombot, hogy ábrázoljuk a grafikont új adatokkal. Amikor a gombra kattintunk, létrehozunk egy objektumot, amelyet opcióknak hívunk. 5 véletlenszerű számot generálunk 1 és 1000 között, és hozzárendeljük az options.data tömbhöz.
A Ti.App.fireEvent ezután 2 argumentummal kerül meghívásra. A renderChart az első átadott elem, és ez azt jelenti, hogy valahol odakinn a kódunkban szükségünk van egy megfelelő eseményhallgatóra, azonos névvel. A második elem az options objektum. Most felteheti magának a kérdést, hogy miért nem adtam át közvetlenül egy tömböt … … nem fog működni, várható egy tárgy. Ha tömböt csatolunk az objektumhoz, továbbíthatjuk ezeket az adatokat az eseményfigyelőhöz, amely a html fájlban található.
Ahhoz, hogy a webView képes kommunikálni magával a titánnal, ehhez hasonló eseménykezelőkre van szükség. A titánnak és a webView-nak szüksége van egy módra a kommunikációs vonal megnyitásához, és pontosan ezt teszi.
views / chart.html
A charting könyvtár alapértelmezett fájlkiterjesztése .js. Megállapítottam, hogy konfliktusok merülhetnek fel a Titanium-szal, ha .js kiterjesztést használunk, ezért ügyeljen arra, hogy nevezze át a javasView fájlokat, amelyeket a webView alkalmazásból hívnak. Preferenciám a .wvjs, de bármit használhat.
Láthatja, hogy van a diagramjainkhoz tartozó javascript kódunk a renderChart eventListener oldalán . Ez akkor kerül végrehajtásra, amikor a fireEvent titánkódunkból kerül végrehajtásra. A vászon szélességét és magasságát a javascript-ből adják meg, ahelyett, hogy az attribútumokat hozzáadnák a HTML-hez. Ez arra szolgál, hogy tisztázza, mi létezik a vászonban, amikor egy új diagramot új adatokkal állítunk elő.
