Cititorii ca tine ajută la sprijinirea MUO. Când efectuați o achiziție folosind link-uri de pe site-ul nostru, este posibil să câștigăm un comision de afiliat. Citeşte mai mult.

Diagramele oferă utilizatorilor dvs. un mod convenabil și atractiv de a vizualiza datele. Acestea pot face datele mai ușor de înțeles și vă pot face aplicația mai interactivă.

Există mai multe moduri de a crea diagrame în React, inclusiv folosind CSS de bază sau o bibliotecă precum React-Vis sau React Google Charts.

Cum se creează diagrame în React With CSS

Crearea diagramelor în React folosind CSS de bază este relativ ușoară. Tot ce trebuie să faceți este să creați un element div cu o lățime și înălțime, apoi să setați culoarea de fundal la culoarea dorită a diagramei. De exemplu:

import Reacţiona din'reacţiona';
const Diagrama = () => {
întoarcere (


lăţime: „100px”, înălţime: „300px”, culoare de fundal: „#5D6AFF”}}/>
 );
}
exportMod implicit Diagramă;

În codul de mai sus, am importat biblioteca React. Apoi am creat o funcție numită Chart care returnează un div cu o lățime de 100px, o înălțime de 300px și o culoare de fundal de #5D6AFF. Aceasta va crea o diagramă de bază cu un fundal albastru. Poti de asemenea

instagram viewer
utilizați Material UI sau Tailwind CSS în aplicația React pentru a crea diagrame.

De asemenea, puteți crea mai multe diagrame cu text sau imagini în interiorul div-urilor pentru a crea diagrame mai complexe.

import Reacţiona din'reacţiona';
const Diagrama = () => {
întoarcere (
<div>


lăţime: „100px”, înălţime: „300px”, culoare de fundal: „#5D6AFF”}}>
<p>Diagrama 1p>
div>
lăţime: „100px”, înălţime: „300px”, culoare de fundal: „#FFCF00”}}>
<imgsrc=" https://dummyimage.com/40x80/000/0011ff"stil={{padding:'100px30px'}} />
div>
div>
 );
}


exportMod implicit Diagramă;

Diagrame React folosind biblioteca React-Vis

React-Vis este o bibliotecă creată de Uber care vă permite să creați diagrame și grafice în React. Oferă un set de componente care facilitează crearea de diagrame cu diferite forme, culori și dimensiuni. De asemenea, acceptă animații și interactivitate, ceea ce vă poate ajuta să vă faceți graficele mai atractive.

Pentru a utiliza React-Vis, mai întâi trebuie creați o aplicație React de bază și instalați biblioteca. Puteți face acest lucru cu următoarea comandă:

npm instalare reacţionează-vis

După ce ați instalat biblioteca, puteți crea o diagramă de bază cu următorul cod:

import Reacționează, { useState } din'reacţiona';
import {
 XYPlot,
 LineSeries,
 VerticalGridLines,
 linii orizontale,
 Axa X,
 Axa Y
} din„reacție față de”;


const Diagrama = () => {
const [date] = useState([
 { X: 0, y: 8 },
 { X: 1, y: 5 },
 { X: 2, y: 4 },
 { X: 3, y: 9 },
 { X: 4, y: 1 },
 { X: 5, y: 7 },
 { X: 6, y: 6 },
 { X: 7, y: 3 },
 { X: 8, y: 2 },
 { X: 9, y: 0 }
 ]);


întoarcere (
<XYPlotlăţime={300}înălţime={300}>
<VerticalGridLines />
<OrizontalGridLines />
<Axa X />
<Axa Y />
<LineSeriesdate={date} />
XYPlot>
 );
}
exportMod implicit Diagramă;

Codul de mai sus importă bibliotecile React și React-Vis. Apoi definește o funcție numită Chart care returnează un XYPlot cu VerticalGridLines, HorizontalGridLines, XAxis, YAxis și o LineSeries. LineSeries preia matricea de date, care conține coordonatele x și y ale punctelor care alcătuiesc linia.

