Erstellen Sie ein Daten-Dashboard mit AngularJS

Als ich anfing, mit AngularJS herumzuspielen, fiel mir auf, dass seine Fähigkeit, Daten zu erfassen und direkt im Markup zu verwenden, großartige Möglichkeiten für die Datenvisualisierung bieten könnte. Dieser Ansatz könnte eine sehr schnelle und einfache Möglichkeit darstellen, Datenvisualisierungen von Grund auf neu zu erstellen, anstatt sich auf eine separate Bibliothek verlassen zu müssen.



In diesem Tutorial erstellen wir ein Daten-Dashboard für eine Web-App - in diesem Fall einen RunKeeper-Klon namens 'JogTracker'. Wir werden von der Verwendung von Winkelwerten im HTML-Stil zu Inline-SVG übergehen, bevor wir die Polyfüllung mit konischem Gradienten () verwenden.



Wie bei vielen Fitness-Tracking-Anwendungen ist die Möglichkeit, Ihre Daten zu verfolgen, einer der beliebtesten Teile von Runkeeper

Wie bei vielen Fitness-Tracking-Anwendungen ist die Möglichkeit, Ihre Daten zu verfolgen, einer der beliebtesten Teile von Runkeeper

Für mich ist der attraktivste Teil dieser Technik, dass Sie mit der Erstellung von Datenvisualisierungen auch mit den geringsten JavaScript-Kenntnissen beginnen können. Wir werden unsere Skriptdatei hauptsächlich zum Speichern von Daten verwenden. Wenn Sie also JavaScript-Objekte schreiben können, sind Sie auf einem guten Weg.



App-Setup

