Hozzon létre egy adat irányítópultot az AngularJS segítségével

Amint elkezdtem játszani az AngularJS-szel, feltűnt, hogy az adatok megragadásának és a jelölésekben történő közvetlen felhasználásának lehetősége nagyszerű lehetőségeket kínál az adatok megjelenítésére. Ez a megközelítés valóban gyors és egyszerű módot kínálhat az adatok megjelenítésének a semmiből történő létrehozására, ahelyett, hogy külön könyvtárra kellene támaszkodnia.

Ebben az oktatóanyagban megkezdjük az adat irányítópult építését egy webalkalmazáshoz - ebben az esetben egy RunKeeper klónt, „JogTracker” néven. A szögletes értékek HTML-stílusban történő használatától az inline SVG-ig haladunk, mielőtt a kúp-gradiens () polyfill-t használnánk.



Mint sok fitneszkövető alkalmazás, a Runkeeper egyik legnépszerűbb része az adatok nyomon követésének képessége

Mint sok fitneszkövető alkalmazás, a Runkeeper egyik legnépszerűbb része az adatok nyomon követésének képessége

Számomra ennek a technikának az a legvonzóbb része, hogy a legszűkebb JavaScript-ismeretekkel is elkezdheti az adatmegjelenítések felépítését. Nagyrészt szkriptfájlunkat fogjuk használni az adatok tárolására, így ha JavaScript objektumokat tud írni, akkor jó úton jár.

Alkalmazás beállítása

