Δημιουργήστε έναν πίνακα ελέγχου δεδομένων με το AngularJS

Μόλις άρχισα να παίζω με το AngularJS, μου φάνηκε ότι η ικανότητά του να συλλέγει δεδομένα και να τα χρησιμοποιεί απευθείας σε σήμανση θα μπορούσε να προσφέρει μεγάλες δυνατότητες οπτικοποίησης δεδομένων. Αυτή η προσέγγιση θα μπορούσε να παρουσιάσει έναν πραγματικά γρήγορο και απλό τρόπο δημιουργίας οπτικοποιήσεων δεδομένων από το μηδέν, αντί να χρειάζεται να βασιστείτε σε μια ξεχωριστή βιβλιοθήκη.

Σε αυτό το σεμινάριο θα αρχίσουμε να δημιουργούμε έναν πίνακα δεδομένων δεδομένων για μια εφαρμογή ιστού - σε αυτήν την περίπτωση ένας κλώνος RunKeeper που ονομάζεται 'JogTracker'. Θα προχωρήσουμε από τη χρήση γωνιακών τιμών σε στυλ HTML, για να ενσωματώσουμε το SVG, πριν χρησιμοποιήσουμε την κωνική διαβάθμιση () polyfill.



Όπως πολλές εφαρμογές παρακολούθησης φυσικής κατάστασης, ένα από τα πιο δημοφιλή μέρη του Runkeeper είναι η δυνατότητα παρακολούθησης των δεδομένων σας

Όπως πολλές εφαρμογές παρακολούθησης φυσικής κατάστασης, ένα από τα πιο δημοφιλή μέρη του Runkeeper είναι η δυνατότητα παρακολούθησης των δεδομένων σας

Για μένα, το πιο ελκυστικό μέρος αυτής της τεχνικής είναι ότι μπορείτε να αρχίσετε να δημιουργείτε οπτικοποιήσεις δεδομένων με ακόμη και τις πιο περιορισμένες γνώσεις JavaScript. Θα χρησιμοποιήσουμε σε μεγάλο βαθμό το αρχείο σεναρίου μας για να κρατήσουμε δεδομένα, οπότε αν μπορείτε να γράψετε αντικείμενα JavaScript, θα είστε καλά στο δρόμο σας.

Ρύθμιση εφαρμογής

Για αυτό το πρωτότυπο θα επιτρέψω στο Bootstrap να κάνει τη βαριά ανύψωση όσον αφορά το στυλ και τη διάταξη, έτσι ώστε να μπορούμε να επικεντρωθούμε στον γωνιακό κώδικα. Θα υποθέσω ότι έχετε συμπεριλάβει τη γωνιακή βιβλιοθήκη στο HTML σας και ότι έχετε ρυθμίσει και συνδέσει την εφαρμογή σας Γωνιακή (δείτε το παράδειγμα κώδικα για λεπτομέρειες σχετικά με το πώς να το κάνετε αυτό, εάν χρειάζεται).

Τώρα πρόκειται να δημιουργήσουμε τη δομή δεδομένων για την εφαρμογή JogTracker. Θα το διατηρήσουμε πολύ απλό, με κάθε «τρέξιμο» να αποθηκεύεται ως αντικείμενο με ιδιότητα χρόνου, απόστασης και ημερομηνίας. Θα αποθηκεύσουμε αυτά τα αντικείμενα σε έναν πίνακα που ονομάζεται $ lingkup.data - Το εύρος $ μας επιτρέπει να έχουμε πρόσβαση σε αυτά τα δεδομένα απευθείας από το εσωτερικό του ελεγκτή μας στο 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!

πώς να ρυθμίσετε το απόρρητο στις φωτογραφίες του facebook

Ραβδόγραμμα

Η κύρια οπτικοποίηση που πρόκειται να δημιουργήσω είναι ένα γράφημα ράβδων που δείχνει τα τελευταία 10 τζόγκινγκ από τα δεδομένα μου, με ράβδο για απόσταση και χρόνο. Η προσβασιμότητα είναι σημαντική, οπότε στο HTML θα δημιουργήσω έναν πίνακα που περιέχει τα δεδομένα και θα χρησιμοποιήσω το CSS για να το μετατρέψω οπτικά σε γράφημα ράβδων.

Καθώς το γράφημα ράβδων είναι πίνακας HTML, μπορούμε να προσθέσουμε κεφαλίδες πίνακα μόνο για αναγνώστες οθόνης για προσβασιμότητα

Καθώς το γράφημα ράβδων είναι πίνακας HTML, μπορούμε να προσθέσουμε κεφαλίδες πίνακα μόνο για αναγνώστες οθόνης για προσβασιμότητα

Για να ξεκινήσω, θα αξιοποιήσω τη λειτουργικότητα ng-επανάληψης του Angular για να περάσω από τη συστοιχία $ lingkup.data και να φτύσω τα δεδομένα σε έναν πίνακα.

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

