Επιστήμη Δεδομένων Και Βάσεις Δεδομένων

Ένα σεμινάριο για Drill-down FusionCharts στο jQuery

Η οπτικοποίηση των δεδομένων καθιστά ευκολότερη την ανάγνωση

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

σε τι χρησιμοποιείται το node.js

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

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

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

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

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

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

Κατανόηση των FusionCharts

Πριν ξεκινήσουμε το σεμινάριο, ας καλύψουμε τη βασική ανατομία του FusionCharts. Κάθε γράφημα αποτελείται από αυτά τα βασικά στοιχεία:

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

Τα κομμάτια ενός FusionChart.

Δημιουργία αναλυτικού διαγράμματος

Πριν ξεκινήσουμε, ακολουθεί ένα στιγμιότυπο οθόνης του γραφήματος που θα κάνουμε σε αυτό το σεμινάριο. Μπορείτε να δείτε το JSFiddle εδώ ή αποκτήστε πρόσβαση στον πλήρη πηγαίο κώδικα του έργου στο my Repo GitHub .

Μια προεπισκόπηση αυτού του σεμιναρίου

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

Βήμα 1: Συμπερίληψη αρχείων JavaScript και δημιουργία του κοντέινερ γραφημάτων

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

Ελαχιστοποιημένο jQuery
Χάρτες Fusion κύρια βιβλιοθήκη JS (συμπεριλάβετε και τα δύο fusioncharts.js και fusioncharts.charts.js)
Χάρτες Fusion Πρόσθετο jQuery

Το Oursection θα μοιάζει τώρα με αυτό:

drill-down chart will load here

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

$

Τώρα, μπορούμε να το επιλέξουμε χρησιμοποιώντας το jQuery's $('#drill-down-chart') επιλογέας μέσα στον κωδικό:

id

