Bygg et data dashbord med AngularJS

Så snart jeg begynte å leke med AngularJS, slo det meg at dets evne til å hente data og bruke dem direkte i markering kunne gi store muligheter for datavisualisering. Denne tilnærmingen kan presentere en veldig rask og enkel måte å lage datavisualiseringer fra bunnen av, i stedet for å måtte stole på et eget bibliotek.

I denne opplæringen begynner vi å bygge et datadashboard for en webapp - i dette tilfellet en RunKeeper-klon kalt 'JogTracker'. Vi vil gå videre fra å bruke vinkelverdier i HTML-stil, til inline SVG, før vi bruker konisk-gradient () polyfill.



Som mange treningssporingsapplikasjoner, er en av de mest populære delene av Runkeeper muligheten til å spore dataene dine

Som mange treningssporingsapplikasjoner, er en av de mest populære delene av Runkeeper muligheten til å spore dataene dine

For meg er den mest tiltalende delen av denne teknikken at du kan begynne å bygge datavisualiseringer med selv den mest begrensede JavaScript-kunnskapen. Vi bruker i stor grad skriptfilen vår til å lagre data, så hvis du kan skrive JavaScript-objekter, vil du være godt på vei.

Appoppsett

For denne prototypen skal jeg la Bootstrap gjøre tungt løft når det gjelder stil og layout, slik at vi kan fokusere på den vinkelspesifikke koden. Jeg antar at du har tatt med Angular-biblioteket i HTML-en din, og har satt opp og koblet Angular-appen din (se eksempelkode for detaljer om hvordan du gjør dette, om nødvendig).

Vi skal nå lage datastrukturen for JogTracker-applikasjonen. Vi vil holde dette veldig enkelt, med hver 'jogging' lagret som et objekt med en egenskap for tid, avstand og dato. Vi lagrer disse objektene i en matrise kalt $ scope.data - $ scope lar oss få tilgang til disse dataene direkte fra innsiden av kontrolleren vår i HTML.

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

For å lage visualiseringene mine, trenger jeg også å vite maksimale verdier for tid og avstand. Dette kan gjøres for hver med et kort stykke JavaScript:

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

Jeg kan da gjøre det samme for å finne maksimal tid. Nå har jeg lagret alle dataene mine og er tilgjengelige fra HTML-en, det er det for JavaScript!

gopro hero 5 økt cyber mandag

Søylediagram

Hovedvisualiseringen jeg skal lage er et søylediagram som viser de siste 10 joggene fra dataene mine, med en søyle for både avstand og tid. Tilgjengelighet er viktig, så i HTML vil jeg lage en tabell som inneholder dataene, og bruke CSS for å konvertere dette visuelt til et søylediagram.

Siden stolpediagrammet er en HTML-tabell, kan vi legge til tabelloverskrifter bare for skjermlesere for tilgjengelighet

Siden stolpediagrammet er en HTML-tabell, kan vi legge til tabelloverskrifter bare for skjermlesere for tilgjengelighet

Til å begynne med vil jeg utnytte ng-repeat-funksjonaliteten til Angular til å gå gjennom $ array.data-arrayet og spytte dataene ut i en tabell.

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

Dette vil opprette en tabellrad for hver oppføring i dataene. Jeg erklærer det individuelle navnet for hver oppføring som joggetur. Dette gjør at jeg får tilgang til egenskapene til det objektet, for eksempel jog. Avstand. Jeg har også brukt noen vinkelfiltre med |. I ng-repeat-attributtet lar limitTo-filteret deg begrense antall oppføringer som vises. En verdi på 10 vil vise de første 10 oppføringene, men jeg vil vise de siste 10. For dette setter jeg grensen til -10.

Vi har nå en tilgjengelig tabell som viser dataene våre. La oss gjøre det om til et søylediagram. For det første må vi sette opp litt CSS for å overstyre utseendet til bordet vårt.

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

