Υπάρχουν αρκετές βιβλιοθήκες JavaScript για τη σχεδίαση διαφόρων γραφημάτων, που κυμαίνονται από γραφήματα ράβδων έως γραφήματα γραμμής και πολλά άλλα. Εάν μαθαίνετε πώς να προβάλλετε δεδομένα δυναμικά στον ιστότοπό σας με JavaScript, η Chart.js είναι μια τέτοια βιβλιοθήκη που πρέπει να δοκιμάσετε.

Πώς μπορείτε να ξεκινήσετε τη δημιουργία οπτικοποιήσεων δεδομένων με το Chart.js; Θα μάθετε πώς σε αυτό το άρθρο.

Ας αρχίσουμε.

Τι είναι το Chart.js;

Το Chart.js είναι μια βιβλιοθήκη JavaScript οπτικοποίησης δεδομένων ανοιχτού κώδικα που χρησιμοποιείται για τη σχεδίαση γραφημάτων με δυνατότητα απόδοσης HTML. Προς το παρόν υποστηρίζει οκτώ διαφορετικούς τύπους διαδραστικών γραφημάτων που μπορείτε επίσης να κάνετε κίνηση. Για να δημιουργήσετε ένα γράφημα που βασίζεται σε HTML με το chart.js, χρειάζεστε έναν καμβά HTML για να το κρατήσετε.

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

επιγραφή, το οποίο αντιπροσωπεύει τις τιμές στον άξονα Χ. Το άλλο είναι ένα σύνολο αριθμητικών τιμών, οι οποίες συνήθως βρίσκονται στον άξονα Υ.

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

Πώς να δημιουργήσετε γραφήματα με το Chart.js

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

Σχετίζεται με:Πώς να κάνετε τον ιστότοπό σας αποκριτικό και διαδραστικό με CSS και JavaScript

Για να αρχίσετε να χρησιμοποιείτε γράφημα.js, δημιουργήστε τα απαραίτητα αρχεία. Για αυτό το σεμινάριο, τα ονόματα αρχείων είναι chart.html, plot.js, και index.css. Μπορείτε να χρησιμοποιήσετε οποιαδήποτε σύμβαση ονομασίας για τα αρχεία σας.

Τώρα, επικολλήστε το παρακάτω στο κεφάλι ενότητα του αρχείου HTML σας για σύνδεση με το δίκτυο παράδοσης περιεχομένου Chart.js (CDN).

Σε chart.html:

src=" https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js">

Στη συνέχεια, δημιουργήστε έναν καμβά HTML για να κρατήσετε το γράφημά σας και να του δώσετε ένα ταυτότητα. Επίσης, συνδεθείτε στο αρχείο CSS (index.css) στο κεφάλι ενότητα και τοποθετήστε το δείκτη του ποντικιού στο αρχείο JavaScript (plot.js) στο σώμα Ενότητα.

Η δομή του αρχείου HTML μοιάζει με αυτό:

 Διαγράμματα

Και στο δικό σου CSS:

σώμα{
 background-color:#383735;
}
h1{
 color:#e9f0e9;
 περιθώριο-αριστερά: 43%;
}
#πλοκές{
 περιθώριο: αυτόματο;
 χρώμα φόντου: #2e2d2d;
}

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

Το γραμμικό διάγραμμα

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

Για να το αποδείξετε αυτό, στο αρχείο JavaScript:

// Λάβετε τον καμβά HTML από το αναγνωριστικό του
plots = document.getElementById("plots");
// Παραδείγματα συνόλων δεδομένων για άξονες X και Y
var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"]; //Παραμένει στον άξονα Χ
επισκεψιμότητα var = [65, 59, 80, 81, 56, 55, 60] //Παραμένει στον άξονα Υ
// Δημιουργήστε μια παρουσία του αντικειμένου γραφήματος:
νέο γράφημα (οικόπεδα, {
 τύπος: 'γραμμή', //Δηλώστε τον τύπο γραφήματος
 δεδομένα: {
 Ετικέτες: μήνες, //Δεδομένα άξονα Χ
 σύνολα δεδομένων: [{
 δεδομένα: κίνηση, //Δεδομένα του άξονα Υ
 Χρώμα φόντου: '#5e440f',
 Χρώμα περιγράμματος: 'λευκό',
 συμπλήρωση: ψευδής, //Γεμίζει την καμπύλη κάτω από τη γραμμή με το χρώμα του φόντου. Είναι αλήθεια από προεπιλογή
 }]
 },
});

