Rakenna tiedonhallintapaneeli AngularJS: n avulla

Heti kun aloitin leikkimisen AngularJS: n kanssa, mieleeni tuli, että sen kyky napata tietoja ja käyttää niitä suoraan merkinnöissä voi tarjota suuria mahdollisuuksia tietojen visualisointiin. Tämä lähestymistapa voisi olla todella nopea ja yksinkertainen tapa luoda visualisointeja tyhjästä sen sijaan, että tarvitsisi luottaa erilliseen kirjastoon.



Tässä opetusohjelmassa aloitamme verkkopalvelun dashboardin rakentamisen - tässä tapauksessa RunKeeper-kloonin nimeltä JogTracker. Siirtymme kulma-arvojen käytöstä HTML-tyylissä sisäiseen SVG: hen ennen kartiomainen gradientti () -täytön käyttöä.



Kuten monet kuntoseurannan sovellukset, yksi Runkeeperin suosituimmista osista on kyky seurata tietojasi

Kuten monet kuntoseurannan sovellukset, yksi Runkeeperin suosituimmista osista on kyky seurata tietojasi

Minulle tämän tekniikan houkuttelevin osa on, että voit aloittaa tietojen visualisointien rakentamisen jopa rajallisimmalla JavaScript-tietämyksellä. Käytämme suurimmaksi osaksi skriptitiedostojamme tietojen säilyttämiseen, joten jos pystyt kirjoittamaan JavaScript-objekteja, olet hyvällä tavalla.



Sovelluksen asetukset

Annan tälle prototyypille Bootstrapin tekemään raskaan nostamisen tyylin ja asettelun suhteen, jotta voimme keskittyä kulmakohtaiseen koodiin. Oletan, että olet sisällyttänyt Angular-kirjaston HTML-koodiin ja olet määrittänyt ja linkittänyt Angular-sovelluksesi (katso esimerkkikoodi tarvittaessa lisätietoja tämän tekemisestä).

Aiomme nyt luoda tietorakenteen JogTracker-sovelluksellemme. Pidämme tämän todella yksinkertaisena, ja jokainen 'lenkki' tallennetaan esineeksi, jolla on aika, etäisyys ja päivämäärä -ominaisuus. Tallennamme nämä objektit ryhmään nimeltä $ scope.data - $ scope antaa meille pääsyn näihin tietoihin suoraan ohjaimen sisäpuolelta HTML-muodossa.

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

Visualisaatioiden luomiseksi minun on myös tiedettävä ajan ja etäisyyden maksimiarvot. Tämä voidaan tehdä jokaiselle lyhyellä JavaScript-palalla:



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

Voin sitten tehdä saman löytääksesi enimmäisaikaa. Nyt kaikki tietoni on tallennettu ja niitä voi käyttää HTML: stä, se on JavaScriptille!

kuinka piirtää ihmisen luuranko

Pylväsdiagrammi

Tärkein visualisointi, jonka aion luoda, on pylväsdiagrammi, joka näyttää viimeiset 10 juoksua tietoistani, ja pylvään sekä etäisyydelle että ajalle. Esteettömyys on tärkeää, joten luon HTML-muodossa taulukon, joka sisältää tiedot, ja muunnan CSS: n avulla tämän visuaalisesti pylväsdiagrammiksi.

Koska pylväsdiagrammi on HTML-taulukko, voimme lisätä taulukon otsikot vain näytönlukuohjelmille esteettömyyden vuoksi

Koska pylväsdiagrammi on HTML-taulukko, voimme lisätä taulukon otsikot vain näytönlukuohjelmille esteettömyyden vuoksi

Aloitan hyödyntämällä Angularin ng-repeat-toiminnallisuutta siirtyäksesi $ scope.data -matriisini läpi ja sylkemään tiedot taulukkoon.

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

Tämä luo taulukon rivin jokaiselle tietojen merkinnälle. Julistan jokaisen merkinnän yksilöllisen nimen lenkiksi. Tämä antaa minulle mahdollisuuden käyttää kyseisen objektin ominaisuuksia, kuten jog.distance. Olen myös käyttänyt joitain kulmasuodattimia käyttämällä |. Ng-repeat-määritteessä limitTo-suodatin antaa sinun rajoittaa näytettävien merkintöjen määrää. Arvo 10 näyttää ensimmäiset 10 merkintää, mutta haluan näyttää viimeiset 10. Tätä varten asetin raja-arvon arvoon -10.

