Izradite nadzornu ploču podataka s AngularJS-om

Čim sam se počeo poigravati s AngularJS-om, zapazilo mi je da njegova sposobnost prikupljanja podataka i njihovog korištenja izravno u označavanju može pružiti velike mogućnosti za vizualizaciju podataka. Ovaj bi pristup mogao predstaviti doista brz i jednostavan način za vizualizaciju podataka od nule, umjesto da se mora oslanjati na zasebnu knjižnicu.

U ovom uputstvu počet ćemo graditi podatkovnu nadzornu ploču za web aplikaciju - u ovom slučaju klon RunKeeper pod nazivom 'JogTracker'. Napredovat ćemo od korištenja Angular vrijednosti u HTML stilu do ugrađenog SVG-a, prije nego što upotrijebimo polifil conic-gradient ().



Kao i mnogi programi za praćenje kondicije, jedan od najpopularnijih dijelova Runkeira je sposobnost praćenja podataka

Kao i mnogi programi za praćenje kondicije, jedan od najpopularnijih dijelova Runkeira je sposobnost praćenja podataka

Za mene je najprivlačniji dio ove tehnike taj što možete započeti s izradom vizualizacija podataka čak i s najskromnijim JavaScript znanjem. Uglavnom ćemo koristiti našu datoteku skripte za čuvanje podataka, pa ako budete mogli pisati JavaScript objekte, bit ćete na dobrom putu.

Postavljanje aplikacije

Za ovaj prototip dopustit ću Bootstrapu da podigne teške stvari kada su u pitanju stil i izgled, tako da se možemo usredotočiti na kut specifičan za Angular. Pretpostavit ću da ste u svoj HTML uključili knjižnicu Angular te postavili i povezali svoju aplikaciju Angular (pogledajte primjer koda za detalje o tome kako to učiniti, ako je potrebno).

Sada ćemo stvoriti strukturu podataka za našu aplikaciju JogTracker. To će biti vrlo jednostavno, sa svakim 'jogom' pohranjenim kao objekt sa svojstvom vremena, udaljenosti i datuma. Te ćemo objekte pohraniti u niz nazvan $ scope.data - $ scope nam omogućuje pristup tim podacima izravno iz našeg kontrolera u HTML-u.

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

Da bih kreirao svoje vizualizacije, također moram znati maksimalne vrijednosti za vrijeme i udaljenost. To se može učiniti za svaki pomoću kratkog dijela JavaScript-a:

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

Tada mogu učiniti isto kako bih pronašao maksimalno vrijeme. Sada imam sve svoje podatke pohranjene i dostupne iz mog HTML-a, to je to za JavaScript!

kako nacrtati osobu odozgo

Grafikon

Glavna vizualizacija koju ću stvoriti je trakasti grafikon koji prikazuje zadnjih 10 jogova iz mojih podataka, sa trakom i za udaljenost i za vrijeme. Pristupačnost je važna, pa ću u HTML-u stvoriti tablicu koja sadrži podatke i pomoću CSS-a to vizualno pretvoriti u trakasti grafikon.

Kako je trakasti grafikon HTML tablica, možemo dodati zaglavlja tablica samo za čitače zaslona radi pristupačnosti

Kako je trakasti grafikon HTML tablica, možemo dodati zaglavlja tablica samo za čitače zaslona radi pristupačnosti

Za početak ću iskoristiti ng-repeat funkcionalnost Angulala da se provučem kroz svoj niz $ scope.data i ispljunem podatke u tablicu.

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

To će stvoriti redak tablice za svaki unos u podatke. Deklariram pojedinačno ime za svaki unos kao jog. To mi omogućuje pristup svojstvima tog objekta, kao što je jog.distance. Također sam koristio neke kutne filtre pomoću |. U atributu ng-repeat, filtar limitTo omogućuje vam ograničenje broja prikazanih unosa. Vrijednost 10 prikazat će prvih 10 unosa, no želim prikazati posljednjih 10. Zbog toga sam limitTo postavio na -10.

