Bralci, kot ste vi, pomagajo podpirati MUO. Ko opravite nakup prek povezav na našem spletnem mestu, lahko zaslužimo partnersko provizijo. Preberi več.

Grafikoni vašim uporabnikom omogočajo priročen in privlačen način vizualizacije podatkov. Lahko olajšajo razumevanje podatkov in naredijo vašo aplikacijo bolj interaktivno.

Obstaja več načinov za ustvarjanje grafikonov v Reactu, vključno z uporabo osnovnega CSS ali knjižnice, kot sta React-Vis ali React Google Charts.

Kako ustvariti grafikone v Reactu s CSS

Ustvarjanje grafikonov v Reactu z uporabo osnovnega CSS je relativno enostavno. Vse kar morate storiti je, da ustvarite element div s širino in višino, nato pa nastavite barvo ozadja na želeno barvo grafikona. Na primer:

uvoz Reagiraj od'reagirati';
konst Graf = () => {
vrnitev (


premer: '100px', višina: '300px', Barva ozadja: '#5D6AFF'}}/>
 );
}
izvozprivzeto grafikon;

V zgornji kodi smo uvozili knjižnico React. Nato smo ustvarili funkcijo, imenovano Chart, ki vrne div s širino 100 slikovnih pik, višino 300 slikovnih pik in barvo ozadja #5D6AFF. To bo ustvarilo osnovni grafikon z modrim ozadjem. Lahko tudi

instagram viewer
uporabite Material UI oz Tailwind CSS v vaši aplikaciji React za ustvarjanje grafikonov.

Ustvarite lahko tudi več grafikonov z besedilom ali slikami znotraj divov, da ustvarite bolj zapletene grafikone.

uvoz Reagiraj od'reagirati';
konst Graf = () => {
vrnitev (
<div>


premer: '100px', višina: '300px', Barva ozadja: '#5D6AFF'}}>
<str>Graf 1str>
div>
premer: '100px', višina: '300px', Barva ozadja: '#FFCF00'}}>
<imgsrc=" https://dummyimage.com/40x80/000/0011ff"stil={{padding:'100 slikovnih pik30 slikovnih pik'}} />
div>
div>
 );
}


izvozprivzeto grafikon;

Grafi React z uporabo knjižnice React-Vis

React-Vis je knjižnica, ki jo je ustvaril Uber in vam omogoča ustvarjanje grafikonov in grafov v Reactu. Ponuja nabor komponent, ki olajšajo ustvarjanje grafikonov različnih oblik, barv in velikosti. Podpira tudi animacije in interaktivnost, kar lahko pomaga narediti vaše grafikone bolj privlačne.

Če želite uporabljati React-Vis, morate najprej ustvarite osnovno aplikacijo React in namestite knjižnico. To lahko storite z naslednjim ukazom:

npm namestite reagirati-vis

Ko namestite knjižnico, lahko ustvarite osnovni grafikon z naslednjo kodo:

uvoz Odziv, {useState} od'reagirati';
uvoz {
 XYPlot,
 LineSeries,
 VerticalGridLines,
 Horizontalne mrežne črte,
 os X,
 YAxis
} od'react-vis';


konst Graf = () => {
konst [podatki] = 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 }
 ]);


vrnitev (
<XYPlotpremer={300}višina={300}>
<VerticalGridLines />
<Horizontalne mrežne črte />
<XAxis />
<YAxis />
<LineSeriespodatke={podatki} />
XYPlot>
 );
}
izvozprivzeto grafikon;

Zgornja koda uvozi knjižnici React in React-Vis. Nato definira funkcijo, imenovano Chart, ki vrne XYPlot z VerticalGridLines, HorizontalGridLines, XAxis, YAxis in LineSeries. LineSeries vzame niz podatkov, ki vsebuje koordinate x in y točk, ki sestavljajo črto.

Uporaba React Google Charts Library

