Αναγνώστες σαν εσάς βοηθούν στην υποστήριξη του MUO. Όταν κάνετε μια αγορά χρησιμοποιώντας συνδέσμους στον ιστότοπό μας, ενδέχεται να κερδίσουμε μια προμήθεια θυγατρικών. Διαβάστε περισσότερα.

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

Υπάρχουν διάφοροι τρόποι δημιουργίας γραφημάτων στο React, συμπεριλαμβανομένης της χρήσης βασικού CSS ή μιας βιβλιοθήκης όπως το React-Vis ή το React Google Charts.

Πώς να δημιουργήσετε γραφήματα στο React With CSS

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

εισαγωγή Αντιδρώ από'αντιδρώ';
συνθ Διάγραμμα = () => {
ΕΠΙΣΤΡΟΦΗ (


πλάτος: '100 px', ύψος: '300 px', χρώμα του φόντου: '#5D6AFF'}}/>
 );
}
εξαγωγήΠροκαθορισμένο Διάγραμμα;
instagram viewer

Στον παραπάνω κώδικα, εισάγαμε τη βιβλιοθήκη React. Στη συνέχεια δημιουργήσαμε μια συνάρτηση που ονομάζεται Chart η οποία επιστρέφει ένα div με πλάτος 100px, ύψος 300px και χρώμα φόντου #5D6AFF. Αυτό θα δημιουργήσει ένα βασικό γράφημα με μπλε φόντο. Μπορείτε επίσης να χρησιμοποιήστε το Material UI ή Tailwind CSS στην εφαρμογή React για τη δημιουργία γραφημάτων.

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

εισαγωγή Αντιδρώ από'αντιδρώ';
συνθ Διάγραμμα = () => {
ΕΠΙΣΤΡΟΦΗ (
<div>


πλάτος: '100 px', ύψος: '300 px', χρώμα του φόντου: '#5D6AFF'}}>
<Π>Διάγραμμα 1Π>
div>
πλάτος: '100 px', ύψος: '300 px', χρώμα του φόντου: '#FFCF00'}}>
<imgsrc=" https://dummyimage.com/40x80/000/0011ff"στυλ={{υλικό παραγεμίσματος:'100 εικονοστοιχεία30 εικονοστοιχεία'}} />
div>
div>
 );
}


εξαγωγήΠροκαθορισμένο Διάγραμμα;

Διαγράμματα React χρησιμοποιώντας τη βιβλιοθήκη React-Vis

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

Για να χρησιμοποιήσετε το React-Vis, πρέπει πρώτα να το κάνετε δημιουργήστε μια βασική εφαρμογή React και εγκαταστήστε τη βιβλιοθήκη. Μπορείτε να το κάνετε αυτό με την ακόλουθη εντολή:

npm εγκαθιστώ αντιδρώ-vis

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

εισαγωγή React, { useState } από'αντιδρώ';
εισαγωγή {
 XYPlot,
 LineSeries,
 Vertical GridLines,
 HorizontalGridLines,
 XAxis,
 YAxis
} από'αντίδρασε';


συνθ Διάγραμμα = () => {
συνθ [δεδομένα] = useState([
 { Χ: 0, y: 8 },
 { Χ: 1, y: 5 },
 { Χ: 2, y: 4 },
 { Χ: 3, y: 9 },
 { Χ: 4, y: 1 },
 { Χ: 5, y: 7 },
 { Χ: 6, y: 6 },
 { Χ: 7, y: 3 },
 { Χ: 8, y: 2 },
 { Χ: 9, y: 0 }
 ]);


ΕΠΙΣΤΡΟΦΗ (
<XYPlotπλάτος={300}ύψος={300}>
<VerticalGridLines />
<HorizontalGridLines />
<XAxis />
<YAxis />
<LineSeriesδεδομένα={δεδομένα} />
XYPlot>
 );
}
εξαγωγήΠροκαθορισμένο Διάγραμμα;

Ο παραπάνω κώδικας εισάγει τις βιβλιοθήκες React και React-Vis. Στη συνέχεια, ορίζει μια συνάρτηση που ονομάζεται Διάγραμμα που επιστρέφει ένα XYPlot με VerticalGridLines, HorizontalGridLines, XAxis, YAxis και LineSeries. Το LineSeries παίρνει τον πίνακα δεδομένων, ο οποίος περιέχει τις συντεταγμένες x και y των σημείων που αποτελούν τη γραμμή.