Αυτό θα δημιουργήσει μια σειρά πίνακα για κάθε καταχώρηση στα δεδομένα. Δηλώνω το μεμονωμένο όνομα για κάθε καταχώρηση ως jog. Αυτό μου επιτρέπει να έχω πρόσβαση στις ιδιότητες αυτού του αντικειμένου, όπως το jog.distance. Έχω χρησιμοποιήσει επίσης ορισμένα γωνιακά φίλτρα χρησιμοποιώντας το |. Στο χαρακτηριστικό ng-repeat, το φίλτρο limitTo σάς επιτρέπει να περιορίσετε τον αριθμό των καταχωρήσεων που εμφανίζονται. Μια τιμή 10 θα εμφανίσει τις πρώτες 10 καταχωρήσεις, ωστόσο θέλω να δείξω τις τελευταίες 10. Για αυτό έθεσα το όριο έως -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 θα εμφανίσει την ημερομηνία κάτω από τις γραμμές, έτσι έχει τοποθετηθεί ως έχει. . Ο χρόνος θα καθίσει δίπλα στη γραμμή .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-style γράφεται σαν ένα αντικείμενο με ζεύγη τιμών κλειδιών. Μπορείτε επίσης να περάσετε αριθμητικά και να αναμίξετε αριθμούς και χορδές εδώ.

Πρώτα ας δούμε την αριστερή τιμή, η οποία είναι η ίδια σε όλα τα κελιά. Θέλω να τακτοποιήσω τα 10 μπαρ μου ομοιόμορφα σε όλο το πλάτος του γραφήματος, οπότε θα τα χωρίσω σε βήματα 10%.

left:$index * 10 +'%'

Για να το κάνω αυτό, χρησιμοποιώ την τιμή ευρετηρίου $ που ο Angular εκχωρεί σε όλες τις καταχωρήσεις στο ng-επανάληψη, ανεβαίνοντας από το μηδέν σε βήματα μιας, όπως σε έναν πίνακα JavaScript. Αν λοιπόν εκτελέσουμε τα μαθηματικά, το πρώτο μου κελί θα έχει μια αριστερή τιμή: 0% - $ index (0) x 10 (0) + '%' (η μονάδα ως συμβολοσειρά). Το δεύτερο κελί μου σε αυτήν τη στήλη θα έχει μια αριστερή τιμή 10 τοις εκατό, το επόμενο 20 τοις εκατό και ούτω καθεξής. Μπορώ επίσης να χρησιμοποιήσω μαθηματικά για να διαφοροποιήσω το ύψος των ράβδων μου.

πώς να αποκτήσετε δωρεάν όλα τα φίλτρα vsco ios
height: (jog.distance / maxDistance) * 300 + 'px'

Εδώ παίρνω την απόσταση του ατομικού μου τζόκινγκ και τη διαχωρίζω με τη μέγιστη απόσταση στον πίνακα. Στη συνέχεια πολλαπλασιάζω αυτό με 300 (το ύψος του γραφήματός μου σε px) και έπειτα προσθέτω τη μονάδα μου px ως συμβολοσειρά.

Αν σκεφτούμε τι θα συνέβαινε με την καταχώριση μεγαλύτερης απόστασης, το αποτέλεσμα του jog.distance / maxDistance θα ήταν ένα (καθώς είναι ο ίδιος αριθμός), το οποίο θα έδινε ένα αποτέλεσμα 300px. Αυτό σημαίνει ότι η μεγαλύτερη ράβδος μας θα είναι πάντα το πλήρες ύψος του γραφήματος και οι άλλες ράβδοι θα έχουν ύψος σε σχέση με αυτό.

Στην ιδανική περίπτωση, το μεγαλύτερο μέρος αυτής της λογικής θα μεταφερθεί στο JavaScript μας, ίσως ως προσαρμοσμένο γωνιακό φίλτρο, καθιστώντας το HTML πιο καθαρό. Ωστόσο, για ευκολία κατανόησης, σε αυτό το στάδιο θα το χρησιμοποιήσουμε απευθείας στο HTML.

Το τελευταίο κομμάτι του Angular data-vis magic είναι να χρησιμοποιήσετε το χαρακτηριστικό ng-class για να εφαρμόσετε μια κλάση, με βάση το εάν πληρούται μια συνθήκη. Σε αυτήν την περίπτωση, θέλω να προσθέσω μια κλάση επισήμανσης στο μεγαλύτερο τρέξιμο, οπότε προσθέτω το ng-class = '{highlight: jog.distance === maxDistance}' στο myστοιχείο.

συμπέρασμα

Η πρώτη οπτικοποίηση γωνιακών δεδομένων ολοκληρώθηκε! Δεν είναι μόνο στα χαρακτηριστικά στυλ που μπορούν να χρησιμοποιηθούν γωνιακές τιμές. Μπορούμε να τα χρησιμοποιήσουμε μέσα στο inline SVG και ακόμη και να τα χρησιμοποιήσουμε μέσα σε polyfills όπως η κωνική κλίση της Lea Verou () για να δημιουργήσουμε πιο περίπλοκες απεικονίσεις.

Λόγια : Νικ Μόρετον

Ο Nick Moreton είναι λέκτορας στο Πανεπιστήμιο του Μπέρμιγχαμ. Οι τομείς εμπειρίας του περιλαμβάνουν HTML, CSS, JavaScript, AngularJS και WordPress. Αυτό το άρθρο δημοσιεύθηκε αρχικά στο τεύχος 274 του περιοδικού net

Σας άρεσε αυτό; Διαβάστε αυτά!