Dette gjør både tabellen og cellen til blokkeringselementer, legger til en ramme for å vise en X- og Y-akse, og setter opp posisjonering og bredde på cellene som vil bli barene våre. Vi setter absolutt posisjonering ettersom vi skal bruke litt vinkelmagi til å plassere stolpene langs diagrammet vårt ved hjelp av venstre eiendom.

Jeg satte også opp noen klasser for hver stolpe for å gi dem en bakgrunnsfarge og kompensere for deres posisjon. .Legend-cellen vil vise datoen under stolpene, så har blitt plassert som sådan. .Time vil sitte ved siden av avstandsfeltet, så har blitt knuffet sammen med litt margin.

hvordan komme inn på en kunstskole
.bar-chart .legend { bottom: -40px; } .bar-chart .distance { background: #B9D7D9; } .bar-chart .time { background: #668284; margin-left: 30px; }

Det er mange ekstra stilistiske detaljer, for eksempel roterende tekst langs stolpene, så se eksemplet på prosjektet for full kode. OK, nå for å grave i Angular magic i HTML-en vår!

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

Den viktigste delen av å lage diagrammet er attributtet ng-style som bruker styling ved hjelp av Angular data-verdier. Styling i ng-stil er skrevet som et objekt med nøkkelverdipar. Du kan også gi aritmetikk og blande tall og strenger her.

La oss først se på den venstre verdien, som er den samme på alle cellene. Jeg vil ordne de 10 stolpene mine jevnt over bredden på kartet mitt, så vil plassere dem i trinn på 10 prosent.

left:$index * 10 +'%'

For å gjøre dette bruker jeg $ indeksverdien som Angular tilordner til alle oppføringene i ng-repetisjonen, går opp fra null i trinn på en, akkurat som i en JavaScript-matrise. Så hvis vi kjører matematikken, vil min første celle ha en venstreverdi på: 0% - $ indeks (0) x 10 (0) + '%' (enheten som en streng). Den andre cellen min i denne kolonnen vil ha en venstreverdi på 10 prosent, de neste 20 prosent og så videre. Jeg kan også bruke matematikk for å variere høyden på stolpene mine.

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

Her tar jeg avstanden til min individuelle joggetur og deler den med den maksimale avstanden i matrisen. Deretter multipliserer jeg dette med 300 (høyden på diagrammet mitt i px) og legger deretter til enheten min px som en streng.

hvordan man blander maling på lerret

Hvis vi vurderer hva som ville skje med den lengste oppføringen, vil resultatet av jog distanse / maxDistance være ett (ettersom de er det samme tallet), noe som vil gi et resultat på 300px. Dette betyr at vår største stolpe alltid vil være i full høyde på diagrammet, og de andre stolpene vil ha høyder i forhold til dette.

Ideelt sett vil det meste av denne logikken bli flyttet til JavaScript, kanskje som et tilpasset vinkelfilter, noe som gjør HTML renere. For å gjøre det lettere å forstå, bruker vi det på dette stadiet direkte i HTML-en.

Det siste stykket Angular data-vis magic er å bruke attributtet ng-class til å bruke en klasse, basert på om en betingelse er oppfylt. I dette tilfellet vil jeg legge til en klasse med høydepunkt i den lengste joggeturen, så jeg legger til ng-class = '{highlight: jog.distance === maxDistance}' til minelement.

Konklusjon

Vår første visualisering av vinklede data er fullført! Det er ikke bare i stilattributter at vinkelverdier kan brukes. Vi kan bruke dem inne i innebygd SVG og til og med bruke dem i polyfills som Lea Verous koniske gradient () for å skape mer komplekse visualiseringer.

Ord : Nick Moreton

Nick Moreton er foreleser ved Birmingham City University. Hans fagområder inkluderer HTML, CSS, JavaScript, AngularJS og WordPress. Denne artikkelen ble opprinnelig publisert i nummer 274 av nettmagasinet

Likte dette? Les disse!