I lettori come te aiutano a sostenere MUO. Quando effettui un acquisto utilizzando i link sul nostro sito, potremmo guadagnare una commissione di affiliazione. Per saperne di più.

I grafici forniscono agli utenti un modo conveniente e attraente di visualizzare i dati. Possono semplificare la comprensione dei dati e rendere la tua app più interattiva.

Esistono diversi modi per creare grafici in React, incluso l'utilizzo di CSS di base o una libreria come React-Vis o React Google Charts.

Come creare grafici in React With CSS

La creazione di grafici in React utilizzando CSS di base è relativamente semplice. Tutto quello che devi fare è creare un elemento div con una larghezza e un'altezza, quindi impostare il colore di sfondo sul colore desiderato del grafico. Per esempio:

importare Reagire da'reagire';
cost Grafico = () => {
ritorno (


larghezza: '100px', altezza: '300px', colore di sfondo: '#5D6AFF'}}/>
 );
}
esportarepredefinito Grafico;

Nel codice sopra, abbiamo importato la libreria React. Abbiamo quindi creato una funzione chiamata Chart che restituisce un div con una larghezza di 100px, un'altezza di 300px e un colore di sfondo di #5D6AFF. Questo creerà un grafico di base con uno sfondo blu. Puoi anche

instagram viewer
utilizzare l'interfaccia utente materiale O Tailwind CSS nella tua app React per creare grafici.

Puoi anche creare più grafici con testo o immagini all'interno dei div per creare grafici più complessi.

importare Reagire da'reagire';
cost Grafico = () => {
ritorno (
<div>


larghezza: '100px', altezza: '300px', colore di sfondo: '#5D6AFF'}}>
<P>Grafico 1P>
div>
larghezza: '100px', altezza: '300px', colore di sfondo: '#FFCF00'}}>
<immsrc=" https://dummyimage.com/40x80/000/0011ff"stile={{imbottitura:'100 pixel30px'}} />
div>
div>
 );
}


esportarepredefinito Grafico;

Grafici React utilizzando la libreria React-Vis

React-Vis è una libreria creata da Uber che ti permette di creare diagrammi e grafici in React. Fornisce una serie di componenti che semplificano la creazione di grafici con diverse forme, colori e dimensioni. Supporta anche animazioni e interattività, che possono aiutarti a rendere i tuoi grafici più coinvolgenti.

Per usare React-Vis, devi prima creare un'app React di base e installa la libreria. Puoi farlo con il seguente comando:

npm installare reagire-vis

Una volta installata la libreria, puoi creare un grafico di base con il seguente codice:

importare Reagisci, { useState } da'reagire';
importare {
 XYPlot,
 LineaSerie,
 VerticalGridLines,
 Linee griglia orizzontali,
 Asse X,
 YAsse
} da'reagire-vis';


cost Grafico = () => {
cost [dati] = useState([
 { X: 0, io: 8 },
 { X: 1, io: 5 },
 { X: 2, io: 4 },
 { X: 3, io: 9 },
 { X: 4, io: 1 },
 { X: 5, io: 7 },
 { X: 6, io: 6 },
 { X: 7, io: 3 },
 { X: 8, io: 2 },
 { X: 9, io: 0 }
 ]);


ritorno (
<XYTramalarghezza={300}altezza={300}>
<VerticalGridLines />
<Linee griglia orizzontali />
<Asse X />
<YAsse />
<LineaSeriedati={dati} />
XYTrama>
 );
}
esportarepredefinito Grafico;

Il codice precedente importa le librerie React e React-Vis. Definisce quindi una funzione chiamata Chart che restituisce un XYPlot con VerticalGridLines, HorizontalGridLines, XAxis, YAxis e LineSeries. LineSeries accetta l'array di dati, che contiene le coordinate x e y dei punti che compongono la linea.

Utilizzo della libreria React di Google Charts

React Google Charts è un'altra libreria che semplifica la creazione di grafici in React. Fornisce una serie di componenti per la creazione di diversi tipi di grafici, come grafici a barre, grafici a torta e grafici a linee. Supporta anche animazioni e interattività, che possono aiutarti a rendere i tuoi grafici più coinvolgenti.

Per utilizzare React Google Charts, devi prima installare la libreria. Puoi farlo con il seguente comando:

npm installare react-google-charts

Una volta installata la libreria, puoi creare un grafico di base con il seguente codice:

importare Reagisci, { useState } da'reagire';
importare { Grafico } da'react-google-charts';
cost Il mio grafico = () => {
cost [dati] = useState([
['Anno', 'Saldi', 'Spese'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
 ]);


ritorno (
 larghezza={'400px'}
 altezza={'300px'}
 tipo di grafico="Sbarra"
 dati={dati}
 />
 );
}
esportarepredefinito MyChart;

Questo codice importa le librerie react e react-google-charts. Quindi crea una funzione chiamata MyChart che restituisce un componente Chart. Il componente Grafico accetta l'array di dati, che contiene le etichette ei valori dei punti che compongono il grafico.

Svantaggi dell'uso dei CSS

Ci sono alcuni svantaggi nell'usare i CSS per creare grafici in React:

  • Difficile da usare: Se vuoi creare grafici complessi, i CSS possono essere difficili da usare.
  • Poco flessibile: I CSS non sono molto flessibili, quindi può essere difficile apportare modifiche ai grafici.
  • Non interattivo: I grafici CSS non sono interattivi, quindi i tuoi utenti non saranno in grado di interagire con essi.

Se vuoi creare grafici complessi, React-vis e React-google-charts sono scelte migliori. Tuttavia, se vuoi creare grafici semplici, i CSS possono essere una buona opzione.

Vantaggi dell'utilizzo di React-Vis

Ci sono diversi vantaggi nell'usare React-Vis per creare grafici in React:

  • Facile da usare: React-Vis è facile da usare, quindi puoi creare facilmente grafici complessi.
  • Altamente flessibile: React-Vis è altamente flessibile, quindi puoi apportare facilmente modifiche ai tuoi grafici.
  • Interattivo: I grafici React-Vis sono interattivi, quindi i tuoi utenti possono interagire con essi.
  • Animato: I grafici React-Vis supportano le animazioni, quindi puoi rendere i tuoi grafici più accattivanti.

Se vuoi creare grafici complessi che siano interattivi e animati, React-Vis è una buona scelta.

Vantaggi dell'utilizzo di React Google Charts

Proprio come React-Vis, ci sono diversi vantaggi nell'usare React Google Charts per creare grafici in React:

  • Facile da usare: React Google Charts è facile da usare, quindi puoi creare facilmente grafici complessi.
  • Diversi tipi di grafici: React Google Charts offre diversi tipi di grafici, quindi puoi scegliere quello migliore per i tuoi dati.
  • Supporto per l'animazione: React Google Charts supporta le animazioni, quindi puoi rendere i tuoi grafici più coinvolgenti.

Aumenta il coinvolgimento degli utenti con i grafici

I grafici sono un ottimo modo per visualizzare i dati, ma puoi anche utilizzarli per aumentare il coinvolgimento degli utenti. L'aggiunta di animazioni e interattività ai tuoi grafici può renderli più coinvolgenti e può aiutare i tuoi utenti a comprendere meglio i tuoi dati.

Quindi, se stai cercando un modo per aumentare il coinvolgimento degli utenti nella tua app React, prendi in considerazione l'aggiunta di grafici. Puoi anche distribuire la tua app React su una piattaforma veloce, sicura e scalabile come Github.