Γραφήματα σχεδίασης Javascript. Ανασκόπηση βιβλιοθηκών javascript για σχεδίαση. Εμφάνιση δεδομένων χρησιμοποιώντας κανονική σήμανση

• Μετάφραση

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

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

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

D3.js - Data-Centric Documents Σήμερα, όταν σκεφτόμαστε τα γραφήματα, το πρώτο πράγμα που μας έρχεται στο μυαλό είναι το D3.js Ως έργο ανοιχτού κώδικα, το D3.js παρέχει αναμφίβολα πολλές χρήσιμες λειτουργίες από τις οποίες λείπουν οι περισσότερες υπάρχουσες βιβλιοθήκες. Χαρακτηριστικά όπως το "Enter and Exit", οι ισχυρές μεταβάσεις και μια σύνταξη παρόμοια με το jQuery ή το Prototype το καθιστούν μία από τις καλύτερες βιβλιοθήκες JavaScript για τη δημιουργία γραφημάτων και γραφημάτων. Στο D3.js δημιουργούνται χρησιμοποιώντας HTML, SVG και CSS.

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

Το D3.js δεν λειτουργεί σωστά με παλαιότερα προγράμματα περιήγησης όπως το IE8. Αλλά μπορείτε πάντα να χρησιμοποιείτε πρόσθετα όπως το ight plugin για συμβατότητα μεταξύ προγραμμάτων περιήγησης.

Το D3.js έχει χρησιμοποιηθεί ευρέως στο παρελθόν σε ιστότοπους όπως NYTimes, Uber και Weather.com

Διαγράμματα Google

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

Τα γραφήματα Google έχουν επίσης μια ποικιλία ρυθμίσεων διαμόρφωσης που μπορούν να σας βοηθήσουν να αλλάξετε την εμφάνιση του γραφήματος σας. Τα γραφικά δημιουργούνται χρησιμοποιώντας HTML5/SVG για να διασφαλιστεί η συμβατότητα μεταξύ προγραμμάτων περιήγησης και η φορητότητα μεταξύ πλατφορμών σε iPhone, iPad και Android. Περιέχει επίσης VML για την υποστήριξη παλαιότερων εκδόσεων IE.

Highcharts JS

Το Highcharts JS είναι μια άλλη πολύ δημοφιλής βιβλιοθήκη γραφημάτων. Έρχεται με μεγάλο αριθμό κινούμενων εικόνων διαφόρων τύπων που μπορούν να προσελκύσουν μεγάλη προσοχή στον ιστότοπό σας. Όπως και άλλες βιβλιοθήκες, το HighchartsJS περιέχει πολλά προδημιουργημένα γραφήματα: spline, σχήμα, συνδυασμό, στήλη, ιστόγραμμα, πίτα, scatter κ.λπ.

Ένα από τα μεγαλύτερα πλεονεκτήματα της χρήσης του HighchartsJS είναι η συμβατότητά του με παλαιότερα προγράμματα περιήγησης όπως ο Internet Explorer 6. Τα τυπικά προγράμματα περιήγησης χρησιμοποιούν SVG για την απόδοση γραφημάτων. Στο παλαιού τύπου IE, τα γραφήματα δημιουργούνται μέσω VML.

Αν και το HighchartsJS είναι δωρεάν για προσωπική χρήση, πρέπει να αγοράσετε άδεια για εμπορική χρήση.

Fusioncharts

Το Fusioncharts είναι μια από τις παλαιότερες βιβλιοθήκες JavaScript, που κυκλοφόρησε για πρώτη φορά το 2002. Τα γραφήματα δημιουργούνται χρησιμοποιώντας HTML5/SVG και VML για καλύτερη φορητότητα και συμβατότητα.

Σε αντίθεση με πολλές βιβλιοθήκες, το Fusioncharts παρέχει τη δυνατότητα ανάλυσης δεδομένων JSON και XML. Μπορείτε επίσης να εξαγάγετε αυτά τα γραφήματα σε 3 διαφορετικές μορφές: PNG, JPG και PDF.

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

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

Flot

Το Flot είναι μια βιβλιοθήκη JavaScript για το JQuery που σας επιτρέπει να δημιουργείτε γραφήματα/γραφήματα. Μία από τις παλαιότερες και πιο δημοφιλείς βιβλιοθήκες διαγραμμάτων.