Παραγωγή:

Μη διστάσετε να αλλάξετε το γέμισμα αξία σε αληθής, χρησιμοποιήστε περισσότερα δεδομένα, τροποποιήστε τα χρώματα για να δείτε τι συμβαίνει.

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

ο επιλογές Η παράμετρος βοηθά επίσης με άλλες προσαρμογές εκτός από την αφαίρεση ή τη συμπερίληψη του μύθου. Για παράδειγμα, μπορείτε να το χρησιμοποιήσετε για να αναγκάσετε έναν άξονα να ξεκινήσει από το μηδέν.

Να δηλώσει ένα επιλογές παράμετρος, ορίστε πώς φαίνεται η ενότητα γραφήματος στο αρχείο JavaScript:

// Δημιουργία παρουσίας αντικειμένου γραφήματος:
νέο γράφημα (οικόπεδα, {
 τύπος: 'γραμμή', //Δηλώστε τον τύπο γραφήματος
 δεδομένα: {
 Ετικέτες: μήνες, //Δεδομένα άξονα Χ
 σύνολα δεδομένων: [{
 δεδομένα: κίνηση, //Δεδομένα του άξονα Υ
 Χρώμα φόντου: '#5e440f', //Χρώμα των κουκκίδων
 Χρώμα περιγράμματος: 'λευκό', //Χρώμα γραμμής
 συμπλήρωση: ψευδής, //Γεμίζει την καμπύλη κάτω από τη γραμμή με το χρώμα του φόντου. Είναι αλήθεια από προεπιλογή
 }]
 },
 //Καθορισμός προσαρμοσμένων επιλογών:
 επιλογές:{
 υπόμνημα: {display: false}, //Καταργήστε το πλαίσιο υπομνήματος ορίζοντας το σε false. Είναι αλήθεια από προεπιλογή.
//Καθορίστε ρυθμίσεις για τις κλίμακες. Για να κάνετε τον άξονα Υ να ξεκινά από το μηδέν, για παράδειγμα:
 Ζυγός:{
 yΆξονες: [{ ticks: {min: 0}}] //Μπορείτε να επαναλάβετε το ίδιο για τον άξονα Χ εάν περιέχει ακέραιους αριθμούς.
 }
 } 
});

Παραγωγή:

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

Δημιουργία γραφικών ράβδων με το Chart.js

Εδώ, χρειάζεται μόνο να αλλάξετε το γράφημα τύπος προς το μπαρ. Δεν χρειάζεται να ρυθμίσετε το γέμισμα επιλογή επειδή οι γραμμές κληρονομούν αυτόματα το χρώμα του φόντου:

// Δημιουργήστε μια παρουσία του αντικειμένου γραφήματος:
νέο γράφημα (οικόπεδα, {
 τύπος: 'μπαρ', //Δηλώστε τον τύπο γραφήματος
 δεδομένα: {
 Ετικέτες: μήνες, //Δεδομένα άξονα Χ
 σύνολα δεδομένων: [{
 δεδομένα: κίνηση, //Δεδομένα του άξονα Υ
 Χρώμα φόντου: '#3bf70c', //Χρώμα των ράβδων
 }]
 },
 επιλογές:{
 υπόμνημα: {display: false}, //Καταργήστε το πλαίσιο υπομνήματος ορίζοντας το σε false. Είναι αλήθεια από προεπιλογή.
 }
});

Παραγωγή:

Μη διστάσετε να αναγκάσετε τον άξονα Υ να ξεκινήσει από το μηδέν ή οποιαδήποτε τιμή όπως κάνατε για το γραμμικό γράφημα.

Σχετίζεται με:Μέθοδοι συστοιχίας JavaScript που πρέπει να κατακτήσετε

Για να χρησιμοποιήσετε διαφορετικά χρώματα για κάθε γραμμή, περάστε μια σειρά χρωμάτων που ταιριάζουν με τον αριθμό των στοιχείων στα δεδομένα σας στη γραμμή χρώμα του φόντου παράμετρος:

// Δημιουργήστε μια παρουσία του αντικειμένου γραφήματος:
νέο γράφημα (οικόπεδα, {
 τύπος: 'μπαρ', //Δηλώστε τον τύπο γραφήματος
 δεδομένα: {
 Ετικέτες: μήνες, //Δεδομένα άξονα Χ
 σύνολα δεδομένων: [{
 δεδομένα: κίνηση, //Δεδομένα του άξονα Υ
//Χρώμα κάθε ράβδου:
 χρώμα του φόντου: [
 "rgba (196, 190, 183)",
 "rgba (21, 227, 235)",
 "rgba (7, 150, 245)",
 "rgba (240, 5, 252)",
 "rgba (252, 5, 79)",
 "rgb (0,12,255)",
 "rgb (17, 252, 5)"],
 }]
 },
 επιλογές:{
 υπόμνημα: {display: false}, //Καταργήστε το πλαίσιο υπομνήματος ορίζοντας το σε false. Είναι αλήθεια από προεπιλογή.
 }
});

Παραγωγή:

Δημιουργία γραφήματος πίτας με το Chart.js

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

// Δημιουργία παρουσίας αντικειμένου γραφήματος:
νέο γράφημα (οικόπεδα, {
 type: 'pie', //Δηλώστε τον τύπο του γραφήματος
 δεδομένα: {
 ετικέτες: μήνες, //Ορίζει κάθε τμήμα
 σύνολα δεδομένων: [{
 δεδομένα: κίνηση, //Προσδιορίζει το μέγεθος τμήματος
 //Χρώμα κάθε τμήματος
 χρώμα του φόντου: [
 "rgba (196, 190, 183)",
 "rgba (21, 227, 235)",
 "rgba (7, 150, 245)",
 "rgba (240, 5, 252)",
 "rgba (252, 5, 79)",
 "rgb (0,12,255)",
 "rgb (17, 252, 5)"],
 }]
 },
 επιλογές:{
 legend: {display: true}, //Αυτό ισχύει από προεπιλογή.
}
});

Παραγωγή:

Όπως κάνατε στα παραπάνω παραδείγματα, μπορείτε να δοκιμάσετε άλλα γραφήματα αλλάζοντας το τύπος.

Ωστόσο, εδώ είναι μια λίστα με τα υποστηριζόμενα γράφημα.js τύπους γραφημάτων που μπορείτε να δοκιμάσετε χρησιμοποιώντας τις παραπάνω συμβάσεις κωδικοποίησης:

• μπαρ
• γραμμή
• σκορπίζω
• ντόνατ
• πίτα
• ραντάρ
• πολική περιοχή
• φυσαλλίδα

Παίξτε γύρω με το Chart.js

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

Με αυτά τα λόγια, εάν θέλετε περισσότερα από αυτά που προσφέρει το chart.js, ίσως θέλετε να ρίξετε μια ματιά και σε ορισμένες άλλες βιβλιοθήκες γραφημάτων JavaScript.

6 Πλαίσια JavaScript που αξίζει να μάθετε

Υπάρχουν πολλά πλαίσια JavaScript εκεί έξω για να βοηθήσουν στην ανάπτυξη. Εδώ είναι μερικά που πρέπει να γνωρίζετε.

Διαβάστε Επόμενο

Σχετικά με τον Συγγραφέα