Grafikoni pružaju vašim korisnicima praktičan, atraktivan način vizualizacije podataka. Oni mogu olakšati razumijevanje podataka i učiniti vašu aplikaciju interaktivnijom.
Postoji nekoliko načina za izradu grafikona u Reactu, uključujući korištenje osnovnog CSS-a ili biblioteke poput React-Vis ili React Google Charts.
Kako stvoriti grafikone u Reactu pomoću CSS-a
Stvaranje grafikona u Reactu korištenjem osnovnog CSS-a relativno je jednostavno. Sve što trebate učiniti je stvoriti div element sa širinom i visinom, zatim postaviti boju pozadine na željenu boju grafikona. Na primjer:
uvoz Reagirati iz'reagirati';konst Grafikon = () => {
povratak (širina: '100px', visina: '300px', boja pozadine: '#5D6AFF'}}/>
);
}
izvozzadano Grafikon;
U gornjem kodu uvezli smo biblioteku React. Zatim smo stvorili funkciju pod nazivom Chart koja vraća div širine 100px, visine 300px i boje pozadine #5D6AFF. Ovo će stvoriti osnovni grafikon s plavom pozadinom. Također možete
koristiti Material UI ili Tailwind CSS u vašoj aplikaciji React za izradu grafikona.Također možete izraditi više grafikona s tekstom ili slikama unutar divova kako biste izradili složenije grafikone.
uvoz Reagirati iz'reagirati';konst Grafikon = () => {
povratak (
<div>širina: '100px', visina: '300px', boja pozadine: '#5D6AFF'}}>
<str>Dijagram 1str>
div>širina: '100px', visina: '300px', boja pozadine: '#FFCF00'}}>
<imgsrc=" https://dummyimage.com/40x80/000/0011ff"stil={{padding:'100 px30 px'}} />
div>
div>
);
}
izvozzadano Grafikon;
React grafikoni pomoću React-Vis biblioteke
React-Vis je biblioteka koju je stvorio Uber koja vam omogućuje izradu dijagrama i grafikona u Reactu. Omogućuje skup komponenti koje olakšavaju izradu grafikona različitih oblika, boja i veličina. Također podržava animacije i interaktivnost, što može pomoći da vaši grafikoni budu privlačniji.
Da biste koristili React-Vis, prvo morate izraditi osnovnu React aplikaciju i instalirati biblioteku. To možete učiniti sljedećom naredbom:
npm instalirati reagirati-visNakon što instalirate biblioteku, možete izraditi osnovni grafikon sa sljedećim kodom:
uvoz Reagiraj, {useState} iz'reagirati';uvoz {
XYPlot,
LineSeries,
VerticalGridLines,
Horizontalne rešetke,
Xos,
Yos
} iz'reagirati-vis';konst Grafikon = () => {
konst [podaci] = 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 }
]);povratak (
<XYPlotširina={300}visina={300}>
<VerticalGridLines />
<Horizontalne rešetke />
<Xos />
<Yos />
<LineSeriespodaci={podaci} />
XYPlot>
);
}
izvozzadano Grafikon;
Gornji kod uvozi biblioteke React i React-Vis. Zatim definira funkciju pod nazivom Chart koja vraća XYPlot s VerticalGridLines, HorizontalGridLines, XAxis, YAxis i LineSeries. LineSeries uzima niz podataka koji sadrži x i y koordinate točaka koje čine liniju.
Korištenje React Google Charts Library
React Google Charts još je jedna biblioteka koja olakšava stvaranje grafikona u Reactu. Omogućuje skup komponenti za stvaranje različitih vrsta grafikona, kao što su stupčasti grafikoni, tortni grafikoni i linijski grafikoni. Također podržava animacije i interaktivnost, što može pomoći da vaši grafikoni budu privlačniji.
Da biste koristili React Google Charts, prvo morate instalirati biblioteku. To možete učiniti sljedećom naredbom:
npm instalirati react-google-chartsNakon što instalirate biblioteku, možete izraditi osnovni grafikon sa sljedećim kodom:
uvoz Reagiraj, {useState} iz'reagirati';
uvoz { Grafikon } iz'react-google-charts';konst Moj grafikon = () => {
konst [podaci] = useState([
['Godina', 'Prodajni', 'Troškovi'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
]);povratak (
širina={'400px'}
visina={'300px'}
CharType="Bar"
podaci={podaci}
/>
);
}
izvozzadano MyChart;
Ovaj kod uvozi biblioteke react i react-google-charts. Zatim stvara funkciju pod nazivom MyChart koja vraća komponentu Chart. Komponenta Grafikon preuzima niz podataka koji sadrži oznake i vrijednosti točaka koje čine grafikon.
Nedostaci korištenja CSS-a
Postoji nekoliko nedostataka korištenja CSS-a za izradu grafikona u Reactu:
- Teško za korištenje: Ako želite izraditi složene grafikone, korištenje CSS-a može biti teško.
- Nije baš fleksibilno: CSS nije baš fleksibilan, pa može biti teško mijenjati vaše grafikone.
- Nije interaktivno: CSS grafikoni nisu interaktivni, tako da vaši korisnici neće moći s njima komunicirati.
Ako želite izraditi složene grafikone, React-vis i React-google-charts bolji su izbor. Međutim, ako želite izraditi jednostavne grafikone, CSS bi mogao biti dobra opcija.
Prednosti korištenja React-Vis
Nekoliko je prednosti korištenja React-Visa za izradu grafikona u Reactu:
- Jednostavan za korištenje: React-Vis je jednostavan za korištenje, tako da možete s lakoćom stvarati složene grafikone.
- Vrlo fleksibilan: React-Vis je vrlo fleksibilan, tako da možete jednostavno mijenjati svoje karte.
- Interaktivno: React-Vis grafikoni su interaktivni, tako da vaši korisnici mogu komunicirati s njima.
- Animirani: React-Vis grafikoni podržavaju animacije, tako da svoje grafikone možete učiniti privlačnijim.
Ako želite stvoriti složene grafikone koji su interaktivni i animirani, React-Vis je dobar izbor.
Prednosti korištenja React Google grafikona
Baš kao i React-Vis, postoji nekoliko prednosti korištenja React Google grafikona za izradu grafikona u Reactu:
- Jednostavan za korištenje: React Google Charts jednostavan je za korištenje, tako da možete s lakoćom izraditi složene grafikone.
- Različite vrste grafikona: React Google Charts nudi različite vrste grafikona, tako da možete odabrati najbolji za svoje podatke.
- Podrška za animaciju: React Google Charts podržava animacije, tako da svoje grafikone možete učiniti privlačnijim.
Povećajte angažman korisnika s grafikonima
Grafikoni su izvrstan način za vizualizaciju podataka, ali ih možete koristiti i za povećanje angažmana korisnika. Dodavanje animacija i interaktivnosti vašim grafikonima može ih učiniti privlačnijim i može pomoći vašim korisnicima da bolje razumiju vaše podatke.
Dakle, ako tražite način da povećate angažman korisnika u svojoj aplikaciji React, razmislite o dodavanju grafikona. Također možete implementirati svoju React aplikaciju na brzu, sigurnu i skalabilnu platformu kao što je Github.
