Αυτές είναι οι καλύτερες βιβλιοθήκες του JavaScript για το 2019

Πρώτον, ένα σύντομο ιστορικό:

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

Η τεχνολογία απεικόνισης δεδομένων συνέχισε να βελτιώνεται την τελευταία δεκαετία και πολλές προηγμένες βιβλιοθήκες γραφημάτων είναι τώρα διαθέσιμες στους καταναλωτές. Στις αρχές της δεκαετίας του 2000, η ​​παραγωγή χαρτών κυριαρχείται από διαγράμματα bitmap για διακομιστές. Plug-ins όπως το Flash και το Silverlight προσέφεραν μια πιο διαδραστική εμπειρία χαρτογράφησης, αλλά με μεγάλο φόρτο στην ταχύτητα λήψης, τη διάρκεια ζωής της μπαταρίας και τους πόρους του συστήματος.

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

Εισαγάγετε την τρέχουσα εποχή της οπτικοποίησης δεδομένων που κυριαρχείται από το JavaScript και το SVG (Scalable Vector Graphics). Τα διαγράμματα τρέχουν τώρα σε όλα τα προγράμματα περιήγησης, χωρίς ειδικά πρόσθετα, υποστήριξη αλληλεπίδρασης και κινούμενα σχέδια και φαίνονται αιχμηρά ακόμη και στις συσκευές υψηλότερης ανάλυσης. Ανασκοπώντας πάνω από 50 βιβλιοθήκες οπτικοποίησης, αυτά τα 9 προϊόντα ξεχώρισαν:

D3.js

Το D3.js είναι μια πολύ εκτεταμένη και ισχυρή γραφική βιβλιοθήκη JavaScript. Σας επιτρέπει να δεσμεύσετε αυθαίρετα δεδομένα σε ένα μοντέλο αντικειμένου εγγράφου (DOM) και, στη συνέχεια, να εφαρμόσετε μετασχηματισμούς με γνώμονα τα δεδομένα στο έγγραφο.

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

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

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

Το D3.js είναι ανοικτού κώδικα και ελεύθερο στη χρήση.

JSCharting

Η βιβλιοθήκη διαγραμμάτων JSCharting υποστηρίζει έναν μεγάλο αριθμό τύπων γραφημάτων, συμπεριλαμβανομένων χαρτών, gantt, αποθεμάτων και άλλων που απαιτούν συχνά τη χρήση ξεχωριστών βιβλιοθηκών. Περιλαμβάνει ενσωματωμένους χάρτες όλων των χωρών του κόσμου και μια βιβλιοθήκη εικόνων SVG. Μια σουίτα αυτοτελών μικρογραμμάτων μπορεί να αποδίδεται σε οποιαδήποτε ετικέτα γραφήματος ή σε οποιοδήποτε στοιχείο div σε μια σελίδα. Τα στοιχεία ελέγχου UI (UiItems) περιλαμβάνονται επίσης επιτρέποντας πλουσιότερους διαδραστικούς χάρτες. Ο έλεγχος των μεταβλητών δεδομένων ή απεικόνισης σε πραγματικό χρόνο είναι εύκολος και τα διαγράμματα μπορούν να εξαχθούν σε μορφές SVG, PNG, PDF και JPG.

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

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

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

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

Υψηλή βαθμολογία

Τα Highcharts είναι μια δημοφιλής βιβλιοθήκη γραφικών JavaScript που χρησιμοποιείται από πολλές από τις μεγαλύτερες εταιρείες στον κόσμο. Τα διαγράμματα παράγονται με τη χρήση SVG και εναλλαγής σε VML για συμβατότητα προς τα πίσω μέχρι το IE6 / IE8. Οι επίδειξη χάρτες δείχνουν ένα αρκετά πλούσιο σετ χαρακτηριστικών, αλλά δεν το εκπληρώνουν οπτικά. Η γενική τεκμηρίωση περιλαμβάνει μαθήματα για πολλά σχετικά θέματα και η τεκμηρίωση API είναι διεξοδική.

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

Τα Highcharts είναι δωρεάν για μη εμπορική και προσωπική χρήση. Οι εμπορικές άδειες χρήσης απαιτούνται για άλλες χρήσεις και τα αποθέματα, οι χάρτες και τα διαγράμματα Gantt διανέμονται χωριστά.

amCharts

Η amCharts κυκλοφόρησε πρόσφατα την έκδοση 4, η οποία προσθέτει έναν ισχυρό κινητήρα SVG animation που επιτρέπει τη δημιουργία ταινιών που μοιάζουν με σκηνές.

Τα demo charts φαίνονται πολύ ωραία. Τα περισσότερα demos προσφέρουν μια σειρά από παλέτες και ένα slider UI για την προσαρμογή των μεταβλητών σε πραγματικό χρόνο. Η τεκμηρίωση περιλαμβάνει πολλά μαθήματα και πλήρεις περιγραφές ιδιοτήτων API.

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