React Google Charts je še ena knjižnica, ki olajša ustvarjanje grafikonov v Reactu. Zagotavlja nabor komponent za ustvarjanje različnih vrst grafikonov, kot so palični grafikoni, tortni grafikoni in črtni grafi. Podpira tudi animacije in interaktivnost, kar lahko pomaga narediti vaše grafikone bolj privlačne.

Če želite uporabljati React Google Charts, morate najprej namestiti knjižnico. To lahko storite z naslednjim ukazom:

npm namestite react-google-charts

Ko namestite knjižnico, lahko ustvarite osnovni grafikon z naslednjo kodo:

uvoz Odziv, {useState} od'reagirati';
uvoz { Grafikon } od'react-google-charts';
konst Moj grafikon = () => {
konst [podatki] = useState([
['leto', 'Prodaja', 'Stroški'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
 ]);


vrnitev (
 širina={'400px'}
 višina={'300px'}
 chartType="Bar"
 podatki={podatki}
 />
 );
}
izvozprivzeto MyChart;

Ta koda uvozi knjižnici react in react-google-charts. Nato ustvari funkcijo z imenom MyChart, ki vrne komponento Chart. Komponenta Grafikon sprejme matriko podatkov, ki vsebuje oznake in vrednosti točk, ki sestavljajo grafikon.

Slabosti uporabe CSS

Uporaba CSS za ustvarjanje grafikonov v Reactu ima nekaj slabosti:

  • Težko za uporabo: Če želite ustvariti zapletene grafikone, je lahko CSS težko uporabljati.
  • Ni zelo prilagodljiv: CSS ni zelo prilagodljiv, zato je lahko težko spremeniti vaše grafikone.
  • Ni interaktivno: Grafi CSS niso interaktivni, zato vaši uporabniki ne bodo mogli komunicirati z njimi.

Če želite ustvariti zapletene grafikone, sta React-vis in React-google-charts boljša izbira. Če pa želite ustvariti preproste grafikone, je CSS morda dobra možnost.

Prednosti uporabe React-Vis

Uporaba React-Vis za ustvarjanje grafikonov v Reactu ima več prednosti:

  • Enostaven za uporabo: React-Vis je enostaven za uporabo, tako da lahko z lahkoto ustvarite zapletene grafikone.
  • Zelo prilagodljiv: React-Vis je zelo prilagodljiv, tako da lahko preprosto spreminjate svoje grafikone.
  • Interaktivno: Grafi React-Vis so interaktivni, tako da lahko vaši uporabniki komunicirajo z njimi.
  • animirano: Grafi React-Vis podpirajo animacije, tako da lahko naredite svoje grafikone bolj privlačne.

Če želite ustvariti kompleksne grafikone, ki so interaktivni in animirani, je React-Vis dobra izbira.

Prednosti uporabe React Google Charts

Tako kot pri React-Visu obstaja več prednosti uporabe React Google Charts za ustvarjanje grafikonov v Reactu:

  • Enostaven za uporabo: React Google Charts je enostaven za uporabo, tako da lahko z lahkoto ustvarite zapletene grafikone.
  • Različne vrste grafikonov: React Google Charts ponuja različne vrste grafikonov, tako da lahko izberete najboljšega za svoje podatke.
  • Podpora za animacijo: React Google Charts podpira animacije, tako da lahko naredite svoje grafikone bolj privlačne.

Povečajte sodelovanje uporabnikov z grafikoni

Grafikoni so odličen način za vizualizacijo podatkov, vendar jih lahko uporabite tudi za povečanje angažiranosti uporabnikov. Če grafikonom dodate animacije in interaktivnost, jih lahko naredite bolj privlačne in uporabnikom lahko pomagate bolje razumeti vaše podatke.

Torej, če iščete način za povečanje angažiranosti uporabnikov v svoji aplikaciji React, razmislite o dodajanju grafikonov. Svojo aplikacijo React lahko namestite tudi na hitro, varno in razširljivo platformo, kot je Github.