Ehhez a prototípushoz hagyom, hogy a Bootstrap elvégezze a nehéz emelést, amikor a stílusról és az elrendezésről van szó, így a szögspecifikus kódra koncentrálhatunk. Feltételezem, hogy belefoglalta az Angular könyvtárat a HTML-be, és beállította és összekapcsolta az Angular alkalmazást (lásd: példakód (ha szükséges, ennek részleteiről).

Most létrehozni fogjuk a JogTracker alkalmazás adatstruktúráját. Ezt nagyon egyszerű módon fogjuk megtartani, minden egyes „jog” -ot objektumként tárolva, idő, távolság és dátum tulajdonsággal. Ezeket az objektumokat a $ scope.data nevű tömbben tároljuk - a $ hatókör lehetővé teszi számunkra, hogy ezeket az adatokat közvetlenül a vezérlőnk belsejéből érjük el a HTML-ben.

$scope.data = [{ distance: 3.24, time: 34, date: new Date('May 01, 2015'), }, // And so on... ]

A vizualizációim elkészítéséhez ismernem kell az idő és a távolság maximális értékeit is. Ez mindegyikre elvégezhető egy rövid JavaScript-szel:

$scope.maxDistance = Math.max.apply(Math, $scope.data.map(function(jog) { return jog.distance; }))

Ezután megtehetem ugyanezt, hogy megtaláljam a maximális időt. Most minden adatom tárolva van és elérhető a HTML kódomról, ennyi a JavaScript!

finompontos toll tollal

Oszlopdiagram

A fő látványterv, amelyet létrehozni fogok, egy oszlopdiagram, amely az adataimból az utolsó 10 lépést mutatja, sávval a távolságra és az időre egyaránt. A hozzáférhetőség fontos, ezért a HTML-ben létrehozok egy táblázatot, amely tartalmazza az adatokat, és a CSS segítségével ezt vizuálisan oszlopdiagrammá konvertálom.

Mivel az oszlopdiagram HTML-tábla, a fejléceket csak a képernyőolvasók számára adhatjuk hozzá az akadálymentesség érdekében

Mivel az oszlopdiagram HTML-tábla, a fejléceket csak a képernyőolvasók számára adhatjuk hozzá az akadálymentesség érdekében

Először is kihasználom az Angular ng-repeat funkcióját, hogy végigvigyen a $ scope.data tömbömön, és kiköpjem az adatokat egy táblába.

hogyan lehet művészként fejlődni
{jog.date } { number} Minutes { number} Miles

Ez létrehoz egy táblázatsort az adatok minden bejegyzéséhez. Minden bejegyzés egyedi nevét jogként jelentem be. Ez lehetővé teszi számomra, hogy hozzáférjek az objektum tulajdonságaihoz, például a jog.distance. Néhány szögszűrőt is használtam a | használatával. Az ng-repeat attribútumban a limitTo szűrő lehetővé teszi a megjelenített bejegyzések számának korlátozását. 10-es érték az első 10 bejegyzést mutatja, de az utolsó 10-et szeretném megmutatni. Ehhez a limitTo-t -10-re állítottam.

Most van egy hozzáférhető táblázatunk, amely az adatainkat mutatja. Változtassuk oszlopdiagrammá. Először fel kell állítanunk néhány CSS-t, hogy felülírjuk az asztalunk megjelenését.

.bar-chart { display: block; height: 300px; position: relative; border-left: 1px solid #668284; border-bottom: 1px solid #668284; } .bar-chart td { position: absolute; width: 20px; bottom: 0; }

Ez mind a táblázatot, mind a cellát blokkelemekké alakítja, hozzáad egy szegélyt az X és Y tengely megjelenítéséhez, és beállítja a pozícionálást és a szélességet azokon a cellákon, amelyek sávunkká válnak. Az abszolút pozícionálást úgy állítottuk be, hogy némi szögletes varázslatot fogunk használni arra, hogy a bal oldali tulajdonság segítségével elhelyezzük az oszlopokat diagramunk mentén.

Az egyes sávokhoz néhány osztályt is felállítottam, hogy háttérszínt kapjak és ellensúlyozzam helyzetüket. A .legend cellában a dátum jelenik meg a sávok alatt, ezért olyanként lett elhelyezve. Az idő a .távolság sáv mellett fog ülni, ezért némi margóval együtt megbökte.

.bar-chart .legend { bottom: -40px; } .bar-chart .distance { background: #B9D7D9; } .bar-chart .time { background: #668284; margin-left: 30px; }

Rengeteg extra stiláris érintés van, például a szöveg elforgatása a sávok mentén, ezért kérjük, olvassa el a teljes kódot a példa projektben. OK, most ássuk bele magunkat a HTML szög varázslatába!

{ date} {jog.time } Minutes {{jog.distance}} Miles

A diagram létrehozásának legfontosabb része az ng-style attribútum, amely a szögletes adatértékek használatával alkalmazza a stílusot. Az ng stílusú stílus úgy van megírva, mint egy objektum kulcsértékpárokkal. Itt adhatja át a számtanokat, és keverheti össze a számokat és a karakterláncokat.

Először nézzük meg a bal oldali értéket, amely megegyezik az összes cellán. A 10 sávomat egyenletesen szeretném elrendezni a diagram szélességében, így 10 százalékos lépésekben helyezem el őket.

left:$index * 10 +'%'

Ehhez felhasználom azt a $ index értéket, amelyet az Angular az ng-repeat összes bejegyzéséhez rendel, nullától felfelé haladva, egy lépésekben, akárcsak egy JavaScript tömbben. Tehát, ha lefuttatjuk a matematikát, az első cellám bal oldali értéke: 0% - $ index (0) x 10 (0) + '%' (az egység karakterláncként). Ebben az oszlopban lévő második cellám baloldali értéke 10%, a következő 20% stb. Matematikát is használhatok az oszlopaim magasságának változtatásához.

height: (jog.distance / maxDistance) * 300 + 'px'

Itt megteszem az egyéni kocogásom távolságát, és elosztom a tömb maximális távolságával. Ezután ezt megszorozom 300-zal (a diagramom magassága px-ben), majd karakterláncként hozzáadom a px egységemet.

Ha figyelembe vesszük, hogy mi történne a leghosszabb távolság megadásával, akkor a jog.distance / maxDistance eredménye egy lenne (mivel azonos számúak), ami 300px eredményt adna. Ez azt jelenti, hogy a legnagyobb oszlopunk mindig a diagram teljes magassága lesz, és a többi oszlop magassága ehhez képest.

Ideális esetben ennek a logikának a nagy részét áthelyeznénk a JavaScript -ünkbe, esetleg egyedi szögletes szűrőként, ami tisztábbá tenné a HTML-t. Az érthetőség kedvéért azonban ebben a szakaszban közvetlenül a HTML-ben fogjuk használni.

Az Angular data-vis magic utolsó része az ng-class attribútum használata egy osztály alkalmazásához, annak alapján, hogy teljesül-e egy feltétel. Ebben az esetben egy kiemelés osztályt szeretnék hozzáadni a leghosszabb joghoz, ezért hozzáadom az ng-class = '{highlight: jog.distance === maxDistance}' elemet.elem.

Következtetés

Első szögletes adatmegjelenítésünk elkészült! A szögértékeket nem csak a stílusattribútumokban lehet használni. Használhatjuk őket az inline SVG belsejében, és még a polifill-ekben is felhasználhatjuk, mint például Lea Verou kúpos gradiense () komplexebb látványtervek létrehozásához.

Szavak : Nick Moreton

legjobb egér a MacBook Pro 2016-hoz

Nick Moreton a Birmingham City University oktatója. Szakterületei: HTML, CSS, JavaScript, AngularJS és WordPress. Ez a cikk eredetileg a net magazin 274. számában jelent meg

Tetszett ez? Olvassa el ezeket!