Το Flot υποστηρίζει γραφήματα ράβδων, γραφήματα διασποράς, γραφήματα ράβδων, γραφήματα στηλών και οποιονδήποτε συνδυασμό αυτών των τύπων γραφημάτων. Συμβατό και με παλαιότερα προγράμματα περιήγησης όπως IE 6 και Firefox 2.

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

amCharts

Το amCharts είναι αναμφισβήτητα μία από τις καλύτερες βιβλιοθήκες γραφημάτων εκεί έξω. Χωρίζεται πλήρως σε 3 ανεξάρτητους τύπους: Διαγράμματα JavaScript, Διαγράμματα Χαρτών (amMaps) και Διαγράμματα Μετοχών.

Το AmMaps είναι το αγαπημένο μου από τα τρία παραπάνω. Παρέχει λειτουργίες όπως χάρτες θερμότητας, σχεδίαση γραμμών, προσθήκη κειμένου στον χάρτη, αποστολή εικονιδίων ή φωτογραφιών στην κορυφή του χάρτη σας, αλλαγή κλίμακας κ.λπ.
Το amCharts χρησιμοποιεί SVG για την απόδοση γραφημάτων που λειτουργεί μόνο σε σύγχρονα προγράμματα περιήγησης. Τα γραφήματα ενδέχεται να μην εμφανίζονται σωστά στον IE κάτω από την έκδοση 9.

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

uvCharts

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

Το UvCharts είναι χτισμένο στη βιβλιοθήκη D3.js. Αυτό το έργο υπόσχεται να εξαλείψει όλες τις πολύπλοκες αποχρώσεις της κωδικοποίησης D3.js και να παρέχει εύκολη εφαρμογή γραφημάτων με τυπική εμφάνιση. Τα uvCharts δημιουργούνται χρησιμοποιώντας SVG, HTML και CSS.

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

Ελπίζω να σας άρεσε αυτό το άρθρο. Να έχεις μια όμορφη μέρα.

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

2. Chartist.JS

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

3.c3js

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

4. Στόλος

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

5.Διάγραμμα

Αυτή είναι μια τεράστια και εκτεταμένη βιβλιοθήκη με γραφήματα και διαγράμματα που δημιουργήθηκαν από τους Κινέζους. Υποστηρίζει τεράστιο όγκο πληροφοριών.

6. Ευσέβεια

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

7. DC JS

Μια άλλη υπέροχη βιβλιοθήκη που κάνει αυτό που πρέπει να κάνει. Υπάρχει όμορφο animation, λειτουργικότητα και ευκολία εγκατάστασης.

Βλαντ Μέρζεβιτς

Σε ιστότοπους, μερικές φορές είναι απαραίτητο να χρησιμοποιηθούν διαφορετικά διαγράμματα, τα οποία καθιστούν δυνατή τη σαφή και εύκολη μεταφορά δεδομένων στον χρήστη. Προηγουμένως, παρόμοια γραφήματα δημιουργήθηκαν στο Excel και στη συνέχεια εισήχθησαν στον ιστότοπο ως εικόνα. Αλλά ζούμε στην εποχή της τεχνολογίας της πληροφορίας, γι' αυτό θέλουμε να εισάγουμε ένα διάγραμμα γρήγορα, απλά, ακόμα και έτσι ώστε να είναι διαδραστικό και όμορφο. Και μετά ήρθε η Google και μας έδωσε μια τέτοια υπηρεσία.

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

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

Διάγραμμα πίτας

Αυτό το διάγραμμα μοιάζει με κέικ κομμένο σε κομμάτια διαφορετικού μεγέθους. Το συνολικό άθροισμα όλων των μερών είναι 100%, τα μέρη διαιρούν τον κύκλο ανάλογα με τις τιμές τους.

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

Παράδειγμα 1: Διάγραμμα πίτας

