Zostavte dátový panel s AngularJS

Hneď ako som sa začal pohrávať s AngularJS, napadlo ma, že jeho schopnosť chytiť dáta a použiť ich priamo v značení môže ponúknuť veľké možnosti pre vizualizáciu dát. Tento prístup by mohol predstavovať skutočne rýchly a jednoduchý spôsob vytvárania vizualizácií údajov od nuly, namiesto toho, aby sa musel spoliehať na samostatnú knižnicu.

V tomto tutoriále začneme vytvárať dátový dashboard pre webovú aplikáciu - v tomto prípade klon RunKeeper s názvom „JogTracker“. Budeme postupovať od používania hranatých hodnôt v štýle HTML po vloženie SVG pred použitím polyfillu conic-gradient ().



Rovnako ako mnoho aplikácií na sledovanie kondície, jednou z najobľúbenejších častí aplikácie Runkeeper je schopnosť sledovať vaše údaje

Rovnako ako mnoho aplikácií na sledovanie kondície, jednou z najobľúbenejších častí aplikácie Runkeeper je schopnosť sledovať vaše údaje

Pre mňa je najatraktívnejšou časťou tejto techniky to, že môžete začať vytvárať vizualizácie dát aj s tými najbežnejšími znalosťami JavaScriptu. Na uchovávanie údajov budeme vo veľkej miere využívať náš súbor skriptu, takže ak budete môcť písať objekty v jazyku JavaScript, budete na dobrej ceste.

Nastavenie aplikácie

Pre tento prototyp nechám Bootstrap, aby vykonal ťažké zdvíhanie, pokiaľ ide o štýl a rozloženie, aby sme sa mohli zamerať na kód špecifický pre Angular. Budem predpokladať, že ste do svojho HTML zahrnuli knižnicu Angular a nastavili a prepojili ste svoju aplikáciu Angular (pozri príklad kódu ako to urobiť, ak je to potrebné).

Teraz vytvoríme dátovú štruktúru pre našu aplikáciu JogTracker. Budeme to udržiavať skutočne jednoduché, keď bude každý krok „jog“ uložený ako objekt s vlastnosťou času, vzdialenosti a dátumu. Tieto objekty uložíme do poľa s názvom $ scope.data - $ scope nám umožňuje prístup k týmto údajom priamo z nášho ovládača v HTML.

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

Aby som mohol vytvárať svoje vizualizácie, potrebujem poznať aj maximálne hodnoty času a vzdialenosti. To je možné urobiť pre každý z nich pomocou krátkeho kódu JavaScript:

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

Potom môžem urobiť to isté a nájsť maximálny čas. Teraz mám všetky svoje údaje uložené a prístupné z môjho HTML, to je všetko pre JavaScript!

klávesová skratka na duplikovanie vrstvy vo photoshope

Stĺpcový graf

Hlavná vizualizácia, ktorú vytvorím, je stĺpcový graf zobrazujúci posledných 10 výbehov z mojich údajov, s pruhom pre vzdialenosť aj čas. Prístupnosť je dôležitá, preto v HTML vytvorím tabuľku, ktorá obsahuje údaje, a pomocou CSS ich vizuálne prevediem na stĺpcový graf.

deviantart predávajúci umenie tretím stranám

Keďže stĺpcový graf je tabuľka HTML, môžeme kvôli uľahčeniu pridávať hlavičky tabuliek iba pre čítačky obrazovky

Keďže stĺpcový graf je tabuľka HTML, môžeme kvôli uľahčeniu pridávať hlavičky tabuliek iba pre čítačky obrazovky

Na začiatok využijem funkciu ng-repeat Angular na to, aby som prešiel cez moje pole $ scope.data a dáta vypľul do tabuľky.

{jog.date } { number} Minutes { number} Miles

Takto sa vytvorí riadok tabuľky pre každú položku v dátach. Individuálne meno pre každý záznam vyhlasujem ako jog. To mi umožňuje prístup k vlastnostiam tohto objektu, napríklad jog.distance. Tiež som použil niektoré uhlové filtre pomocou |. V atribúte ng-repeat umožňuje filter limitTo obmedziť počet zobrazených záznamov. Hodnota 10 zobrazí prvých 10 záznamov, chcem však zobraziť posledných 10. Za týmto účelom som nastavil limitTo na -10.

