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

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

Ίσως αναρωτιέστε ποιος είναι ο καλύτερος και εξοικονόμηση χρόνου τρόπος για να επιτευχθεί αυτό το είδος του στόχου.

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

Ευτυχώς στις κλήσεις API του Flexmonster, είναι απίστευτα εύκολο να το κάνετε.

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

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

Ας αρχίσουμε!

Σχετικά με τις μεθόδους και τα συμβάντα

Θα χρειαστεί να χρησιμοποιήσετε τις ακόλουθες κλήσεις API:

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

Βήμα 1: Εγκατάσταση με δέσμες ενεργειών Flexmonster

Προσθέστε τα απαραίτητα σενάρια στην ιστοσελίδα σας:

Μην ξεχάσετε να προσθέσετε τα δοχεία όπου και οι δύο πίνακες θα αποτυπωθούν:

Βήμα 2: Αρχικοποιήστε ένα συμπαγές πίνακα περιστροφής

Προσθέστε αυτόν τον κώδικα JavaScript για την εμφάνιση του πρώτου στοιχείου:

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

Για να επισημάνουμε τα κελιά με χρώματα με βάση τις τιμές τους, έχουμε ορίσει το αντικείμενο μορφής υπό όρους.

Βήμα 3: Δημιουργήστε ένα επίπεδο πλέγμα

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

Βήμα 4: Η αλληλεπίδραση μεταξύ των στροφών

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

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

Εδώ εφαρμόζεται η ίδια λογική:

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

Τελικό βήμα: Απολαύστε και μοιραστείτε τα αποτελέσματα

Ανατρέξτε στον Πίνακα περιστρεφόμενου πίνακα FlexMonster και στον Πίνακα ελέγχου διαγραμμάτων από το Flexmonster (@flexmonster) στο CodePen.

Περίληψη

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

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

Χρήσιμοι σύνδεσμοι

  • Ζωντανή επίδειξη
  • Πίνακας περιστροφής Flexmonster & Χάρτες
  • Περισσότερες Demos Flexmonster

Δημοσιεύθηκε αρχικά στη διεύθυνση https://codepen.io.