Χρησιμοποιήστε το Chart.js για να ενεργοποιήσετε δεδομένα σε διαδραστικά διαγράμματα

Sep 13, 2025
πως να

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

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

Με το Chart.js, μπορείτε να επιλέξετε από οκτώ διαφορετικούς τύπους γραφημάτων για να προσθέσετε στους ιστοτόπους σας με ελάχιστη προσπάθεια. Η μονάδα πρόσφατα προστιθέμενης κινούμενων σχεδίων εμπλουτίζει τα διαγράμματα με απεικόνιση που αναζητούν snazzy. Δημιουργία νέου ιστότοπου για να στεγάσετε τα διαγράμματα σας; Πάρε το δικό σου web hosting spot on, και φροντίστε να δοκιμάσετε μια κορυφή οικοδόμος ιστότοπου . Εντάξει, ας ξεκινήσουμε.

Κάντε κλικ στο εικονίδιο στην επάνω δεξιά γωνία κάθε εικόνας για να το μεγεθύνετε.

01. Ανάπτυξη της βιβλιοθήκης

Καθώς η χρήση του Chart.js είναι ευρέως διαδεδομένη, μπορείτε να βρείτε την εξειδικευμένη έκδοση από διάφορα CDN όπως Cloudflare. Απλά φορτώστε το με ένα & lt; script & gt; Ετικέτα και βεβαιωθείτε ότι ένα & lt; καμβά & gt; Το αντικείμενο είναι κοντά - το Chart.js κάνει τη μαγεία του χρησιμοποιώντας την υποδομή καθιστών που παρέχονται σε αυτό το widget. 

 & lt; html & gt;
& lt; κεφάλι & gt;
& lt; script src = "https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.4.0/
Chart.min.js "& gt;
& lt; / script & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; canvas id = "workarea" & gt;
& lt; / καμβά & gt;
& lt; / Body & GT;
& lt; / html & gt;

02. Αρχικοποίηση εκκίνησης

First, load up the framework

Πρώτον, φορτώστε το πλαίσιο

Όταν φορτωθεί το πλαίσιο, το επόμενο βήμα περιλαμβάνει τη λήψη λαβής canvas2d που δείχνει το & lt; καμβά & gt; που δημιουργήθηκε στο προηγούμενο βήμα. Αυτό μπορεί στη συνέχεια να χρησιμοποιηθεί για τη δημιουργία μιας νέας εμφάνισης του Διάγραμμα() κλάση, η οποία είναι υπεύθυνη για το χειρισμό δεδομένων, την απόδοση και την αλληλεπίδραση. 

 & lt; script & gt;
(λειτουργία() {
VAR CTX = Έγγραφο.
getelementbyid ('workarea'). GetContext ('2D');
var chart = νέο διάγραμμα (CTX,
{
Τύπος: 'Γραμμή',
Επιλογές: {},
. . .
});
}) ();
& lt; / script & gt;

03. Προσθέστε μια πηγή δεδομένων

