Δημιουργία του πρώτου σας διαδραστικού γραφήματος JavaScript
Τα δεδομένα είναι όλα γύρω μας και η απεικόνισή του έχει ήδη γίνει ουσιαστικό κομμάτι της ζωής μας. Τα χάρτες, τα πληροφοριακά στοιχεία, οι χάρτες και τα dashboards είναι σε μεγάλη ζήτηση σήμερα, επειδή μας παρουσιάζουν πληροφορίες με τρόπο που μπορεί εύκολα να ερμηνευτεί.
Το καλό είναι ότι η χαρτογράφηση δεν απαιτεί μεγάλες δεξιότητες ή ειδικές γνώσεις από προγραμματιστές ιστού, σχεδιαστές ή οποιοσδήποτε άλλος. Σε αυτό το άρθρο, θα σας δείξουμε τα βασικά και θα εξηγήσουμε με ευκολία πώς να χειρίζεστε τη διαδραστική απεικόνιση δεδομένων χρησιμοποιώντας JavaScript και HTML5.
Θα ξεκινήσουμε δημιουργώντας ένα γράφημα ράβδων μίας σειράς για να μπορείτε να πιάσετε τα βασικά. Στη συνέχεια, θα σας δείξουμε έναν γρήγορο τρόπο για να δημιουργήσετε διαγράμματα bar και multi-series. Οι διαγράμματα γραμμών είναι ένας δημοφιλής τρόπος παρουσίασης των δεδομένων αυτών των ημερών και η λογική ανάπτυξης που χρησιμοποιείται μπορεί εύκολα να μεταφραστεί σε άλλους τύπους γραφημάτων.
Ο τελικός πίνακας θα είναι αυτό το διάγραμμα ράβδων 100% στοιβαγμένο:
Δείτε το στυλό Τελικό (τίτλος). Προσαρμοσμένο διάγραμμα ράβδων 100% στοιβαγμένο από τον Ruslan ( @ruslankorsar ) επί CodePen .
Σήμερα υπάρχουν πολλές βιβλιοθήκες γραφικών JavaScript . ορισμένοι από αυτούς είναι απολύτως ελεύθεροι όπως D3 και Google Charts ενώ άλλες απαιτούν πληρωμές για εμπορική χρήση. Κατά τη γνώμη μου, οι πιο ολοκληρωμένες και ισχυρές από αυτές είναι amCharts , AnyChart , και Υψηλή βαθμολογία .
Για αυτό το φροντιστήριο, αποφάσισα να το χρησιμοποιήσω AnyChart . Ωστόσο, η διαδικασία είναι πολύ παρόμοια για κάθε βιβλιοθήκη, ειδικά αν κάνετε κάτι απλό. AnyChart έχει εκτενή απόδειξη με έγγραφα και Αναφορά API καθώς και μια μεγάλη ποικιλία από υποστηρίζονται τύποι χαρτών και demos για το παιδική χαρά κωδικού , έτσι είναι μια καλή επιλογή για αρχάριους.
Για την εξυπηρέτησή σας, όλα τα παραδείγματα που παρουσιάζονται στο σεμινάριο είναι διαθέσιμα στο αυτή η συλλογή στο CodePen και μπορεί να εξερευνηθεί εκεί ή να εξαχθεί σε ZIPS με CSS / HTML / JavaScript demo αρχεία.
JS Χαρτογράφηση σε 3 εύκολα βήματα
Η διαδικασία της δημιουργίας ενός βασικού γραφήματος JavaScript για τον ιστότοπο ή την εφαρμογή σας αποτελείται από τα ακόλουθα τρία βήματα:
- Προετοιμάστε τα δεδομένα σας.
- Συνδέστε τη βιβλιοθήκη.
- Γράψτε έναν απλό κωδικό.
1. Προετοιμασία δεδομένων
Όπως ένα μεγάλο πλοίο θέλει βαθιά νερά, ένα απλό γράφημα θέλει απλά δεδομένα. Φυσικά, εάν έχετε μεγάλα ποσά δεδομένων ή η δομή της δεν είναι προφανής, θα πρέπει να την προετοιμάσετε πρώτα.
Κατά την οικοδόμηση της πλειοψηφίας των δημοφιλών τύπων γραφημάτων χρειαζόμαστε απλά πεδία Χ και Υ. Ωστόσο, τα γραφήματα γραμμών μπορούν να είναι ακόμη απλούστερα, επειδή συχνά συμβαίνει ότι χρησιμοποιείται μόνο το πεδίο Y και ένας δείκτης ή ένας αριθμός στοιχείου λαμβάνεται ως Χ. Αυτό συμβαίνει όταν χρησιμοποιούμε μια σειρά δεδομένων JavaScript, για παράδειγμα:
// 5 data points = 5 categories for a single seriesvar data = [19, 24, 30, 34, 42];// Y is these values; X is item numbers [0,1,2,3,4,5]Αν χρησιμοποιείτε JSON / XML για τη μεταφορά δεδομένων, τότε τα δεδομένα σας θα μπορούσαν να φαίνονται ως εξής.
[{'x': 'Product A','value': 19},{'x': 'Product B','value': 24}...]Σε γενικές γραμμές, υπάρχουν πολλοί τρόποι εργασίας με δεδομένα και οι προγραμματιστές λογισμικού απεικόνισης περιγράφουν συνήθως όλα ή πολλά από αυτά σε έγγραφα. Με αυτό κατά νου, σας συνιστώ να ελέγξετε το σχετική ενότητα της τεκμηρίωσης της βιβλιοθήκης σας.
2. Να αποκτήσετε μια βιβλιοθήκη γραφημάτων
Η βιβλιοθήκη που χρησιμοποιείτε είναι προφανώς ένα ζωτικό συστατικό εδώ. Εάν πρόκειται να χρησιμοποιήσετε γραφήματα σε τοπικό επίπεδο, θα πρέπει να είναι λογικό να Κατεβάστε το δυαδικό πακέτο και να το κρατήσετε κοντά.
Ωστόσο, αν χρειάζεστε γραφήματα για μια εφαρμογή ιστού ή μια σελίδα σε έναν ιστότοπο, τότε ένα CDN μπορεί να είναι μια καλύτερη επιλογή. Θα φορτώσει τα αρχεία από τον πλησιέστερο διακομιστή στον πελάτη σας, δίνοντάς σας πιο γρήγορη φόρτωση σελίδων και καλύτερη απόδοση.
3. Γράφοντας έναν απλό κώδικα HTML / JavaScript
Όταν τα δεδομένα και η βιβλιοθήκη είναι έτοιμα, μπορούμε να αρχίσουμε να γράφουμε τον κώδικα για να σχεδιάσουμε το γράφημά μας.
α) Πρώτον, πρέπει να δημιουργήσουμε ένα δοχείο γραφήματος στη σελίδα. Ο καλύτερος τρόπος είναι να χρησιμοποιήσετε ένα
β) Μετά από αυτό, ας συμπεριλάβουμε τα δεδομένα μας:
var data = [{x: 'DVD player', y: 19},{x: 'Home theater system', y: 24},{x: 'Karaoke player', y: 30},{x: 'Projector', y: 34},{x: 'TV receiver', y: 42}];c) Στη συνέχεια, καθορίζουμε τον τύπο χάρτη που θέλουμε καλώντας τη σχετική λειτουργία κατασκευαστή:
var chart = anychart.bar();δ) Για να καταστήσουμε τα πράγματα πιο ξεκάθαρα για τους θεατές, θέλω να δώσω στον τίτλο έναν τίτλο:
chart.title('Product Sales');ε) Τώρα, ας δημιουργήσουμε μια σειρά:
chart.addSeries(data);// or we can specify a simple dataset within the method:chart.addSeries([19, 24, 30, 34, 42]);στ) Το γράφημά μας πρέπει να τοποθετηθεί σε ένα δοχείο, οπότε καθορίζουμε αυτό που μόλις δημιουργήσαμε:
chart.container('container');ζ) Όλα φαίνονται καλά, ώστε να μπορέσουμε να σχεδιάσουμε το γράφημά μας τώρα:
chart.draw();Εδώ φαίνεται το αποτέλεσμα:
Το παρακάτω είναι ο πλήρης κώδικας για την ευκολία σας:
Φαίνεται αρκετά απλό, έτσι δεν είναι; Και τώρα μπορούμε να συγκρίνουμε άνετα τις συνολικές πωλήσεις ανά κατηγορία.
Δημιουργία γραφημάτων πολλαπλών σειρών και στοιβαγμένων γραμμών
Τώρα που μάθαμε τα βασικά στοιχεία της χαρτογράφησης με το JavaScript, μπορούμε να προχωρήσουμε στην οικοδόμηση ενός ελαφρώς πιο περίπλοκου γραφήματος το οποίο εμφανίζει περισσότερες πληροφορίες. Όπως δήλωσα νωρίτερα, θα σας δείξω έναν εύκολο τρόπο να δημιουργήσετε ένα διάγραμμα γραμμών πολλαπλών σειρών και στη συνέχεια ένα στοίβα.
Βασικά, οι διαδικασίες είναι παρόμοιες. Όπως πάντα, όλα ξεκινούν με δεδομένα.
Δεδομένα από έναν πίνακα
Στο πλαίσιο του παραπάνω πίνακα ράβδων, είχαμε μία μεταβλητή (σειρές δεδομένων για τις πωλήσεις προϊόντων) και διάφορες κατηγορίες (είδη προϊόντων). Για να εμφανιστεί επιπρόσθετα η σύνθεση κάθε τιμής, η οποία είναι η ουσία των στοιβαγμένων γραμμών γραμμών, χρειαζόμαστε πιο λεπτομερή δεδομένα.
Για αυτό, μπορούμε να χρησιμοποιήσουμε τα δεδομένα που εμφανίζονται ήδη στη σελίδα. Για παράδειγμα, αν έχετε ήδη έναν πίνακα HTML, μπορείτε εύκολα να δημιουργήσετε ένα γράφημα που βασίζεται σε αυτό. Αν χρησιμοποιείτε το AnyChart Μονάδα προσαρμογέα δεδομένων το μόνο που χρειάζεστε είναι να καθορίσετε αυτόν τον πίνακα ως πηγή δεδομένων.
1) Αποκτήστε τον προσαρμογέα δεδομένων:
2) Προετοιμασία δεδομένων από τον πίνακα:
var tableData = anychart.data.parseHtmlTable('#tableWithData');3) Δημιουργήστε ένα γράφημα και καθορίστε την πηγή δεδομένων:
var chart = anychart.bar();chart.data(tableData);Το άμεσο αποτέλεσμα είναι ένα διάγραμμα ράβδων πολλαπλών σειρών που μας επιτρέπει, για παράδειγμα, να συγκρίνουμε γρήγορα τις επιδόσεις κάθε προϊόντος σε κάθε κατηγορία.
Αλλαγή του τύπου της σειράς
Όλες οι απαραίτητες λεπτομέρειες, συμπεριλαμβανομένων των δεδομένων, έχουν ήδη καθοριστεί. Τώρα μπορούμε να αλλάξουμε τον τύπο της σειράς και να πάρουμε ένα στοιβαγμένο γράφημα ράβδων από αυτό το συμβατικό πολυ-σειριακό. Δεν είναι καθόλου δύσκολο, καθώς χρειάζεστε μόνο μία γραμμή κώδικα για να στοιβάζονται οι τιμές:
chart.yScale().stackMode('values');Voila!
Μόλις δημιουργήσαμε ένα σωρευμένο γράφημα ράβδων χωρίς να αλλάζουμε τη διαμόρφωση αυτής της σειράς πολλαπλών σειρών. Ως αποτέλεσμα, όχι μόνο εμείς είμαστε έτοιμοι τώρα να συγκρίνουμε τις συνολικές πωλήσεις κατά κατηγορία, όπως με το διάγραμμα ράβδων μιας σειράς από την αρχή του άρθρου, αλλά μπορούμε επίσης να προσδιορίσουμε ποιο προϊόν είναι υπεύθυνο για τη δημιουργία μιας κατηγορίας συνολικά μικρότερης ή μεγαλύτερης από άλλες .
Δεδομένου ότι συμφωνήσαμε εκ των προτέρων ότι ο τελικός μας στόχος είναι ένα 100% στοιβαγμένο διάγραμμα ράβδων, ας αλλάξουμε απλά τη λειτουργία για να το πάρουμε:
chart.yScale().stackMode('percent');
Πρόκειται για ένα διάγραμμα ράβδων 100% στοιβαγμένο, το οποίο σας επιτρέπει να επισημάνετε τις σχέσεις μεταξύ των μερών και να αξιολογήσετε τη συμβολή κάθε προϊόντος στη συνολική κατηγορία.
Σχεδιασμός Προσαρμογής
Ο σχεδιασμός είναι πολύ σημαντικός για την οπτικοποίηση δεδομένων, για την προσέλκυση προσοχής, τη βελτίωση της σαφήνειας και τη διατήρηση της οπτικής ακεραιότητας στο web project σας. Με τη βοήθεια αυτής της βιβλιοθήκης χαρτογράφησης, η προσαρμογή είναι πολύ απλή.
Προσθήκη Κειμένου
Για μεγαλύτερη σαφήνεια, μπορείτε να δώσετε την απεικόνισή σας με πρόσθετα κείμενα. Για παράδειγμα, θα δώσω στον κάθετο άξονα έναν τίτλο και θα προσθέσω προσωρινά μια ετικέτα γραφήματος:
chart.xAxis().title('Products');chart.label({text: 'Classified!'});
Ρυθμίσεις χρωμάτων
Μπορείτε να προσθέσετε χρώμα μέσα από μια παλέτα ( chart.palette () ) και να αλλάξετε τις ρυθμίσεις φόντου ( chart.background () ) μεταξύ άλλων. Ή μπορείτε να χρησιμοποιήσετε ένα θέμα:
Στη συνέχεια, πρέπει να το καθορίσουμε στις ρυθμίσεις πίνακα:
anychart.theme(anychart.themes.wines);
Διάγραμμα διαδραστικότητας
Κάνοντας ένα γράφημα JavaScript τουλάχιστον λίγο διαδραστικό δεν είναι μεγάλη υπόθεση.
Πιθανώς η πιο βασική προσέγγιση συνίσταται στην ενεργοποίηση της κατάστασης αιώρησης στα σημεία δεδομένων, στην αλλαγή τους χρώματος ή στην προσθήκη ή τροποποίηση δεικτών. Η κατάσταση επιλογής καθορίζει τον τρόπο με τον οποίο κάθε σημείο φροντίζει μετά το κλικ.
Κάποιες απλές τοποθετήσεις στο ποντίκι και επιλογή βασισμένης διαδραστικότητας περιλαμβάνονται από προεπιλογή, έτσι τώρα δεν πρόκειται να προσθέσουμε τίποτα στο παραπάνω παράδειγμα. Επιστρέψτε σε αυτήν για να εξερευνήσετε τη βασική διαδραστικότητα, αν θέλετε.
Αξίζει να μιλήσουμε για το στοιχείο του tooltip, το οποίο μπορεί να επιπλέει όταν ένα σημείο είναι πάνω. Πάντα προσπαθώ να χρησιμοποιήσω καλά τα tooltips με το να τους δείξω μερικές χρήσιμες πληροφορίες για το ποια σειρά ένα σημείο ανήκει, ποια αξία αντιπροσωπεύει και ούτω καθεξής. Μπορείτε εύκολα να συντονίσετε τις συμβουλές σας για να δείξετε οτιδήποτε. Παρουσιάζουμε την επεξηγηματική συμβουλή και καθορίζουμε τι να εμφανίζεται σε αυτήν:
var tooltip = chart.tooltip();tooltip.displayMode('union');tooltip.textFormatter('{%SeriesName}: {%Value} ({%YPercentOfCategory}%)');Εδώ είναι το αποτέλεσμα:
Αυτό είναι μόνο μια σύντομη ματιά στις επιλογές προσαρμογής, για να πάει σε λεπτομέρειες θα είναι ένα ολόκληρο άρθρο από μόνη της. Προς το παρόν, σας προτείνω να διαβάσετε το διαδραστικότητας της τεκμηρίωσης για περισσότερες πληροφορίες.
συμπέρασμα
Όπως βλέπετε, δεν είναι δύσκολο να δημιουργήσετε διαδραστικούς χάρτες με JavaScript. Επιπλέον, μπορείτε να βρείτε όλα τα παραδείγματα από το σεμινάριο στο δικό μου συλλογή στο CodePen και να τα χρησιμοποιήσετε εύκολα στην εργασία σας. Απλά αντιγράψτε τον κώδικα, αλλάξτε τα δεδομένα μου στη δική σας και ξεκινήστε το έργο σας πολύ γρήγορα.
Μην ξεχνάτε πάντοτε να ελέγχετε την τεκμηρίωση ή / και την αναφορά API καθώς και να προσέχετε τα demos της βιβλιοθήκης που χρησιμοποιείτε, όπως αυτή τη συλλογή του AnyChart . Συνήθως, δεν είναι περίπλοκο να διαπιστώσετε εάν υπάρχει κάτι κοντά σε αυτό που χρειάζεστε, να βρείτε ένα παράδειγμα που ταιριάζει καλύτερα, να κάνετε κάποιες απλές τροποποιήσεις και στη συνέχεια να το χρησιμοποιήσετε όπως εσείς χρειάζεστε.