Come aggiungere grafici alla tua app React

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:

import React from 'react';


const Chart = () => {
return (
  <div style={{width: '100px', height: '300px', backgroundColor: '#5D6AFF'}}/>
);
}

export default Chart;

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 utilizzare Material UI 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.

import React from 'react';


const Chart = () => {
return (
  <div>
   <div style={{width: '100px', height: '300px', backgroundColor: '#5D6AFF'}}>
    <p>Chart 1</p>
   </div>
   <div style={{width: '100px', height: '300px', backgroundColor: '#FFCF00'}}>
    <img src="https://dummyimage.com/40x80/000/0011ff" style={{padding:'100px 30px'}} />
   </div>
  </div>
);
}

export default Chart;

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 utilizzare React-Vis, devi prima creare un’app React di base e installare la libreria. Puoi farlo con il seguente comando:

npm install react-vis

Dopo aver installato la libreria, puoi creare un grafico di base con il seguente codice:

import React, { useState } from 'react';


import {
XYPlot,
LineSeries,
VerticalGridLines,
HorizontalGridLines,
XAxis,
YAxis
} from 'react-vis';

export default Chart;

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 install react-google-charts

Dopo aver installato la libreria, puoi creare un grafico di base con il seguente codice:

import React, { useState } from 'react';
import { Chart } from 'react-google-charts';


const MyChart = () => {
const [data] = useState([
  ['Year', 'Sales', 'Expenses'],
  ['2013', 1000, 400],
  ['2014', 1170, 460],
  ['2015', 660, 1120],
  ['2016', 1030, 540]
]);

export default 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.
• Non molto 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.