Δημιουργήστε δυναμικά γραφήματα γρήγορα στο D3 με το Plottable.js

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

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

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

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

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

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

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

Κάθε γράφημα είναι πλήρως διαδραστικό, με τον πηγαίο κώδικα για εκκίνηση. Αν θέλετε να ξαναφτιάξετε ένα παρόμοιο γράφημα, απλά αντιγράψτε / επικολλήστε τον κώδικα JS και αναδιαμορφώστε όπως απαιτείται.

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

Εάν δεν έχετε χρησιμοποιήσει ποτέ το D3.js τότε θα προσπαθήσετε να μάθετε αυτήν τη βιβλιοθήκη. Ειδικά, επειδή είναι γραμμένο σε TypeScript, οπότε πιθανότατα θα θέλατε να το επιλέξετε. Ο τελικός κώδικας είναι συντάχθηκε σε JavaScript ES5, έτσι πρέπει να εργάζονται σε όλα τα μεγάλα προγράμματα περιήγησης.

Αν είστε πρόθυμοι να βουτήξετε, ρίξτε μια ματιά στο δικό τους Σελίδα Tutorials γεμάτο εύχρηστους πόρους. Θα μάθετε όλα όσα χρειάζεστε για να ξεκινήσετε με το Plottable και το Δημιουργήστε δυναμικά γραφήματα στο διαδίκτυο από την αρχή.