Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon Παράδειγμα κώδικα γραφήματος React


Παράδειγμα κώδικα γραφήματος React


Ακολουθούν μερικά παραδείγματα βιβλιοθηκών γραφημάτων React με τα αντίστοιχα χαρακτηριστικά και παραδείγματα:

1. React Chartjs 2

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

2. React Διαγράμματα Google

- Δυνατότητες: Διάφοροι τύποι γραφημάτων όπως περιοχή, γραμμή, συννεφάκι και άλλα.
- Παραδείγματα:
- Διάγραμμα περιοχής
- Διάγραμμα ράβδων
- Γράφημα φυσαλίδων
- Ημερολόγιο
- Διάγραμμα Κηροπήγιο
- Γράφημα στήλης
- Combo Chart
- Γκαντ
- Μετρητής
- Γεωγραφικό διάγραμμα
- Ιστόγραμμα
- Γραμμικό διάγραμμα
- Οργανόγραμμα
- Διάγραμμα πίτας
- Σάνκι
- Διάγραμμα διασποράς
- Γράφημα βαθμιδωτής περιοχής
- Τραπέζι
- Χρονοδιάγραμμα
- Δέντρο χάρτη
- Δέντρο των λέξεων
- Κινούμενα σχέδια
- Επεξεργαστής χάρτη
- Έλεγχοι
- Αλληλεπιδράσεις
- Διάταξη
- Υπολογιστικό φύλλο
- Γραμμή εργαλείων

3. ApexCharts.js

- Δυνατότητες: Διάφοροι τύποι γραφημάτων όπως γραμμή, στήλη, γραμμή, πίτα και άλλα.
- Παραδείγματα: Περιλαμβάνει τον πηγαίο κώδικα για όλα τα παραδείγματα για εξοικονόμηση χρόνου ανάπτυξης.

4. CanvasJS

- Δυνατότητες: Διαδραστικά, αποκριτικά γραφήματα με κινούμενα σχέδια, μεγέθυνση, μετατόπιση, συμβάντα, εξαγωγή, αναλυτικές πληροφορίες και ενημερώσεις σε πραγματικό χρόνο.
- Παραδείγματα:
- Γραμμικά γραφήματα
- Διαγράμματα Spline και Step Line
- Διαγράμματα περιοχών
- Γραφήματα Spline Area, Stacked Area, Stacked Area 100, Step Area, Range Area και Range Spline Area
- Διαγράμματα στηλών
- Διαγράμματα ράβδων
- Στοιβαγμένη στήλη, Στοιβαγμένη στήλη 100%, Στήλη εύρους, Στοιβαγμένη γραμμή, Στοιβαγμένη γραμμή 100%, Γραμμή εύρους και γραφήματα καταρράκτη
- Διαγράμματα πίτας
- Γραφήματα ντόνατ / ντόνατ
- Διαγράμματα χοάνης και πυραμίδας
- Διαγράμματα Candlestick και OHLC
- Διαγράμματα Scatter και Bubble
- Διαγράμματα Box and Whisker
- Γραμμικά γραφήματα σφαλμάτων και σφαλμάτων
- Δυναμικά γραφήματα
- Διαγράμματα μετοχών με επιλογέα εύρους, πλοηγό και πολλαπλά γραφήματα

5. TanStack/react-charts

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

Αυτές οι βιβλιοθήκες παρέχουν εκτενή παραδείγματα και πρότυπα για να σας βοηθήσουν να ξεκινήσετε με τη δημιουργία γραφημάτων στην εφαρμογή React σας. Μπορείτε να επιλέξετε αυτό που ταιριάζει καλύτερα στις ανάγκες σας με βάση τους τύπους γραφημάτων που θέλετε να δημιουργήσετε και το επίπεδο προσαρμογής που χρειάζεστε[1][2][3][4][5].

Αναφορές:
[1] https://react-chartjs-2.js.org/examples/
[2] https://www.react-google-charts.com/examples
[3] https://apexcharts.com/react-chart-demos/
[4] https://canvasjs.com/react-charts/
[5] https://codesandbox.io/examples/package/react-charts