Основен / Как Да

Изградете табло за данни с AngularJS

Веднага след като започнах да си играя с AngularJS, ми направи впечатление, че способността му да грабва данни и да ги използва директно в маркирането може да предложи големи възможности за визуализация на данни. Този подход може да представи наистина бърз и лесен начин за създаване на визуализации на данни от нулата, вместо да се налага да разчитате на отделна библиотека.

В този урок ще започнем да изграждаме табло за данни за уеб приложение - в този случай клон на RunKeeper, наречен „JogTracker“. Ще преминем от използване на ъглови стойности в HTML стил до вграден SVG, преди да използваме полификата conic-gradient ().

Подобно на много приложения за проследяване на фитнес, една от най-популярните части на Runkeeper е възможността за проследяване на вашите данни

За мен най-привлекателната част от тази техника е, че можете да започнете да изграждате визуализации на данни с дори най-ограничените познания за JavaScript. Ще използваме до голяма степен нашия скриптов файл, за да съхраняваме данни, така че ако можете да пишете JavaScript обекти, ще бъдете на път.

Настройка на приложението

За този прототип ще позволя на Bootstrap да вдигне тежко, когато става въпрос за стил и оформление, така че можем да се съсредоточим върху специфичния за Angular код. Предполагам, че сте включили библиотеката Angular във вашия HTML и сте настроили и свързали вашето приложение Angular (вижте примерен код за подробности как да направите това, ако е необходимо).

Сега ще създадем структурата на данните за нашето приложение JogTracker. Ще запазим това наистина просто, като всеки „джогинг“ се съхранява като обект със свойство за време, разстояние и дата. Ще съхраняваме тези обекти в масив, наречен $ scope.data - $ scope ни позволява да получим достъп до тези данни директно от вътрешността на нашия контролер в HTML.

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

За да създам своите визуализации, също така трябва да знам максималните стойности за време и разстояние. Това може да се направи за всеки с кратко парче JavaScript:

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

След това мога да направя същото, за да намеря максимално време. Сега всичките ми данни се съхраняват и са достъпни от моя HTML, това е за JavaScript!

Стълбовидна диаграма

Основната визуализация, която ще създам, е стълбовидна диаграма, показваща последните 10 джогинга от моите данни, с лента както за разстоянието, така и за времето. Достъпността е важна, така че в HTML ще създам таблица, която съдържа данните, и ще използвам CSS, за да преобразувам това визуално в стълбовидна диаграма.

Тъй като стълбовата диаграма е HTML таблица, можем да добавим заглавки на таблици само за екранни четци за достъпност

За начало ще използвам функционалността на ng-repeat на Angular, за да прегледам моя масив $ scope.data и да изплюя данните в таблица.

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

Това ще създаде ред на таблица за всеки запис в данните. Обявявам индивидуалното име за всеки запис като джогинг. Това ми дава достъп до свойствата на този обект, като jog.distance. Използвал съм и някои ъглови филтри, използвайки |. В атрибута ng-repeat филтърът limitTo ви позволява да ограничите броя на показаните записи. Стойност 10 ще покаже първите 10 записа, но искам да покажа последните 10. За това задам limitTo на -10.

Вече имаме достъпна таблица, показваща нашите данни. Нека го превърнем в стълбовидна диаграма. Първо, трябва да настроим някои CSS, за да заменим външния вид на нашата таблица.

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

Това превръща както таблицата, така и клетката в блокови елементи, добавя граница, за да покаже оста X и Y и задава позициониране и ширина на клетките, които ще се превърнат в нашите ленти. Задаваме абсолютно позициониране, тъй като ще използваме ъглова магия, за да разделим лентите по нашата диаграма, използвайки лявото свойство.

Също така създадох някои класове за всяка лента, за да им дам цвят на фона и да компенсирам позицията им. Клетката .legend ще показва датата под лентите, така че е позиционирана като такава. .time ще седи до лентата .distance, така че е подхвърлен заедно с известен марж.

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

Има много допълнителни стилистични щрихи, като завъртане на текст по лентите, така че, моля, вижте примерния проект за пълен код. Добре, сега да разгледаме ъгловата магия в нашия HTML!

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

Ключовата част при създаването на диаграмата е атрибутът ng-style, който прилага стилизиране, използвайки стойности на ъглови данни. Стилирането в ng-стил се записва като обект с двойки ключови стойности. Можете също така да предавате аритметика и да смесвате числа и низове тук.

Първо нека разгледаме лявата стойност, която е еднаква за всички клетки. Искам да подредя 10-те си ленти равномерно по ширината на диаграмата, така че ще ги разпределя на 10 процента.

left:$index * 10 +'%'

За целта използвам стойността на индекса $, която Angular присвоява на всички записи в ng-repeat, като се увеличава от нула на стъпки от една, точно както в JavaScript масив. Така че, ако изпълним математиката, първата ми клетка ще има лява стойност от: 0% - $ index (0) x 10 (0) + '%' (единицата като низ). Втората ми клетка в тази колона ще има лява стойност 10%, следващите 20% и т.н. Също така мога да използвам математика, за да променя височината на баровете си.

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

Тук взема разстоянието на моя индивидуален джогинг и го разделям на максималното разстояние в масива. След това умножавам това по 300 (височината на диаграмата ми в px) и след това добавям моята единица px като низ.

Ако преценим какво би се случило с въвеждането на най-голямо разстояние, резултатът от jog.distance / maxDistance ще бъде един (тъй като те са еднакви), което ще даде резултат от 300px. Това означава, че нашата най-голяма лента винаги ще бъде с пълната височина на диаграмата, а останалите ленти ще имат височини спрямо това.

В идеалния случай по-голямата част от тази логика ще бъде преместена в нашия JavaScript, може би като персонализиран Angular филтър, правейки HTML по-чист. За по-лесно разбиране обаче на този етап ще го използваме директно в HTML.

Последното парче от Angular data-vis magic е да се използва атрибут ng-class за прилагане на клас въз основа на това дали е изпълнено условие. В този случай искам да добавя клас на подчертаване към най-дългия джогинг, така че добавям ng-class = '{highlight: jog.distance === maxDistance}' към мояелемент.

Заключение

Първата ни визуализация на ъглови данни е завършена! Не само в атрибутите на стила могат да се използват Angular стойности. Можем да ги използваме във вътрешното SVG и дори да ги използваме в полифили като коничен градиент на Lea Verou (), за да създадем по-сложни визуализации.

Думи : Ник Моретън

Ник Моретън е преподавател в Бирмингамския градски университет. Неговите области на компетентност включват HTML, CSS, JavaScript, AngularJS и WordPress. Тази статия първоначално е публикувана в брой 274 на списание net