Σημείωση: Εάν έχετε περισσότερα από ένα γραφήματα στη σελίδα σας, θα χρειαστείτε ένα ξεχωριστό κοντέινερ για κάθε γράφημα με ένα μοναδικό 'data': [{ 'label': 'Q1', 'value': '850000', }, { 'label': 'Q2', 'value': '2070000', },... // more data objects ] .

Η οπτικοποίηση των δεδομένων διευκολύνει την ανάγνωση.

Βήμα 2: Λήψη και δομή δεδομένων

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

key

Καθώς σχεδιάζουμε το αναλυτικό διάγραμμα, το JSON του γίνεται πιο περίπλοκο. Ο σύνδεσμος μεταξύ γραφημάτων γονέα και παιδιού απαιτεί ένα ακόμη value - link σύζευξη μέσα σε κάθε αντικείμενο της συστοιχίας δεδομένων. Το νέο κλειδί (αναπάντεχα, ονομάζεται id) θα περιέχει το αναγνωριστικό του θυγατρικού γραφήματος που θα λάβετε όταν κάνετε κλικ στο γράφημα γονικών δεδομένων του. Η μορφή για τον καθορισμό του θυγατρικού γραφήματος newchart-dataFormat-childId είναι newchart-json-childId. Δεδομένου ότι χρησιμοποιούμε το JSON, γνωρίζουμε ότι ό, τι συνδέουμε θα μοιάζει με 'data': [{ 'label': 'Q1', 'value': '850000', 'link': 'newchart-json-q1' }, { 'label': 'Q2', 'value': '2070000', 'link': 'newchart-json-q2' }, ... // more data objects] . Εδώ είναι πώς το ορίζουμε για το γράφημα μας:

insertFusionCharts

Βήμα 3: Εισαγωγή δεδομένων γραφήματος

Μόλις έχετε τα δεδομένα έτοιμα, ήρθε η ώρα να εισαγάγετε το γράφημα στη σελίδα σας χρησιμοποιώντας το $('#drill-down-chart').insertFusionCharts({ type: 'column2d', id: 'mychart', width: '100%', height: '450', dataFormat: 'json', dataSource: { 'chart': { 'caption': 'Quarterly Revenue for 2015', 'paletteColors': '#9EA5FC', 'xAxisName': 'Quarter (Click to drill down)', 'yAxisName': 'Revenue (In USD)', // more chart configuration options }, 'data': [ // see step-2 for explanation ], 'linkedData': [ // explained in step-4 ] } }) μέθοδος που παρέχεται από την προσθήκη jQuery:

type

Ας αναλύσουμε το παραπάνω απόσπασμα κώδικα:

column2d καθορίζει τον τύπο του γονικού γραφήματος που σχεδιάζουμε. Σε αυτήν την περίπτωση, id. Κάθε γράφημα στη βιβλιοθήκη FusionCharts έχει ένα μοναδικό ψευδώνυμο. Μπορείτε να βρείτε το ψευδώνυμο για το γράφημα που θέλετε να σχεδιάσετε στη λίστα με τα γραφήματα του FusionCharts.
id ορίζει το μοναδικό αναγνωριστικό για το γράφημα, ώστε να μην συγχέεται με το αναγνωριστικό του στοιχείου που περιέχει το γράφημα μας. Ένα γράφημα width χρησιμοποιείται για την επιλογή γραφήματος για την εφαρμογή χειριστών συμβάντων και μεθόδων κλήσεων. Θα το χρησιμοποιήσουμε στο Βήμα 5.
height και dataFormat ορίστε τη διάσταση του γραφήματος σε pixel ή ποσοστό. Το πλάτος 100% λέει στο γράφημα να καταλαμβάνει το πλήρες πλάτος του κοντέινερ.
Ορίζουμε τη μορφή δεδομένων χρησιμοποιώντας το dataSource Χαρακτηριστικό. Χρησιμοποιούμε το JSON για το παράδειγμά μας, αλλά υπάρχουν και άλλες αποδεκτές μορφές δεδομένων, όπως μια διεύθυνση URL XML. Για να μάθετε περισσότερα σχετικά με τις μορφές δεδομένων, ανατρέξτε στην επίσημη σελίδα τεκμηρίωσης του FusionCharts.
chart περιέχει το πραγματικό περιεχόμενο του γραφήματος και το data αντικείμενο μέσα σε αυτό περιέχει τις επιλογές διαμόρφωσης του γραφήματος, όπως λεζάντα και δευτερεύον κεφάλαιο. Το linkedData Ο πίνακας θα πρέπει να φαίνεται οικείος αφού το καταφέραμε στο Βήμα 2 (περιέχει τα δεδομένα που πρέπει να σχεδιάζονται) και linkedData περιέχει το περιεχόμενο για το θυγατρικό γράφημα (το γράφημα που λαμβάνετε αφού κάνετε κλικ σε μια γραφική παράσταση δεδομένων στο γονικό γράφημα).

Σχετίζεται με: Προσλάβετε το κορυφαίο 3% των ανεξάρτητων αρχιτεκτόνων Big Data.

Βήμα 4: Δημιουργία της συστοιχίας συνδεδεμένων δεδομένων για παιδικά γραφήματα

Τώρα που έχουμε ορίσει το γονικό γράφημα, ήρθε η ώρα να δημιουργήσετε ένα θυγατρικό γράφημα για κάθε γράφημα δεδομένων, μια διαδικασία πολύ παρόμοια με τη δημιουργία του γονικού γραφήματος. Το 'linkeddata': [{ 'id': 'q1', 'linkedchart': { 'chart': { 'caption': 'Monthly Revenue', 'subcaption': 'First Quarter', 'paletteColors': '#EEDA54, #A2A5FC, #41CBE3', 'labelFontSize': '16', // more configuration options }, 'data': [{ 'label': 'Jan', 'value': '255000' }, { 'label': 'Feb', 'value': '467500' }, //more data] } }, //content for more child charts πίνακας, που δημιουργήθηκε με τη μέθοδο «insertFusionCharts», θα ορίσει ένα ξεχωριστό αντικείμενο για κάθε θυγατρικό γράφημα. Δείτε πώς φαίνονται τα δεδομένα για το πρώτο θυγατρικό γράφημα:

id

linkedChart είναι το αναγνωριστικό του μεμονωμένου παιδικού γραφήματος που ορίσαμε στο Βήμα 2. dataSource είναι παρόμοιο με το fusionchartsrendered από το Βήμα 3 στο ότι περιέχει το πραγματικό περιεχόμενο αυτού του γραφήματος. Υπάρχουν πολλά άλλα χαρακτηριστικά που μπαίνουν μέσα στο αντικείμενο γραφήματος, το οποίο καλύπτω λεπτομερώς στην επόμενη ενότητα, 'Βελτίωση σχεδιασμού με χαρακτηριστικά γραφήματος'.

Βήμα 5: Προσαρμοσμένη αναλυτική διαμόρφωση

Διαφορετικοί τύποι γραφημάτων

Μέχρι στιγμής, το δείγμα κώδικα έχει τόσο τα γονικά όσο και τα θυγατρικά γραφήματα που έχουν τον ίδιο τύπο γραφήματος. Αν θέλετε να δείτε αναλυτικά έναν διαφορετικό τύπο γραφήματος (από στήλη σε πίτα, για παράδειγμα), το κάνετε δεσμεύοντας το $('#drill-down-chart').bind('fusionchartsrendered', function(event, args) { FusionCharts.items['mychart'].configureLink({ type: 'doughnut2d', overlayButton: { message: 'BACK', // Set the button to show diff message bgColor: '#FCFDFD', borderColor: '#cccccc' } }); }); Εκδήλωση.

fusionchartsrendered

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

Απόδοση γραφημάτων σε διαφορετικά τμήματα

Ένα άλλο δροσερό πράγμα που μπορείτε να κάνετε είναι να αποδώσετε το παιδικό γράφημα σε διαφορετικό κοντέινερ και όχι το ίδιο με το γονικό του. Για αυτό, ορίστε ένα ξεχωριστό HTMLcontainer μετά το γονικό κοντέινερ γραφήματος και μεταβιβάστε το αναγνωριστικό του στο $('#chart-container').bind('fusionchartsrendered', function(event, args) { FusionCharts.items['mychart'].configureLink({ type: 'doughnut2d', renderAt:'chart-container2', overlayButton: { message: 'BACK', // Set the button to show diff messafe bgColor: '#FCFDFD', borderColor: '#cccccc' } }); }); χαρακτηριστικό όπως φαίνεται παρακάτω:

renderAt

Η τιμή που δίνεται στο chart-container2 Το χαρακτηριστικό καθορίζει το αναγνωριστικό του thein που θα αποδώσει το θυγατρικό γράφημα (chart).

Βελτίωση σχεδιασμού με χαρακτηριστικά γραφήματος

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

plotSpacePercent καθορίζει το χρώμα των γραφημάτων δεδομένων. Εάν δώσετε ένα μόνο χρώμα εδώ, όλες οι στήλες θα έχουν αυτό το χρώμα. Εάν δώσετε πολλά χρώματα, η πρώτη στήλη θα πάρει την πρώτη τιμή, η δεύτερη στήλη θα πάρει τη δεύτερη τιμή και ούτω καθεξής.
baseFont ελέγχει το διάστημα μεταξύ των στηλών. Η προεπιλεγμένη τιμή είναι 20 (η τιμή είναι int, αλλά η μονάδα είναι ποσοστό) και το επιτρεπόμενο εύρος είναι 0-80. Μια τιμή μηδέν θα κάνει τις στήλες να συσσωρευτούν και να κολλήσουν μεταξύ τους.
plotToolText ορίζει την οικογένεια γραμματοσειρών του γραφήματος. Μπορείτε να χρησιμοποιήσετε οποιαδήποτε γραμματοσειρά θέλετε. Χρησιμοποίησα το Open Sans της Google στο γράφημα μου. Απλώς συμπεριλάβετε το εξωτερικό αρχείο γραμματοσειράς στη σελίδα HTML για να το χρησιμοποιήσετε στο γράφημα σας.
$label σας επιτρέπει να προσαρμόσετε τις συμβουλές εργαλείων. Χρησιμοποιώντας μακροεντολές όπως $dataValue και * 'plotToolText': ' $label: $dataValue ' , μπορείτε να εμφανίσετε συγκεκριμένες πληροφορίες για μια συγκεκριμένη γραφική παράσταση δεδομένων από μέσα και, στη συνέχεια, να χρησιμοποιήσετε το ενσωματωμένο CSS. Εδώ είναι αυτό που έχω κάνει στο παράδειγμά μας:

theme

toptal.js σας επιτρέπει να ορίσετε τα χαρακτηριστικά γραφήματος σε ένα διαφορετικό αρχείο και να τα εφαρμόσετε μία φορά εδώ, αντί να γεμίζετε το αντικείμενο γραφήματος με πολλά χαρακτηριστικά γραφήματος. Μπορείτε να βρείτε το αρχείο θέματος για αυτό το σεμινάριο -
- μέσα στο φάκελο JS του repo GitHub του έργου.

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

Περισσότεροι πόροι FusionCharts και jQuery

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

Πρόσθετα γραφημάτων jQuery: Για έμπνευση, επισκεφτείτε τον επίσημο σελίδα προσθηκών γραφημάτων jQuery για να δείτε μερικά ζωντανά παραδείγματα.
Τεκμηρίωση: Εάν δεν μπορείτε να καταλάβετε κάτι, η τεκμηρίωση είναι το πρώτο μέρος που πρέπει να κοιτάξετε. Εδώ είναι βολικοί σύνδεσμοι για το Πρόσθετο jQuery και το αναλυτικό διάγραμμα (επίσης γνωστά ως συνδεδεμένα γραφήματα).
Επιδείξεις: Κάθε βιβλιοθήκη χαρτών προσφέρει ζωντανά δείγματα για να δείξει τις δυνατότητές της και το FusionCharts δεν διαφέρει. Προχωρήστε στο επίδειξη γκαλερί περισσότερα από 800 ζωντανά δείγματα, με πλήρη πηγαίο κώδικα, εάν χρειάζεστε κάποιες ιδέες. Υπάρχει μια καλή πιθανότητα ότι ό, τι προσπαθείτε να κάνετε είναι ήδη διαθέσιμο. Δεν χρειάζεται να ξεκινήσετε από το μηδέν. απλά πιείτε το βιολί και προχωρήστε από εκεί!
Περισσότερες επεκτάσεις: Εάν δεν χρησιμοποιείτε JavaScript βανίλιας ή jQuery, τότε μπορείτε να εξερευνήσετε περισσότερα πρόσθετα και περιτυλίγματα που προσφέρονται από το FusionCharts στο αυτή η σελίδα . Έχουν αποκλειστικά πρόσθετα για μια ποικιλία βιβλιοθηκών και πλαισίων όπως Angular, React, Java, ASP.NET κ.λπ.

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

Σχετίζεται με: Εξόρυξη δεδομένων για Προγνωστική ανάλυση κοινωνικών δικτύων