Teraz máme prístupnú tabuľku s našimi údajmi. Urobme z toho stĺpcový graf. Najskôr musíme nastaviť niekoľko CSS, ktoré prepíšu vzhľad našej tabuľky.

.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; }

Toto premení tabuľku aj bunku na prvky bloku, pridá orámovanie, aby sa zobrazila os X a Y, a nastaví umiestnenie a šírku buniek, ktoré sa stanú našimi pruhmi. Nastavíme absolútne umiestnenie, pretože použijeme nejakú uhlovú mágiu na rozmiestnenie pruhov pozdĺž nášho grafu pomocou vlastnosti left.

Tiež som nastavil niektoré triedy pre každú lištu, aby som im dal farbu pozadia a vyrovnal ich pozíciu. Bunka .legend bude zobrazovať dátum pod pruhmi, takže bol umiestnený ako taký. .čas bude sedieť vedľa pruhu .distance, takže bol posunutý spolu s určitou rezervou.

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

Existuje veľa ďalších štylistických prvkov, napríklad otočenie textu pozdĺž pruhov, takže úplný kód nájdete v príklade projektu. Dobre, teraz sa ponorte do kúzla Angular v našom HTML!

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

Kľúčovou súčasťou vytvorenia grafu je atribút ng-style, ktorý aplikuje styling pomocou hodnôt uhlových údajov. Styling v štýle ng sa píše ako objekt s pármi kľúč - hodnota. Môžete tu tiež vložiť aritmetiku a zmiešať čísla a reťazce.

Najprv sa pozrime na ľavú hodnotu, ktorá je rovnaká vo všetkých bunkách. Chcem usporiadať svojich 10 pruhov rovnomerne po celej šírke môjho grafu, takže ich rozmiestnim v 10 percentných prírastkoch.

left:$index * 10 +'%'

K tomu využijem hodnotu $ indexu, ktorú Angular priraďuje všetkým položkám v ng-repeat, stúpa od nuly v krokoch po jednej, rovnako ako v poli JavaScriptu. Takže ak spustíme matematiku, moja prvá bunka bude mať ľavú hodnotu: 0% - $ index (0) x 10 (0) + '%' (jednotka ako reťazec). Moja druhá bunka v tomto stĺpci bude mať ľavú hodnotu 10 percent, ďalších 20 percent atď. Môžem tiež použiť matematiku na zmenu výšky svojich tyčí.

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

Tu zmeriam vzdialenosť svojho individuálneho jogu a vydelím ho maximálnou vzdialenosťou v poli. Potom to vynásobím 300 (výška môjho grafu v px) a potom pridám svoju jednotku px ako reťazec.

Ak vezmeme do úvahy, čo by sa stalo s najdlhšou zadanou vzdialenosťou, výsledok jog.distance / maxDistance by bol jeden (pretože sú rovnakého počtu), čo by dalo výsledok 300px. To znamená, že náš najväčší pruh bude vždy celá výška grafu a ostatné pruhy budú mať k tomu výšku.

V ideálnom prípade by sa väčšina tejto logiky presunula do nášho JavaScriptu, možno ako vlastný uhlový filter, čím by sa HTML vyčistil. Kvôli ľahšiemu pochopeniu ho však v tejto fáze použijeme priamo v kóde HTML.

Poslednou časťou kúzla Angular data-vis je použitie atribútu ng-class na použitie triedy na základe toho, či je splnená podmienka. V tomto prípade chcem pridať triedu zvýraznenia k najdlhšiemu jogu, tak pridám ng-class = '{highlight: jog.distance === maxDistance}' do môjhoprvok.

amnézia tmavý zostup box art

Záver

Naša prvá vizualizácia uhlových údajov je dokončená! Uhlové hodnoty sa dajú použiť nielen v atribútoch štýlu. Môžeme ich použiť vo vnútri vloženého SVG a dokonca ich použiť vo vnútri polyfill, ako je napríklad kónický gradient () Lea Verou, na vytvorenie zložitejších vizualizácií.

Slová : Nick Moreton

Nick Moreton prednáša na Birmingham City University. Medzi jeho odborné znalosti patrí HTML, CSS, JavaScript, AngularJS a WordPress. Tento článok bol pôvodne publikovaný v čísle 274 sieťového časopisu

Páčilo sa vám to? Prečítajte si tieto!