Η amCharts προσφέρει μια δωρεάν άδεια με επώνυμα διαγράμματα και αδειοδοτήσεις για άλλες χρήσεις.

Google Charts

Τα γραφήματα Google είναι ισχυρά και εύχρηστα.

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

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

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

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

ZingChart

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

Τα demo charts δείχνουν μια σειρά από θέματα σχεδίασης, μερικά από τα οποία φαίνονται καλύτερα από άλλα, αλλά οι επιλογές για το στυλ τους ανάλογα με τις ανάγκες είναι εκεί. Οι δοκιμαστικές εκδόσεις δεν παρουσιάζουν όλους τους διαθέσιμους τύπους γραφημάτων.

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

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

Το ZingChart μπορεί να χρησιμοποιηθεί δωρεάν με branding. Η αμοιβή αδειών χρήσης είναι διαθέσιμη για μη επώνυμη χρήση.

FushionCharts

Το FusionCharts βρίσκεται εδώ και πολλά χρόνια ξεκινώντας ως plugin για το γράφημα Flash. Είναι μια ισχυρή βιβλιοθήκη οπτικοποίησης γραφημάτων. Υποστηρίζει πολλές μορφές δεδομένων, συμπεριλαμβανομένων των XML, JSON και JavaScript, λειτουργεί σε σύγχρονα προγράμματα περιήγησης και είναι συμβατή προς τα πίσω στο IE6. Πολλά πλαίσια πλαισίου JavaScript και γλώσσες προγραμματισμού από την πλευρά του διακομιστή υποστηρίζονται επίσης.

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

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

Τα διαγράμματα δημιουργούνται χρησιμοποιώντας επιλογές που βασίζονται σε διαμόρφωση και είναι σχετικά εύκολο στη χρήση. Ο κατάλογος των ιδιοτήτων μπορεί να είναι μακρύς όταν σκάβετε βαθύτερα στο API. Όλες οι ιδιότητες διαμόρφωσης είναι ρηχές όπως {chartLeftMargin, showAlternateHGridColor}. Φαίνεται σαν μια προσπάθεια να βελτιωθεί η ολοκλήρωση του κώδικα.

Το FusionCharts είναι δωρεάν για προσωπική χρήση με το brand chart. Η αδειοδότηση επί πληρωμή είναι διαθέσιμη για μη επωνυμία και εμπορική χρήση.

KOOLCHART

Το KoolChart είναι μια βιβλιοθήκη διαγράμματος JavaScript που βασίζεται σε HTML5 με βάση τον καμβά. Ένα προϊόν χαρτογράφησης και πλέγματος είναι επίσης διαθέσιμο.

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

Τα δείγματα χρησιμοποιούν μια XML που βασίζεται σε συμβολοσειρές για να εφαρμόσουν επιλογές χάρτη που φαίνεται λιγότερο πρακτική από άλλες προσεγγίσεις. Αυτές οι επιλογές μοιάζουν με HTML5 αλλά έχουν οριστεί μέσω μιας συμβολοσειράς JavaScript.

Το API είναι καλά τεκμηριωμένο με παραδείγματα διαγραμμάτων για κάθε ιδιοκτησία. Ένα εγχειρίδιο PDF των 173 σελίδων είναι επίσης διαθέσιμο.

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

Chart.js

Το Chart.js είναι μια βιβλιοθήκη JavaScript open source που υποστηρίζει 8 τύπους γραφημάτων. Πρόκειται για μια μικρή βιβλιοθήκη js σε μόλις 60kb. Οι τύποι περιλαμβάνουν γραφήματα γραμμής, διαγράμματα γραμμών, διαγράμματα περιοχής, ραντάρ, διαγράμματα πίτας, φούσκα, διάσπαρτα οικόπεδα και μικτά. Υποστηρίζεται επίσης μια χρονολογική σειρά. Χρησιμοποιεί το στοιχείο του καμβά για απόδοση και ανταποκρίνεται στο μέγεθος του παραθύρου για να διατηρεί τη λεπτομέρεια της κλίμακας. Είναι συμβατό με το IE9. Τα Polyfills είναι επίσης διαθέσιμα για να λειτουργούν με το IE7 επίσης.

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

Ο δείκτης πηγαίου κώδικα δεν εμφανίζεται στη συλλογή ιστοτόπων, αλλά είναι διαθέσιμος στο repos GitHub. Οι επιλογές διαμόρφωσης χρησιμοποιούνται για τη δημιουργία και την τροποποίηση χαρτών. Το API επιλογών είναι καθαρό και διαισθητικό.

Η τεκμηρίωση είναι διεξοδική και περιλαμβάνει μαθήματα με API ιδιοκτησίας και αποσπάσματα κώδικα.

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

συμπέρασμα

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

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

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