Χρήση της βιβλιοθήκης γραφημάτων React Google

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

Για να χρησιμοποιήσετε το React Google Charts, πρέπει πρώτα να εγκαταστήσετε τη βιβλιοθήκη. Μπορείτε να το κάνετε αυτό με την ακόλουθη εντολή:

npm εγκαθιστώ react-google-charts

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

εισαγωγή React, { useState } από'αντιδρώ';
εισαγωγή { Διάγραμμα } από'react-google-charts';
συνθ MyChart = () => {
συνθ [δεδομένα] = useState([
['Ετος', 'Εκπτώσεις', 'Εξοδα'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
 ]);


ΕΠΙΣΤΡΟΦΗ (
 πλάτος={'400 px'}
 ύψος ={'300 px'}
 γράφημαΤύπος="Μπαρ"
 data={data}
 />
 );
}
εξαγωγήΠροκαθορισμένο MyChart;

Αυτός ο κώδικας εισάγει τις βιβλιοθήκες react και react-google-charts. Στη συνέχεια δημιουργεί μια συνάρτηση που ονομάζεται MyChart η οποία επιστρέφει ένα στοιχείο Chart. Το στοιχείο Γράφημα παίρνει τον πίνακα δεδομένων, ο οποίος περιέχει τις ετικέτες και τις τιμές των σημείων που απαρτίζουν το γράφημα.

Μειονεκτήματα της χρήσης CSS

Υπάρχουν μερικά μειονεκτήματα της χρήσης CSS για τη δημιουργία γραφημάτων στο React:

  • Δύσκολο στη χρήση: Εάν θέλετε να δημιουργήσετε σύνθετα γραφήματα, το CSS μπορεί να είναι δύσκολο στη χρήση.
  • Όχι πολύ ευέλικτο: Το CSS δεν είναι πολύ ευέλικτο, επομένως μπορεί να είναι δύσκολο να κάνετε αλλαγές στα γραφήματα σας.
  • Μη διαδραστικό: Τα γραφήματα CSS δεν είναι διαδραστικά, επομένως οι χρήστες σας δεν θα μπορούν να αλληλεπιδράσουν μαζί τους.

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

Οφέλη από τη χρήση του React-Vis

Υπάρχουν πολλά οφέλη από τη χρήση του React-Vis για τη δημιουργία γραφημάτων στο React:

  • Εύχρηστος: Το React-Vis είναι εύκολο στη χρήση, ώστε να μπορείτε να δημιουργείτε πολύπλοκα γραφήματα με ευκολία.
  • Εξαιρετικά ευέλικτο: Το React-Vis είναι εξαιρετικά ευέλικτο, ώστε να μπορείτε να κάνετε εύκολα αλλαγές στα γραφήματα σας.
  • Διαδραστικό: Τα γραφήματα React-Vis είναι διαδραστικά, ώστε οι χρήστες σας να μπορούν να αλληλεπιδρούν μαζί τους.
  • Κινούμενα σχέδια: Τα γραφήματα React-Vis υποστηρίζουν κινούμενα σχέδια, ώστε να μπορείτε να κάνετε τα γραφήματα σας πιο ελκυστικά.

Αν θέλετε να δημιουργήσετε πολύπλοκα γραφήματα που είναι διαδραστικά και κινούμενα, το React-Vis είναι μια καλή επιλογή.

Οφέλη από τη χρήση των γραφημάτων React Google

Ακριβώς όπως το React-Vis, υπάρχουν πολλά πλεονεκτήματα από τη χρήση του React Google Charts για τη δημιουργία γραφημάτων στο React:

  • Εύχρηστος: Το React Google Charts είναι εύκολο στη χρήση, ώστε να μπορείτε να δημιουργείτε πολύπλοκα γραφήματα με ευκολία.
  • Διαφορετικοί τύποι γραφημάτων: Το React Google Charts παρέχει διαφορετικούς τύπους γραφημάτων, ώστε να μπορείτε να επιλέξετε τον καλύτερο για τα δεδομένα σας.
  • Υποστήριξη για κινούμενα σχέδια: Το React Google Charts υποστηρίζει κινούμενα σχέδια, ώστε να μπορείτε να κάνετε τα γραφήματα σας πιο ελκυστικά.

Αυξήστε την αφοσίωση χρηστών με γραφήματα

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

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