Für diesen Prototyp werde ich Bootstrap das schwere Heben überlassen, wenn es um Stil und Layout geht, damit wir uns auf den Angular-spezifischen Code konzentrieren können. Ich gehe davon aus, dass Sie die Angular-Bibliothek in Ihren HTML-Code aufgenommen und Ihre Angular-App eingerichtet und verknüpft haben (siehe die Beispielcode Einzelheiten dazu finden Sie bei Bedarf.

Wir werden jetzt die Datenstruktur für unsere JogTracker-Anwendung erstellen. Wir werden dies wirklich einfach halten, wobei jeder 'Jog' als Objekt mit einer Zeit-, Entfernungs- und Datumseigenschaft gespeichert wird. Wir speichern diese Objekte in einem Array namens $ scope.data - $ scope ermöglicht uns den direkten Zugriff auf diese Daten aus unserem Controller im HTML.

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

Um meine Visualisierungen zu erstellen, muss ich auch die Maximalwerte für Zeit und Entfernung kennen. Dies kann für jeden mit einem kurzen Stück JavaScript erfolgen:



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

Ich kann dann das Gleiche tun, um die maximale Zeit zu finden. Jetzt habe ich alle meine Daten gespeichert und bin über mein HTML zugänglich, das wars für JavaScript!

Corel Painter Essentials gegen Clip Studio Paint Pro

Balkendiagramm

Die Hauptvisualisierung, die ich erstellen werde, ist ein Balkendiagramm, das die letzten 10 Jogs aus meinen Daten zeigt, mit einem Balken für Entfernung und Zeit. Die Barrierefreiheit ist wichtig, daher werde ich im HTML eine Tabelle erstellen, die die Daten enthält, und CSS verwenden, um diese visuell in ein Balkendiagramm zu konvertieren.

Da das Balkendiagramm eine HTML-Tabelle ist, können wir Tabellenüberschriften nur für Bildschirmleser hinzufügen, um die Zugänglichkeit zu gewährleisten

Da das Balkendiagramm eine HTML-Tabelle ist, können wir Tabellenüberschriften nur für Bildschirmleser hinzufügen, um die Zugänglichkeit zu gewährleisten

Zunächst werde ich die ng-repeat-Funktion von Angular nutzen, um mein Array $ scope.data zu durchlaufen und die Daten in eine Tabelle auszuspucken.

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

Dadurch wird für jeden Eintrag in den Daten eine Tabellenzeile erstellt. Ich erkläre den individuellen Namen für jeden Eintrag als Jog. Dadurch kann ich auf die Eigenschaften dieses Objekts zugreifen, z. B. jog.distance. Ich habe auch einige Winkelfilter mit | verwendet. Im Attribut ng-repeat können Sie mit dem Filter limitTo die Anzahl der angezeigten Einträge begrenzen. Ein Wert von 10 zeigt die ersten 10 Einträge an, ich möchte jedoch die letzten 10 anzeigen. Dazu setze ich den Grenzwert auf -10.

wie man Charakter-Konzeptkunst zeichnet

Wir haben jetzt eine zugängliche Tabelle mit unseren Daten. Lassen Sie es uns in ein Balkendiagramm verwandeln. Zunächst müssen wir CSS einrichten, um das Erscheinungsbild unserer Tabelle zu überschreiben.

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

Dadurch werden sowohl die Tabelle als auch die Zelle in Blockelemente umgewandelt, ein Rahmen zur Anzeige einer X- und Y-Achse hinzugefügt und die Position und Breite der Zellen festgelegt, die zu unseren Balken werden. Wir legen die absolute Position fest, da wir mit etwas Winkelmagie die Balken entlang unseres Diagramms mithilfe der linken Eigenschaft platzieren werden.

Ich habe auch einige Klassen für jeden Balken eingerichtet, um ihnen eine Hintergrundfarbe zu geben und ihre Position zu versetzen. In der Zelle .legend wird das Datum unter den Balken angezeigt, das als solches positioniert wurde. .time wird neben der .distance-Leiste sitzen, wurde also zusammen mit einem gewissen Rand angestupst.

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

Es gibt viele zusätzliche stilistische Details, wie z. B. das Drehen von Text entlang der Balken. Den vollständigen Code finden Sie im Beispielprojekt. OK, jetzt in die Angular-Magie in unserem HTML eintauchen!

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

Der Hauptteil beim Erstellen des Diagramms ist das Attribut ng-style, das das Styling mithilfe von Winkeldatenwerten anwendet. Das Styling im ng-Stil wird wie ein Objekt mit Schlüsselwertpaaren geschrieben. Sie können hier auch Arithmetik übergeben und Zahlen und Zeichenfolgen mischen.

Schauen wir uns zunächst den linken Wert an, der für alle Zellen gleich ist. Ich möchte meine 10 Balken gleichmäßig über die Breite meines Diagramms verteilen, damit sie in Schritten von 10 Prozent verteilt werden.

left:$index * 10 +'%'

Dazu verwende ich den $ index-Wert, den Angular allen Einträgen in der ng-Wiederholung zuweist und der in Schritten von eins von Null aufsteigt, genau wie in einem JavaScript-Array. Wenn wir also die Mathematik ausführen, hat meine erste Zelle einen linken Wert von: 0% - $ index (0) x 10 (0) + '%' (die Einheit als Zeichenfolge). Meine zweite Zelle in dieser Spalte hat einen linken Wert von 10 Prozent, die nächsten 20 Prozent und so weiter. Ich kann auch Mathematik verwenden, um die Höhe meiner Balken zu variieren.

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

Hier nehme ich die Distanz meines individuellen Jogging und dividiere sie durch die maximale Distanz im Array. Ich multipliziere dies dann mit 300 (die Höhe meines Diagramms in px) und füge dann meine Einheit von px als Zeichenfolge hinzu.

Wenn wir überlegen, was mit dem Eintrag für die längste Entfernung passieren würde, wäre das Ergebnis von jog.distance / maxDistance eins (da es sich um dieselbe Zahl handelt), was ein Ergebnis von 300px ergeben würde. Dies bedeutet, dass unser größter Balken immer die volle Höhe des Diagramms hat und die anderen Balken relativ dazu Höhen haben.

Im Idealfall wird der größte Teil dieser Logik in unser JavaScript verschoben, möglicherweise als benutzerdefinierter Winkelfilter, wodurch der HTML-Code sauberer wird. Zum besseren Verständnis verwenden wir es zu diesem Zeitpunkt jedoch direkt im HTML-Code.

Der letzte Teil von Angular Data-Vis Magic besteht darin, das Attribut ng-class zu verwenden, um eine Klasse anzuwenden, basierend darauf, ob eine Bedingung erfüllt ist. In diesem Fall möchte ich dem längsten Joggen eine Highlight-Klasse hinzufügen, also füge ich ng-class = '{Highlight: jog.distance === maxDistance}' zu meinem hinzuElement.

Fazit

Unsere erste Angular-Datenvisualisierung ist abgeschlossen! Winkelwerte können nicht nur in Stilattributen verwendet werden. Wir können sie in Inline-SVG verwenden und sie sogar in Polyfills wie Lea Verous Conic-Gradient () verwenden, um komplexere Visualisierungen zu erstellen.

Wörter :: Nick Moreton

Nick Moreton ist Dozent an der Birmingham City University. Zu seinen Fachgebieten gehören HTML, CSS, JavaScript, AngularJS und WordPress. Dieser Artikel wurde ursprünglich in Ausgabe 274 des Netzmagazins veröffentlicht

Apple Mac Pro 15 Zoll Fall

Mochte dies? Lese das!