Πώς επανασχεδιάσατε ένα γράφημα όταν αλλάξετε δεδομένα;

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

1. Ενημερώστε την πηγή δεδομένων:

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

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

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

2. Ενεργοποιήστε μια ανασυγκρότηση:

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

* chart.js: Το Chart.js συνήθως χειρίζεται αυτόματα ενημερώσεις εάν τροποποιήσετε τα δεδομένα απευθείας στην ιδιότητα `Data` της διαμόρφωσης του γραφήματος. Ωστόσο, για πιο πολύπλοκες ενημερώσεις, ίσως χρειαστεί να καλέσετε το `chart.update ()` για να ενεργοποιήσετε ρητά μια ανασυγκρότηση.

`` `javascript

// Υποθέτοντας ότι το 'MyChart' είναι το chart.js chart instance

mychart.data.datasets [0] .data =[10, 20, 30, 40, 50]. // Ενημέρωση δεδομένων

myChart.upDate (); // Force Redraw

`` `

* d3.js: Το D3.JS είναι δηλωτικό, που σημαίνει ότι περιγράφετε την εμφάνιση του γραφήματος με βάση τα δεδομένα. Για να επανασχεδιάσετε, πρέπει να εκτελέσετε ξανά τον κώδικα που δημιουργεί τα στοιχεία του γραφήματος, χρησιμοποιώντας τα ενημερωμένα δεδομένα. Αυτό συχνά περιλαμβάνει τη χρήση `selectall ()` για την επιλογή στοιχείων και, στη συνέχεια, την ενημέρωση των χαρακτηριστικών τους με βάση τα νέα δεδομένα. Αυτό είναι σημαντικά πιο χειροκίνητο από άλλες βιβλιοθήκες.

`` `javascript

// Παράδειγμα ενημέρωσης d3.js (απλοποιημένη):

D3.Select ("#mychart") // Επιλέξτε δοχείο γραφήματος

.Selectall ("rect") // Επιλέξτε ορθογώνια (μπαρ σε ένα διάγραμμα μπαρ, για παράδειγμα)

.data (newdata) // Συνδέστε νέα δεδομένα

.attr ("ύψος", d => d * 10); // Ενημέρωση ύψους βάσει νέων δεδομένων

`` `

* Highcharts: Παρόμοια με το chart.js, τα highcharts συχνά ενημερώνονται αυτόματα εάν τροποποιήσετε απευθείας τα δεδομένα. Ωστόσο, `chart.redraw ()` είναι μια αξιόπιστη μέθοδος για να αναγκάσει ρητά μια ανασυγκρότηση.

`` `javascript

// Υποθέτοντας το «διάγραμμα» είναι η παρουσία σας HighCharts Chart

chart.series [0] .setData ([10, 20, 30, 40, 50]).

chart.redraw ();

`` `

* Plotly: Το Plotly χρησιμοποιεί τις μεθόδους `plotly.react` ή` plotly.update 'για να επανασχεδιάσει το γράφημα με ενημερωμένα δεδομένα. Το `plotly.react` αντικαθιστά πλήρως τα δεδομένα και τη διάταξη του γραφήματος, ενώ το` plotly.update 'ενημερώνει μόνο τα συγκεκριμένα ίχνη ή χαρακτηριστικά.

`` `javascript

Plotly.react ('mydiv', {// 'mydiv' είναι το αναγνωριστικό του δοχείου του χάρτη

x:[1,2,3],

Y:[4,5,6]

});

`` `

* Recharts: Recharts, μια βιβλιοθήκη χαρτογράφησης που βασίζεται σε αντιδράσεις, λειτουργεί παρόμοια με το chart.js:Ενημερώνετε τα δεδομένα που διαβιβάζονται στο στοιχείο του πίνακα και οι επαναλαμβανόμενες συνιστώσες αυτόματα.

3. Χειριστείτε αποτελεσματικά τα μεγάλα σύνολα δεδομένων:

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

* Διαδοχικές ενημερώσεις: Αντί να επανασχεδιάσετε ολόκληρο το διάγραμμα, ενημερώστε μόνο τα μέρη που έχουν αλλάξει.

* εικονικοποίηση δεδομένων: Καθιστά μόνο το ορατό τμήμα των δεδομένων.

* Βελτιστοποιημένες δομές δεδομένων: Χρησιμοποιήστε αποτελεσματικές δομές δεδομένων για να επιταχύνετε την πρόσβαση και τη χειραγώγηση δεδομένων.

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