Meillä on nyt käytettävissä oleva taulukko, joka näyttää tietomme. Tehdään siitä pylväskaavio. Ensinnäkin meidän on perustettava joitain CSS: ää korvaamaan taulukon ulkonäkö.

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

Tämä muuttaa sekä taulukon että solun lohkoelementeiksi, lisää reunan osoittamaan X- ja Y-akselit, ja asettaa sijainnin ja leveyden soluihin, joista tulee palkit. Asetamme absoluuttisen paikannuksen, kun aiomme käyttää jonkin verran kulmamaagiaa palkkien sijoittamiseksi kaaviossamme vasemmalla ominaisuudella.

Perustin myös kutakin baaria varten joitain luokkia, jotta he saisivat taustavärin ja tasoittavat heidän asemaansa. .Legend-solu näyttää päivämäärän palkkien alapuolella, joten se on sijoitettu sellaisenaan. .aika istuu .etäisyyspalkin vieressä, joten sitä on työnnetty jonkin verran marginaalia pitkin.

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

On paljon ylimääräisiä tyylisiä yksityiskohtia, kuten tekstin kiertäminen palkkien varrella, joten katso täydellinen koodi esimerkkiprojektista. OK, nyt kaivaa kulmamaagia HTML: ssä!

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

Kaavion luomisen avainosa on ng-tyylinen attribuutti, joka käyttää muotoilua kulma-arvojen avulla. Ng-tyylinen muotoilu kirjoitetaan kuten esine, jolla on avainarvopareja. Täällä voit myös siirtää aritmeettisen ja sekoittaa numeroita ja merkkijonoja.

parhaat tietokoneet videon muokkausta varten 2015

Tarkastellaan ensin vasenta arvoa, joka on sama kaikissa soluissa. Haluan järjestää 10 pylvästäni tasaisesti kaavion leveydelle, joten sijoittan ne 10 prosentin välein.

left:$index * 10 +'%'

Tätä varten käytän $ index-arvoa, jonka Angular määrittää kaikille ng-replay-merkinnöille, nousemalla nollasta yhden askelin, aivan kuten JavaScript-taulukossa. Joten jos suoritamme matematiikan, ensimmäisellä solullani on vasen arvo: 0% - $ index (0) x 10 (0) + '%' (yksikkö merkkijonona). Toisen soluni tässä sarakkeessa vasemmanpuoleinen arvo on 10 prosenttia, seuraava 20 prosenttia ja niin edelleen. Voin myös käyttää matematiikkaa palkkien korkeuksien vaihtamiseen.

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

Tässä otan yksittäisen lenkkeilyni etäisyyden ja jaan sen matriisin maksimietäisyydellä. Kerrotaan tämän sitten 300: lla (kaavion korkeus px: ssä) ja lisätään sitten yksikköni px merkkijonona.

Jos otetaan huomioon, mitä tapahtuisi pisin matkan syöttö, jog.distance / maxDistance-tulos olisi yksi (koska niitä on sama numero), mikä antaisi tuloksen 300px. Tämä tarkoittaa, että suurin palkkimme on aina kaavion koko korkeus, ja muilla palkeilla on siihen nähden korkeudet.

Ihannetapauksessa suurin osa tästä logiikasta siirretään JavaScriptiimme, ehkä mukautettuna kulmasuodattimena, mikä tekee HTML: stä puhtaamman. Ymmärtämisen helpottamiseksi käytämme kuitenkin tässä vaiheessa sitä suoraan HTML-muodossa.

kubo ja kahden jousen taidekirja

Viimeinen kulmaisen datan visuaalinen osa on käyttää ng-class-määritettä luokan soveltamiseen sen perusteella, täyttyvätkö ehdot. Tässä tapauksessa haluan lisätä korostusluokan pisimpään lenkkiin, joten lisätään ng-class = '{highlight: jog.distance === maxDistance}' omaanelementti.

Johtopäätös

Ensimmäinen kulmatietojen visualisointimme on valmis! Kulma-arvoja voidaan käyttää paitsi tyylimääritteissä. Voimme käyttää niitä sisäisen SVG: n sisällä ja jopa käyttää niitä polyfillien, kuten Lea Veroun kartion gradientin (), sisällä monimutkaisempien visualisointien luomiseksi.

Sanat : Nick Moreton

Nick Moreton on lehtori Birminghamin kaupungin yliopistossa. Hänen erikoisalojaan ovat HTML, CSS, JavaScript, AngularJS ja WordPress. Tämä artikkeli julkaistiin alun perin verkkolehden numerossa 274

Piditkö tästä? Lue nämä!