Sada imamo pristupačnu tablicu koja prikazuje naše podatke. Pretvorimo to u trakasti grafikon. Prvo, moramo postaviti neki CSS da nadjačamo izgled naše tablice.

kako biti slobodni ilustrator
.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; }

To pretvara i tablicu i ćeliju u blokovne elemente, dodaje obrub za prikaz osi X i Y i postavlja položaj i širinu ćelija koje će postati naše trake. Postavljamo apsolutno pozicioniranje jer ćemo pomoću neke kutne magije razmaknuti trake duž našeg grafikona pomoću lijevog svojstva.

Također sam postavio neke razrede za svaku traku, kako bih im dao boju pozadine i nadoknadio njihov položaj. Ćelija .legend prikazivat će datum ispod traka, pa je pozicionirana kao takva. .time će sjediti pored .distance bar, pa je gurnut zajedno s određenom marginom.

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

Puno je dodatnih stilskih dodira, poput rotiranja teksta duž traka, pa pogledajte cjeloviti kôd u primjeru projekta. U redu, sada ćemo istražiti čaroliju uglova u našem HTML-u!

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

Ključni dio izrade grafikona je atribut ng-style koji primjenjuje stil koristeći vrijednosti podataka Angular. Stiliziranje u ng stilu napisano je poput objekta s parovima vrijednosti ključeva. Ovdje također možete predati aritmetiku i miješati brojeve i nizove.

Prvo pogledajmo lijevu vrijednost koja je ista na svim stanicama. Želim rasporediti svojih 10 traka ravnomjerno po širini grafikona, tako da ću ih razmaknuti u koracima od 10 posto.

najbolji monitor za igre i grafički dizajn
left:$index * 10 +'%'

Da bih to učinio, koristim vrijednost indeksa $ koju Angular dodjeljuje svim unosima u ng-repeat, krećući se od nule u koracima od jedan, baš kao u JavaScript nizu. Dakle, ako izračunamo matematiku, moja prva ćelija imat će lijevu vrijednost: 0% - $ index (0) x 10 (0) + '%' (jedinica kao niz). Moja druga ćelija u ovom stupcu imat će lijevu vrijednost 10 posto, sljedećih 20 posto itd. Također se matematikom mogu služiti za promjenu visine svojih šipki.

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

Ovdje uzimam udaljenost svog pojedinačnog trčanja i dijelim je s maksimalnom udaljenostom u nizu. Zatim to pomnožim s 300 (visina mog grafikona u px), a zatim dodam svoju jedinicu px kao niz.

Ako uzmemo u obzir što bi se dogodilo s ulaskom na najveću udaljenost, rezultat jog.distance / maxDistance bio bi jedan (budući da je riječ o istom broju), što bi dalo rezultat od 300px. To znači da će naša najveća traka uvijek biti pune visine grafikona, a ostale trake imat će visine u odnosu na ovu.

Idealno bi bilo da se većina ove logike premjesti na naš JavaScript, možda kao prilagođeni kutni filtar, što HTML čini čišćim. Međutim, radi lakšeg razumijevanja, u ovoj ćemo ga fazi koristiti izravno u HTML-u.

Konačni dio čarolije Angular data-vis je upotreba atributa ng-klase za primjenu klase, ovisno o tome je li uvjet zadovoljen. U ovom slučaju želim dodati razred istaknutosti najduljem džogiranju, pa na svoj dodajem ng-class = '{highlight: jog.distance === maxDistance}'element.

Zaključak

Naša prva kutna vizualizacija podataka je dovršena! Vrijednosti Angular ne mogu se koristiti samo u atributima stila. Možemo ih koristiti unutar umetnutog SVG-a, pa čak i koristiti ih u polifilima kao što je konični gradijent Lea Verou () za stvaranje složenijih vizualizacija.

Riječi : Nick Moreton

Nick Moreton predavač je na Sveučilištu Birmingham City. Njegova područja stručnosti uključuju HTML, CSS, JavaScript, AngularJS i WordPress. Ovaj je članak izvorno objavljen u broju 274 časopisa net

Sviđa li vam se ovo? Pročitajte ovo!