Γράφημα πίτας google.load("οπτικοποίηση", "1", (πακέτα:["corechart"])); google.setOnLoadCallback(drawChart); συνάρτηση drawChart() ( var data = google.visualization.arrayToDataTable([ ["Gas", "Volume"], ["Nitrogen", 78.09], ["Oxygen", 20.95], ["Argon", 0.93], [ "Carbon dioxide", 0.03] ] var options = ( title: "Air Composition", is3D: true, pieResidueSliceLabel: "Rest" var chart = new google.visualization.PieChart(document.getElementById("air")) ) chart.draw (δεδομένα, επιλογές)

Το αποτέλεσμα του παραδείγματος φαίνεται στο Σχ. 1.

Ρύζι. 1. Προβολή γραφήματος πίτας

Στη θέση του εγγράφου που προσθέτουμε το διάγραμμα, εισάγουμε τον παρακάτω κωδικό.

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

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

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

Παραδείγματα, μια λίστα παραμέτρων και μια περιγραφή του γραφήματος πίτας είναι διαθέσιμα σε αυτήν τη διεύθυνση: https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart

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

Ρύζι. 2. Ιστόγραμμα

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

Παράδειγμα 2: Ιστόγραμμα

Ιστόγραμμα google.load("οπτικοποίηση", "1", (πακέτα:["corechart"])); google.setOnLoadCallback(drawChart); συνάρτηση drawChart() ( var data = google.visualization.arrayToDataTable([ ["Year", "Russia", "USA"], ["1860", 1.3, 70], ["1885", 2000, 3120], [ "1901", 12170, 9920] ] var options = ( title: "Oil production", hAxis: (τίτλος: "Year"), vAxis: (τίτλος: "Thousand tons") ); .getElementById("oil"));

Πρώτα, προσθέστε μια ετικέτα και καθορίστε το επιθυμητό πλάτος και ύψος χρησιμοποιώντας στυλ. Επίσης σημαντικό είναι το αναγνωριστικό μέσω του οποίου το σενάριο θα εισάγει το επιλεγμένο γράφημα στο στοιχείο. Το ίδιο το σενάριο, σε σύγκριση με το προηγούμενο παράδειγμα, διατηρεί τη δομή του και αποτελείται από δύο επεξεργάσιμα μέρη - τα πραγματικά δεδομένα που πρέπει να εμφανίζονται στο γράφημα και τις διάφορες ρυθμίσεις του. Χρησιμοποιώντας τις παραμέτρους hAxis και vAxis, θα προσθέσουμε τίτλους αξόνων για λόγους σαφήνειας.

Περίληψη

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

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

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

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

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

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

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

1. FusionCharts

Εκτός από τα γραφήματα JavaScript, το FusionCharts προσφέρει επίσης ένα πρόσθετο jQuery που περιέχει όλα τα καλά του FusionCharts - έξυπνη σχεδίαση, κινούμενα σχέδια και πλούσια διαδραστική εμπειρία. Τα γραφικά εκτελούνται ομαλά σε όλους τους τύπους συσκευών, συμπεριλαμβανομένων υπολογιστών, Mac, συσκευών Android, καθώς και iPad και iPhone. Είναι επίσης συμβατό με προγράμματα περιήγησης έως IE6.

Αυτό το πρόσθετο jQuery έχει μερικά πραγματικά ισχυρά χαρακτηριστικά. Τα γραφήματα μπορούν να αναπαρασταθούν από δεδομένα JSON, δεδομένα XML ή πίνακες HTML. Παρουσιάζοντας πολλά κοινά συμβάντα που συμβαίνουν στο γραφικό (ακολουθεί μια πλήρης λίστα), θα έχετε περισσότερες πιθανότητες να κάνετε τους ακροατές να προβούν σε συγκεκριμένες ενέργειες.

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

Στα δανικά, flot (με ομοιοκαταληξία με «πλοκή») σημαίνει κομψό, ελκυστικό, εντυπωσιακό, και αυτό ακριβώς στοχεύει να κάνει η βιβλιοθήκη Flot. Επικεντρώνονται στη δημιουργία εύχρηστων, ελκυστικών και διαδραστικών γραφημάτων και γραφημάτων. Οι διαδραστικές λειτουργίες περιλαμβάνουν ενεργοποίηση και απενεργοποίηση βρόχων, μετατόπιση και μεγέθυνση, αλληλεπίδραση με δεδομένα και αυτόματη ρύθμιση μεγέθους. Άλλες δυνατότητες περιλαμβάνουν υποστήριξη πολλαπλών αξόνων, γραφήματα πολλαπλών επιπέδων και απόδοση κειμένου με Canvas αντί για HTML. Πολλές άλλες δυνατότητες είναι διαθέσιμες ως πρόσθετα.

Υπάρχουν πολλά βίντεο που δείχνουν πώς να χρησιμοποιείτε το Flot και πολλά επεξηγηματικά παραδείγματα στα οποία μπορείτε επίσης να ανατρέξετε.

Άδεια χρήσης: Ανοιχτού κώδικα. Δωρεάν για οποιαδήποτε χρήση.

3. Highcharts

Το Highcharts είναι μια άλλη δημοφιλής βιβλιοθήκη γραφημάτων JavaScript. Κυκλοφόρησε το 2009 και η χρήση του εξακολουθεί να κερδίζει δυναμική. Προσφέρει γενικά διαγράμματα, χάρτες και γραφήματα μετοχών.

Μπορείτε να κάνετε λήψη του προσαρμογέα jQuery από την κύρια σελίδα λήψης μαζί με την ίδια τη βιβλιοθήκη Highcharts. Αυτό σας επιτρέπει να μάθετε όλα τα ισχυρά χαρακτηριστικά χωρίς να χρειάζεται να ασχοληθείτε με τη JavaScript της βανίλιας.

Όπως το FusionCharts, υποστηρίζει επίσης όλα τα προγράμματα περιήγησης (συμπεριλαμβανομένου του IE6), τις συσκευές και τις πλατφόρμες. Η κοινότητα υποστηρίζει πολύ τα Highcharts και μπορείτε να βρείτε όλα τα πρόσθετα που έχουν αναπτυχθεί από την κοινότητα σε αυτήν τη σελίδα. Ένα άλλο ωραίο χαρακτηριστικό του Highcharts είναι η ενότητα επίδειξης, η οποία σας επιτρέπει να ξεκινήσετε πολύ γρήγορα.

Άδεια χρήσης: Δωρεάν για μη εμπορικούς σκοπούς, πληρώνεται για εμπορικούς σκοπούς.

4. Morris.js

Το Morris.js είναι μια ισχυρή βιβλιοθήκη με καθαρή διεπαφή. Βασίζεται στο jQuery και στη βιβλιοθήκη JavaScript Raphaël. Ο κύριος στόχος είναι να παρέχουμε όμορφα διαγράμματα που να είναι εύκολα στη χρήση. Οι προεπιλεγμένοι τύποι γραφημάτων περιλαμβάνουν γραμμή, γραμμή, περιοχή και ντόνατ. Υπάρχουν πολλά παραδείγματα στη βιβλιοθήκη που μπορείτε να δείτε με κώδικα που θα σας δείξει πώς να ξεκινήσετε και να δημιουργήσετε ελκυστικά γραφήματα μέσα σε λίγα λεπτά.

Άδεια χρήσης: Απλοποιημένη άδεια BSD.

5. CanvasJS jQuery

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

Ακολουθούν μερικά καλά παραδείγματα με πηγαίο κώδικα που δείχνουν ξεκάθαρα τις δυνατότητες χαρτογράφησης καθώς και την ενσωμάτωση του jQuery UI.

Άδεια χρήσης: Δωρεάν για μη εμπορικούς σκοπούς, πληρώνεται για εμπορικούς...

6. Cytoscape.js

Το Cytoscape.js δεν μοιάζει με τη μέση βιβλιοθήκη γραφημάτων σας, αλλά είναι αρκετά εντυπωσιακό ώστε να αξίζει να συμπεριληφθεί σε αυτήν τη λίστα. Σε αντίθεση με τα άλλα πρόσθετα που έχουμε συζητήσει μέχρι τώρα, το Cytoscape είναι πραγματικά μια βιβλιοθήκη σχεδίασης jQuery (δηλαδή βοηθά στην οπτικοποίηση γραφημάτων ή δικτύων). Είναι βελτιστοποιημένο όταν πρόκειται για τη μετατροπή ακατέργαστων δεδομένων δικτύου σε γραφήματα και μπορεί επίσης να χειριστεί μεγάλους όγκους δεδομένων. Συμβατό με όλα τα σύγχρονα προγράμματα περιήγησης, CommonJS/NodeJS, jQuery και Meteor/Atmosphere. Υποστηρίζει επίσης συμβάντα αφής και τυπικές χειρονομίες. Για μια πιο πλήρη λίστα λειτουργιών, ανατρέξτε στη σελίδα Cytoscape.js.

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

Άδεια χρήσης: Ανοιχτού κώδικα. Δωρεάν για όλους τους χρήστες. (LGPL3+)

7. Ευσέβεια

Μερικές φορές χρειάζεστε απλώς μικρά γραφήματα του περιεχομένου σας και το Peity είναι η τέλεια λύση για τέτοιες καταστάσεις. Σας επιτρέπει να μετατρέπετε εύκολα μικρές ποσότητες δεδομένων σε γραφήματα γραμμών, ράβδων και ντόνατ με μία γραμμή κώδικα. Είναι σε μορφή svg και επομένως είναι συμβατά με οποιοδήποτε πρόγραμμα περιήγησης που υποστηρίζει το στοιχείο svg, συμπεριλαμβανομένων των Chrome, Opera, Firefox, IE9+ και Safari. Μπορείτε επίσης να προσαρμόσετε τα γραφικά και να ορίσετε δυναμικά χρώματα. Τα γραφήματα ενδέχεται να ενημερώνονται για να αντικατοπτρίζουν τις αλλαγές στα δεδομένα. Υποστηρίζονται επίσης εκδηλώσεις. Επισυνάπτονται πολλά παραδείγματα με πραγματικό κώδικα στη σελίδα Github.

8. Διάγραμμα Easy Pie

Μιλώντας για απλότητα και αποτελεσματικότητα, πρέπει να αναφέρω το Easy Pie Chart. Αυτό είναι ένα πρόσθετο jQuery που κάνει μόνο ένα πράγμα - δημιουργεί απλά γραφήματα πίτας για μεμονωμένες τιμές. Χρησιμοποιεί το στοιχείο καμβά για τη δημιουργία αυτών των γραφημάτων. Τα γραφήματα είναι εύκολο να ρυθμιστούν και απαιτούν μόνο μερικές γραμμές κώδικα. Αποκρίνονται επίσης και κλιμακώνονται σύμφωνα με την ανάλυση οθόνης για να προσφέρουν καθαρά γραφικά, ακόμη και σε οθόνες αμφιβληστροειδούς.

Το πρόσθετο είναι συμβατό με όλα τα σύγχρονα προγράμματα περιήγησης που υποστηρίζουν το στοιχείο καμβά. Σε IE 8 και παλαιότερη έκδοση, μπορείτε να δημιουργήσετε γραφήματα χρησιμοποιώντας το excanvas. Μπορείτε να δείτε μερικά ενδιαφέροντα demos στο Github.

Άδεια χρήσης: Ανοιχτού κώδικα με άδεια MIT.

9. jqPlot

Το jqPlot είναι ένα πρόσθετο jQuery που σας επιτρέπει να εισάγετε καθαρά διαγράμματα από την πλευρά του πελάτη σε ιστοσελίδες. Το jqPlot μπορεί να υπερηφανεύεται για την ισχυρή «plugggability» καθώς όλοι οι υπολογισμοί και τα σχέδια - γραμμές, άξονες, σκιές, πλέγματα και ούτω καθεξής - γίνονται με χρήση plug-in οπτικοποιητών. Μπορείτε να επεκτείνετε τη λειτουργικότητα για χειρισμό προσαρμοσμένων συμβάντων, προσθήκη νέων τύπων γραφημάτων και άλλες προηγμένες λειτουργίες.

Λεπτομερή μαθήματα σχετικά με τη χρήση του jqPlot είναι διαθέσιμα εδώ. Διατίθενται επίσης παραδείγματα γραφημάτων και ορισμένες δοκιμές μονάδων.

Άδεια χρήσης: Έργο ανοιχτού κώδικα. Διπλή άδεια - MIT και GPL έκδοση 2.

10. jQuery Sparklines

1436351687jQuery-sparklines

Το jQuery Sparklines (παρόμοιο με το Peity) σάς επιτρέπει να δημιουργείτε μικρά, ενσωματωμένα γραφήματα με δεδομένα που παρέχονται απευθείας σε HTML ή μέσω ενσωματωμένης JavaScript. Κάθε παράδειγμα στην παραπάνω εικόνα χρειάζεται μόνο μία γραμμή κώδικα για να δημιουργηθεί. Δεν χρειάζεται καν να γράψετε τον κωδικό μόνοι σας. Υπάρχει ένα πρόγραμμα δημιουργίας κώδικα (κάτω από την επικεφαλίδα "Δοκιμάστε το") όπου μπορείτε να εισαγάγετε δεδομένα και να ορίσετε παραμέτρους και να λάβετε έναν κωδικό που δημιουργείται για εσάς. Λάβετε υπόψη ότι δεν μπορείτε να προσθέσετε κείμενο ή ετικέτες σε sparklines. Έχουν σχεδιαστεί για να δείχνουν αντιστοιχίες με το κείμενό σας. Εάν χρειάζεστε σχολιασμούς ή άλλες λειτουργίες, καλύτερα να χρησιμοποιήσετε ένα από τα πρόσθετα για τα οποία μιλήσαμε παραπάνω.

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

Άδεια χρήσης: Ανοιχτού κώδικα. Δωρεάν για όλες τις χρήσεις.

11. jQuery.Gantt

Μέχρι στιγμής έχουμε μιλήσει για πρόσθετα που δημιουργούν γνωστά γραφήματα και γραφήματα, πρόσθετα που θα σας βοηθήσουν με γραφήματα δικτύου και μερικά για ενσωματωμένα μίνι γραφήματα και γραφήματα. Αλλά αν θέλετε έναν πίνακα εργαλείων με δυνατότητες διαχείρισης έργου, θα χρειαστείτε γραφήματα Gantt. Η προσθήκη jQuery.Gantt σάς επιτρέπει να οπτικοποιείτε γραφήματα Gantt χρησιμοποιώντας Ajax για να ανακτάτε δεδομένα σε μορφή JSON. Τα χαρακτηριστικά περιλαμβάνουν μετατόπιση, μεγέθυνση, αναζήτηση, πολλαπλές εργασίες, διαφορετικά χρώματα για κάθε εργασία, ετικέτες διακοπών και πολλά άλλα. Για να μάθετε περισσότερα σχετικά με αυτό το πρόσθετο, μπορείτε να διαβάσετε τη λεπτομερή τεκμηρίωσή του, η οποία θα σας ενημερώσει για τις παραμέτρους του και τον τρόπο χρήσης του.

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

Άδεια χρήσης: Έργο ανοιχτού κώδικα. Διπλή άδεια - MIT και GPL.

συμπεράσματα

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

Υψηλές μετατροπές!

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

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

Σε αυτό το άρθρο, θα σας πούμε για 10 υπηρεσίες και εργαλεία που θα σας βοηθήσουν να δημιουργήσετε γραφήματα και γραφήματα σε JavaScript. Θα βρείτε άλλες μεθόδους δημιουργίας στην ενότητα "".

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

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

Αυτή η υπηρεσία σάς επιτρέπει να δημιουργήσετε εξαιρετικά οπτικά χαρακτηριστικά. Εισαγάγετε μια εξίσωση, για παράδειγμα 2*sin(4*x)^(x+4), πατήστε "Enter" και η συνάρτηση είναι έτοιμη. Μετά από αυτό, το μόνο που έχετε να κάνετε είναι να αντιγράψετε το url και να το επικολλήσετε στη σελίδα σας.

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

Flot
Βιβλιοθήκη γραφημάτων jQuery από την Google. Δεν χρειάζεται να γράψουμε τίποτα περισσότερο για αυτό, όλα είναι ήδη ξεκάθαρα (: Αλλά εξακολουθούμε να σημειώνουμε ότι η υπηρεσία προσφέρει έναν τεράστιο αριθμό όμορφων παραδειγμάτων με ευέλικτες και απλές ρυθμίσεις.

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

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

Ραφαήλ
Η Raphaël είναι μια μικρή βιβλιοθήκη JavaScript που κάνει τη δημιουργία γραφημάτων και γραφημάτων πολύ πιο εύκολη. Αυτό είναι το πιο ισχυρό εργαλείο από όλα που παρουσιάζονται σε αυτήν την ανασκόπηση. Θα είναι πιο εύκολο για εσάς να δείτε μόνοι σας τις δυνατότητες της βιβλιοθήκης παρά να διαβάσετε μια περιγραφή των δυνατοτήτων της.

Plotr
Βιβλιοθήκη για τη δημιουργία διαγραμμάτων στο Mootools. Ένα εξαιρετικό εργαλείο που παρουσιάζει πληροφορίες με όμορφο και κατανοητό τρόπο. Και για να το διαμορφώσετε χρειάζεται μόνο να αλλάξετε ή να προσθέσετε τιμές.

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