9 Βιβλιοθήκες Javascript για τη δημιουργία διαδραστικών γραφημάτων

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

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

1. Διάγραμμα JS

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

2. Chartist JS

Chartist JS είναι μια μεγάλη βιβλιοθήκη για την κατασκευή ανταποκριτικών γραφημάτων που χρησιμοποιούν το SVG. Εκτός από την ανταπόκρισή του, η Chartist σας δίνει ευελιξία χρησιμοποιώντας σαφή διαχωρισμό των ανησυχιών: στυλ με CSS και έλεγχο με JS. Για ευκολότερη προσαρμογή, περιλαμβάνονται τα αρχεία SASS. Το μεγάλο πράγμα εδώ είναι ότι έχετε απεριόριστες επιλογές για να ζωντανέψετε το γράφημά σας χρησιμοποιώντας το Chartist animation API, SMIL, το οποίο σας δίνει πρόσθετες επιλογές κινούμενης εικόνας.

3. C3 JS

C3 JS είναι μια βιβλιοθήκη για την κατασκευή διαγραμμάτων με βάση το D3 JS. Αναδιπλώνει τον απαιτούμενο κώδικα για να δημιουργήσει διαγράμματα με το D3 JS, ώστε να μπορείτε να παραλείψετε να γράψετε τον κωδικό D3 και απλά να εισαγάγετε τα δεδομένα σας. Το C3 έρχεται με μια ποικιλία API που μπορείτε να χρησιμοποιήσετε για να ελέγξετε εύκολα τα γραφήματα σας. Για να προσαρμόσετε το γράφημά σας, ορίστε τα δικά σας προσαρμοσμένα στυλ στις συγκεκριμένες κλάσεις CSS. Δημιουργήστε γραφήματα από απλά γραφήματα γραμμής σε διαγράμματα μέτρησης. Ελέγξτε αυτή τη σελίδα για να δείτε πώς λειτουργεί η βιβλιοθήκη.

4. Πτώση

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

5. EChart

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

6. Ειρήνη

Ιεροσύνη θα προσθέσει ένα μίνι γράφημα στην ιστοσελίδα σας. Πρόκειται για ένα μικρό plugin jQuery που μετατρέπει ένα στοιχείο σε μίνι svg γραμμή, μπαρ, ντόνατ, ή διάγραμμα πίτας. Απλά πρέπει να δημιουργήσετε ένα στοιχείο και να δώσετε μια αξία όπως 1/5 και πραγματοποιήστε μια κλήση («πίτα») για αυτό το στοιχείο για να δημιουργήσετε ένα διάγραμμα μίνι πίτας. Για παράδειγμα, για να δημιουργήσετε ένα γράφημα ντόνατς το οποίο είναι μόνο το ένα πέμπτο επισημαίνεται, εδώ είναι το HTML:

1/5

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

7. DC JS

DC JS έχει ομοιότητες με το C3 JS όσον αφορά τον χρησιμοποιούμενο κινητήρα. και οι δύο χρησιμοποιούν τη βιβλιοθήκη D3 για να παράγουν γραφήματα στο SVG. Το DC JS δημιουργήθηκε για να σας βοηθήσει να απεικονίσετε δεδομένα και ανάλυση για προγράμματα περιήγησης και για κινητές συσκευές. Δεδομένου ότι αξιοποιεί το D3 JS, σας επιτρέπει να προσθέσετε αλληλεπίδραση χρήστη στο γράφημά σας. Το DC JS είναι μια ισχυρή βιβλιοθήκη για τη δημιουργία γραφημάτων από απλή σε υψηλή πολυπλοκότητα.

8. Διάγραμμα Google

Μπορείτε να δημιουργήσετε διαδραστικά διαγράμματα και εργαλεία δεδομένων χρησιμοποιώντας το Google Visualization API μέσω του Google Chart. Υπάρχουν γκαλερί γραφημάτων για να ελέγξετε τις δυνατότητες απεικόνισης δεδομένων του Χάρτη Google. Για να ξεκινήσετε, ενσωματώστε απλή JavaScript στην ιστοσελίδα σας για να φορτώσετε τις βιβλιοθήκες του Google Chart που χρειάζεστε. Στη συνέχεια, απαριθμήστε τα δεδομένα που θέλετε να ταξινομήσετε και πραγματοποιήστε ορισμένες προσαρμογές μέσω των επιλογών χάρτη. Τέλος, δημιουργήστε ένα αντικείμενο γραφήματος με ένα αναγνωριστικό και στην ιστοσελίδα σας, δημιουργήστε ένα

με αυτό το id για να εμφανίσετε το διάγραμμα.

9. NVD3

NVD3 είναι ένα σύνολο επαναχρησιμοποιήσιμων διαγραμμάτων και στοιχείων διαγραμμάτων που είναι κατασκευασμένα με D3 JS. Αυτή η βιβλιοθήκη είναι ως εκ τούτου ένα «πρότυπο» που θα σας διευκολύνει να χτίσετε γραφήματα. Δείτε τα πολλά δείγματα που χτίστηκαν με το NVD3 εδώ.

Τώρα διαβάστε: Βιβλιοθήκες JavaScript για τη δημιουργία διαδραστικών και προσαρμοσμένων χαρτών