line chart

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

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

 var chart = νέο διάγραμμα (CTX, {
Τύπος: 'Γραμμή',
Επιλογές: {},
Δεδομένα: {
Ετικέτες: ["Ιανουάριος",
"Φεβρουάριος", "Μάρτιος", "Απρίλιος", "Μάιος", "Ιούνιος",
"Ιούλιος"],
σύνολα δεδομένων: [{{
Ετικέτα: "Το πρώτο μου σύνολο δεδομένων",
χρώμα του φόντου:
        'RGB (255, 99, 132)',
χρώμα πλαισίου:
'RGB (255, 99, 132)',
Δεδομένα: [0, 10, 5,
2, 20, 30, 45],
}]
}
}) ·

04. Σταματήστε τυχόν τρεμοπαίζει

Το Chart.js έρχεται με εξελιγμένη λογική αλλαγής μεγέθους, η οποία - δυστυχώς - τείνει να πάρει τα μεγέθη οθόνης λάθος από καιρό σε καιρό. Περιορίζοντας το μέγεθος του & lt; καμβά & gt; Στοιχείο μέσω CSS, δυστυχώς, δεν κάνει το τέχνασμα. Αντ 'αυτού, η συντήρηση και η ανταπόκριση και η ανταπόκριση πρέπει να απενεργοποιηθούν μέσω του πεδίου επιλογών που συνοδεύουν τον κατασκευαστή κλάσεων πίνακα. 

 & lt; canvas id = "στυλ workarea" = "πλάτος: 800px;
Ύψος: 600px; "& gt; / καμβά & gt; / lt; / canvas & gt;
& lt; script & gt;
(λειτουργία() {
VAR CTX = Έγγραφο.
getelementbyid ('workarea'). GetContext ('2D');
var chart = νέο διάγραμμα (CTX,
{
Τύπος: 'Γραμμή',

Επιλογές: {
Ανταπόκριση: False, TateraspectRatio:
FALSE},

05. Προσθέστε διατάξεις

Για να παραφράσει Andrei Tupolev: Τώρα που το μικρό πετάει, ας φέρουμε το μεγαλύτερο. Το σκαλωσιές που παρουσιάστηκε συνοδευτικό αυτό το βήμα «πολλαπλασιάζεται» το διάγραμμα μας - αντί να εργάζεστε με ένα στοιχείο καμβά, δημιουργούμε τώρα ένα σύνολο τεσσάρων από αυτά και τα οργανώνουμε στην οθόνη με μια μόδα παρόμοια με έναν παλμογράφο Lecroy. Δυστυχώς, αυτό δεν λειτουργεί αρκετά που προορίζεται. 

 & lt; canvas id = "workarea"
Style = "Θέση: Απόλυτη; Κορυφή: 0%, Αριστερά: 0%;
Πλάτος: 49%. Ύψος: 49%. "& gt; / καμβά & gt; / lt; / canvas & gt;
& lt; canvas id = "workarea2"
Style = "Θέση: Απόλυτη; Κορυφή: 0%, Αριστερά: 51%.
Πλάτος: 49%. Ύψος: 49%. "& gt; / καμβά & gt; / lt; / canvas & gt;
& lt; καμβά id = "workarea3"
Style = "Θέση: Απόλυτη; Κορυφή: 51%. Αριστερά: 0%.
Πλάτος: 49%. Ύψος: 49%. "& gt; / καμβά & gt; / lt; / canvas & gt;
& lt; καμβά id = "workarea4"
Style = "Θέση: Απόλυτη; Κορυφή: 51%. Αριστερά: 51%.
Πλάτος: 49%. Ύψος: 49%; "& gt; / καμβά & gt; / lt; / canvas & gt;

06. Ξαπλώστε τα σφάλματα απόδοσης

Wrapper <div> tags enforce a structure from the outside

Wrapper & LT; Div & GT; Ετικέτες επιβάλλουν μια δομή από το εξωτερικό

Ο ασφαλέστερος τρόπος για να χειριστείτε τα διαγράμματα του Chart.js σε σύνθετες διατάξεις συνεπάγεται τη χρήση περιτύλιξης & lt; div & gt; Ετικέτες. Εφαρμόζουν μια δομή από το εξωτερικό, εξασφαλίζοντας έτσι ότι ο εσωτερικός κινητήρας διάταξης δεν μπορεί να κάνει περισσότερη βλάβη από ό, τι είναι απαραίτητο. Στην περίπτωση αυτή, ωστόσο, βεβαιωθείτε ότι θα ενεργοποιήσετε ξανά τη δυνατότητα ανταπόκρισης. 

 & LT; DIV = "Θέση: Απόλυτη; Κορυφή: 0%; Αριστερά:
0%. Πλάτος: 49%. Ύψος: 49%; "& gt;
& lt; καμβά id = "workarea" & gt; / canvas & gt; / lt; / lt; /
καμβά & gt;
& lt; / div & gt;
& lt; div style = "Θέση: Απόλυτη; Κορυφή: 0%; Αριστερά:
51%. Πλάτος: 49%. Ύψος: 49%; "& gt;
& lt; canvas id = "workarea2" & gt; / canvas & gt; / lt; / lt; /
καμβά & gt;
& lt; / div & gt;
& lt; div style = "Θέση: Απόλυτη; Κορυφή: 51%. αριστερά:
0%. Πλάτος: 49%. Ύψος: 49%; "& gt;
& lt; canvas id = "workarea3" & gt; / καμβά & gt; / lt; / lt; /
καμβά & gt;
& lt; / div & gt;
& lt; div style = "Θέση: Απόλυτη; Κορυφή: 51%. αριστερά:
51%. Πλάτος: 49%. Ύψος: 49%; "& gt;
& lt; canvas id = "workarea4" & gt; / canvas & gt; / lt; /
καμβά & gt;
& lt; / div & gt;
& lt; script & gt;
document.addeventListener ("Domcontentl
Oaded ", λειτουργία () {
VAR CTX = Έγγραφο.
getelementbyid ('workarea'). GetContext ('2D');
var chart = new
Διάγραμμα (CTX, {
τύπος:
'γραμμή',
Επιλογές:
{},

07. Δοκιμάστε μπαρ

Creating bar charts is simple

Η δημιουργία διαγραμμάτων μπάρων είναι απλή

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

 & lt; script & gt;
document.addeventListener ("domcontentedloaded", λειτουργία () {
var myfield = {
Ετικέτες: ["Ιανουάριος", "Φεβρουάριος", "Μάρτιος", "Απρίλιος", "Μάιος", "Ιούνιος", "Ιούλιος"],
σύνολα δεδομένων: [{{
επιγραφή:
"Το πρώτο μου σύνολο δεδομένων",

BackgroundColor: 'RGB (255, 99, 132)',

BorderColor: 'RGB (255, 99, 132)',
Δεδομένα: [0, 10, 5, 2, 20, 30, 45],
}]
};

. . .
CTX = έγγραφο.
getelementbyid ('workarea4'). Getcontext ('2D');
Διάγραμμα = Νέος πίνακας (CTX, {
Τύπος: 'Bar',
Επιλογές: {},
Δεδομένα: Myfield
});
});
& lt; / script & gt;

08. Αποφύγετε τις πίτες

pie charts taking over the screen

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

Θεωρητικά, ένα διάγραμμα πίτας μπορεί να γίνει κατά μήκος των ίδιων γραμμών. Αφαιρέστε τις ιδιότητες χρώματος για να αποφύγετε την ομοιόμορφη εμφάνιση και ορίστε την ιδιότητα τύπου σε πίτα. Δυστυχώς, αυτό δεν λειτουργεί αρκετά - όταν γίνει, το διάγραμμα πίτας θα γεμίσει ολόκληρη την οθόνη. Αυτό οφείλεται σε μια ειδικότητα του Renderer Pie που χρησιμοποιεί το «μεγαλύτερο» των δύο ιδιοτήτων για τον προσδιορισμό της ακτίνας πίτας. 

 var mypie = {
Ετικέτες: ["Ιανουάριος", "Φεβρουάριος", "Μάρτιος", "Απρίλιος", "Μάιος", "Ιούνιος", "Ιούλιος"],
σύνολα δεδομένων: [{{
Ετικέτα: "Το πρώτο μου σύνολο δεδομένων",
Δεδομένα: [0, 10, 5, 2, 20, 30, 45],
}]
};
CTX = Document.getelementidbyid ('workarea2').
getcontext ('2D');
Διάγραμμα = Νέος πίνακας (CTX, {
Τύπος: 'Pie',
Επιλογές: {},
Δεδομένα: MyPie
}) ·

09. Επίλυση του προβλήματος

Ανοίξτε το αρχείο 'Index.js' που δημιουργήθηκε στο βήμα 1. Ξεκινήστε προσδιορίζοντας τον τύπο γραφήματος ως γραμμή και προσθέτοντας τα δεδομένα που αντιπροσωπεύονται οπτικά όπως φαίνεται παρακάτω. 

 & lt; Body & GT;
& lt; div style = "Θέση: Απόλυτη; Κορυφή: 0%;
Αριστερά: 0%. Πλάτος: 49%. Ύψος: 49%; "& gt;
& lt; canvas id = "workarea" & gt; / lt; /
canvas & gt; & lt; / canvas & gt;
& lt; / div & gt;
& lt; div style = "Θέση: Απόλυτη; Κορυφή: 0%;
Αριστερά: 51%. Πλάτος: 29%. Ύψος: 49%; "& GT;
& lt; canvas id = "workarea2" & gt; / lt; /
canvas & gt; & lt; / canvas & gt;
& lt; / div & gt;

10. Αφήστε το Chart.js rescale το διάγραμμα

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

 CTX = Document.GetELEMEDByid («Workarea2»).
getcontext ('2D');
Διάγραμμα = Νέος πίνακας (CTX, {
Τύπος: 'Pie',
Επιλογές: {securatasctratio: false
},
Δεδομένα: MyPie
}) ·

Επόμενη Σελίδα: Τερματίστε τη δημιουργία του διαδραστικού γραφήματος σας με το Chart.js

  • 1
  • 2

Τρέχουσα σελίδα: Χρήση του Chart.js: Βήματα 01-10

πως να - Τα πιο δημοφιλή άρθρα

Πώς να Kitbash εν κινήσει με το Shapr3d

πως να Sep 13, 2025

(Credit Image: Adam DeWhirst) Το Shapr3d είναι ένα εξαιρετικό εργαλείο για το Kitbas..

Ξεκινήστε με την πλατφόρμα κινουμένων σχεδίων Greensock

πως να Sep 13, 2025

Η πλατφόρμα κινουμένων σχεδίων Greensock (GSAP) σάς δίνει τη δυνατότητα να ζω�..

Δημιουργήστε ένα μενού ολίσθησης

πως να Sep 13, 2025

Ένας πολύ καλός τρόπος για να βελτιώσετε το εμπειρία χρήστη στον ιστότοπό σας είναι να π�..

Πώς να δημιουργήσετε στυλιζαρισμένα έργα τέχνης παιχνιδιών

πως να Sep 13, 2025

Το στυλ τέχνης του παιχνιδιού βίντεο επιβίωσης του πρώτου προσώπου ..

Δημιουργήστε έναν ρεαλιστικό φανταστικό ιππότη

πως να Sep 13, 2025

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

Ελεγχόμενες και ομαλές κινήσεις με σκιαγραφητή

πως να Sep 13, 2025

Σκιαγραφητός Είναι μια εφαρμογή ζωγραφικής για τα Windows 10. Σας επιτρέπει να ζωγραφίζετε μεγάλα εγκ�..

Πώς να κάνετε ένα ρεαλιστικό αθλητικό αυτοκίνητο απόδοσης

πως να Sep 13, 2025

Τα τελευταία χρόνια, έχω χτυπήσει τις δεξιότητές μου στον φωτισμό και �..

Πώς να προσθέσετε δεδομένα στα σχέδια σκίτσων σας

πως να Sep 13, 2025

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

Κατηγορίες