Utilizarea bibliotecii React Google Charts

React Google Charts este o altă bibliotecă care facilitează crearea de diagrame în React. Acesta oferă un set de componente pentru crearea diferitelor tipuri de diagrame, cum ar fi diagrame cu bare, diagrame circulare și grafice cu linii. De asemenea, acceptă animații și interactivitate, ceea ce vă poate ajuta să vă faceți graficele mai atractive.

Pentru a utiliza React Google Charts, mai întâi trebuie să instalați biblioteca. Puteți face acest lucru cu următoarea comandă:

npm instalare react-google-charts

După ce ați instalat biblioteca, puteți crea o diagramă de bază cu următorul cod:

import Reacționează, { useState } din'reacţiona';
import { Diagramă } din„react-google-charts”;
const MyChart = () => {
const [date] = useState([
['An', 'Vânzări', „Cheltuieli”],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
 ]);


întoarcere (
 lățime={„400px”}
 inaltime={„300px”}
 chartType="Bar"
 date={date}
 />
 );
}
exportMod implicit MyChart;

Acest cod importă bibliotecile react și react-google-charts. Apoi creează o funcție numită MyChart care returnează o componentă Chart. Componenta Chart preia matricea de date, care conține etichetele și valorile punctelor care alcătuiesc diagrama.

Dezavantajele utilizării CSS

Există câteva dezavantaje ale utilizării CSS pentru a crea diagrame în React:

  • Greu de folosit: Dacă doriți să creați diagrame complexe, CSS poate fi dificil de utilizat.
  • Nu foarte flexibil: CSS nu este foarte flexibil, așa că poate fi dificil să faci modificări diagramelor tale.
  • Nu este interactiv: Diagramele CSS nu sunt interactive, astfel încât utilizatorii dvs. nu vor putea interacționa cu ele.

Dacă doriți să creați diagrame complexe, React-vis și React-google-charts sunt alegeri mai bune. Cu toate acestea, dacă doriți să creați diagrame simple, CSS poate fi o opțiune bună.

Beneficiile utilizării React-Vis

Există mai multe avantaje ale utilizării React-Vis pentru a crea diagrame în React:

  • Ușor de folosit: React-Vis este ușor de utilizat, astfel încât puteți crea diagrame complexe cu ușurință.
  • Foarte flexibil: React-Vis este extrem de flexibil, astfel încât să puteți modifica cu ușurință diagramele dvs.
  • Interactiv: Diagramele React-Vis sunt interactive, astfel încât utilizatorii pot interacționa cu ele.
  • Animat: Diagramele React-Vis acceptă animații, astfel încât să vă puteți face graficele mai captivante.

Dacă doriți să creați diagrame complexe, interactive și animate, React-Vis este o alegere bună.

Beneficiile utilizării React Google Charts

La fel ca React-Vis, există mai multe avantaje ale utilizării React Google Charts pentru a crea diagrame în React:

  • Ușor de folosit: React Google Charts este ușor de utilizat, astfel încât să puteți crea diagrame complexe cu ușurință.
  • Diferite tipuri de diagrame: React Google Charts oferă diferite tipuri de diagrame, astfel încât să o puteți alege pe cea mai bună pentru datele dvs.
  • Suport pentru animație: React Google Charts acceptă animații, astfel încât să vă puteți face graficele mai atractive.

Creșteți implicarea utilizatorilor cu diagrame

Diagramele sunt o modalitate excelentă de a vizualiza datele, dar le puteți folosi și pentru a crește implicarea utilizatorilor. Adăugarea de animații și interactivitate la diagramele dvs. le poate face mai atractive și poate ajuta utilizatorii să vă înțeleagă mai bine datele.

Deci, dacă căutați o modalitate de a crește implicarea utilizatorilor în aplicația dvs. React, luați în considerare adăugarea de diagrame. De asemenea, vă puteți implementa aplicația React pe o platformă rapidă, sigură și scalabilă precum Github.