Grafy poskytujú vašim používateľom pohodlný a atraktívny spôsob vizualizácie údajov. Môžu zjednodušiť porozumenie údajov a zvýšiť interaktívnosť vašej aplikácie.
Existuje niekoľko spôsobov, ako vytvoriť grafy v React, vrátane použitia základných CSS alebo knižnice, ako je React-Vis alebo React Google Charts.
Ako vytvoriť grafy v React with CSS
Vytváranie grafov v Reacte pomocou základného CSS je pomerne jednoduché. Všetko, čo musíte urobiť, je vytvoriť prvok div so šírkou a výškou a potom nastaviť farbu pozadia na požadovanú farbu grafu. Napríklad:
importovať Reagovať od'reagovať';konšt Graf = () => {
vrátiť (šírka: '100px', výška: '300px', farba pozadia: '#5D6AFF'}}/>
);
}
exportpredvolená Graf;
Vo vyššie uvedenom kóde sme importovali knižnicu React. Potom sme vytvorili funkciu s názvom Graf, ktorá vracia div so šírkou 100px, výškou 300px a farbou pozadia #5D6AFF. Tým sa vytvorí základná tabuľka s modrým pozadím. Môžete tiež
použite Material UI alebo Tailwind CSS vo vašej aplikácii React na vytváranie grafov.Môžete tiež vytvoriť viacero grafov s textom alebo obrázkami vo vnútri prvkov div a vytvoriť tak komplexnejšie grafy.
importovať Reagovať od'reagovať';konšt Graf = () => {
vrátiť (
<div>šírka: '100px', výška: '300px', farba pozadia: '#5D6AFF'}}>
<p>Graf 1p>
div>šírka: '100px', výška: '300px', farba pozadia: '#FFCF00'}}>
<imgsrc=" https://dummyimage.com/40x80/000/0011ff"štýl={{vypchávka:'100 pixelov30 pixelov'}} />
div>
div>
);
}
exportpredvolená Graf;
React Charts pomocou knižnice React-Vis
React-Vis je knižnica vytvorená spoločnosťou Uber, ktorá vám umožňuje vytvárať tabuľky a grafy v Reacte. Poskytuje sadu komponentov, ktoré uľahčujú vytváranie grafov s rôznymi tvarmi, farbami a veľkosťami. Podporuje tiež animácie a interaktivitu, vďaka čomu môžu byť vaše grafy pútavejšie.
Ak chcete použiť React-Vis, musíte to najskôr vytvorte základnú aplikáciu React a nainštalujte knižnicu. Môžete to urobiť pomocou nasledujúceho príkazu:
npm Inštalácia reagovať-visPo nainštalovaní knižnice môžete vytvoriť základnú tabuľku s nasledujúcim kódom:
importovať Reagovať, { useState } od'reagovať';importovať {
XYPlot,
LineSeries,
Vertikálne čiary mriežky,
HorizontalGridLines,
XAxis,
YAxis
} od'react-vis';konšt Graf = () => {
konšt [údaje] = 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 }
]);vrátiť (
<XYPlotšírka={300}výška={300}>
<Vertikálne čiary mriežky />
<Horizontálne čiary mriežky />
<XAxis />
<YAxis />
<LineSeriesúdajov={údaje} />
XYPlot>
);
}
exportpredvolená Graf;
Vyššie uvedený kód importuje knižnice React a React-Vis. Potom definuje funkciu s názvom Graf, ktorá vracia XYPlot s VerticalGridLines, HorizontalGridLines, XAxis, YAxis a LineSeries. LineSeries preberá dátové pole, ktoré obsahuje súradnice x a y bodov, ktoré tvoria čiaru.
Používanie knižnice React Google Charts Library
React Google Charts je ďalšia knižnica, ktorá uľahčuje vytváranie grafov v React. Poskytuje sadu komponentov na vytváranie rôznych typov grafov, ako sú stĺpcové grafy, koláčové grafy a čiarové grafy. Podporuje tiež animácie a interaktivitu, vďaka čomu môžu byť vaše grafy pútavejšie.
Ak chcete používať React Google Charts, musíte si najprv nainštalovať knižnicu. Môžete to urobiť pomocou nasledujúceho príkazu:
npm Inštalácia reagovať-google-grafyPo nainštalovaní knižnice môžete vytvoriť základnú tabuľku s nasledujúcim kódom:
importovať Reagovať, { useState } od'reagovať';
importovať { Graf } od'react-google-charts';konšt Môj graf = () => {
konšt [údaje] = useState([
['rok', 'predaj', 'výdavky'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
]);vrátiť (
šírka={'400px'}
výška={'300px'}
chartType="bar"
data={data}
/>
);
}
exportpredvolená MyChart;
Tento kód importuje knižnice reakcií a reakcií-google-grafy. Potom vytvorí funkciu s názvom MyChart, ktorá vráti komponent Chart. Komponent Chart preberá dátové pole, ktoré obsahuje označenia a hodnoty bodov, ktoré tvoria graf.
Nevýhody používania CSS
Používanie CSS na vytváranie grafov v Reacte má niekoľko nevýhod:
- Ťažko použiteľné: Ak chcete vytvárať zložité grafy, použitie CSS môže byť náročné.
- Nie veľmi flexibilné: CSS nie je príliš flexibilné, takže môže byť ťažké vykonávať zmeny v grafoch.
- Nie interaktívne: Grafy CSS nie sú interaktívne, takže vaši používatelia s nimi nebudú môcť interagovať.
Ak chcete vytvoriť komplexné grafy, React-vis a React-google-charts sú lepšou voľbou. Ak však chcete vytvárať jednoduché grafy, CSS môže byť dobrou voľbou.
Výhody používania React-Vis
Existuje niekoľko výhod používania React-Vis na vytváranie grafov v React:
- Jednoduché použitie: React-Vis sa ľahko používa, takže môžete ľahko vytvárať komplexné grafy.
- Vysoko flexibilné: React-Vis je vysoko flexibilný, takže môžete ľahko vykonávať zmeny vo svojich grafoch.
- Interaktívne: Grafy React-Vis sú interaktívne, takže vaši používatelia s nimi môžu interagovať.
- Animované: Grafy React-Vis podporujú animácie, vďaka čomu môžu byť vaše grafy pútavejšie.
Ak chcete vytvoriť komplexné grafy, ktoré sú interaktívne a animované, React-Vis je dobrou voľbou.
Výhody používania React Google Charts
Rovnako ako React-Vis, existuje niekoľko výhod používania React Google Charts na vytváranie grafov v React:
- Jednoduché použitie: React Google Charts sa ľahko používa, takže môžete ľahko vytvárať zložité grafy.
- Rôzne typy grafov: React Google Charts poskytuje rôzne typy grafov, takže si môžete vybrať ten najlepší pre vaše dáta.
- Podpora pre animáciu: React Google Charts podporuje animácie, vďaka čomu môžu byť vaše grafy pútavejšie.
Zvýšte zapojenie používateľov pomocou grafov
Grafy sú skvelým spôsobom vizualizácie údajov, ale môžete ich použiť aj na zvýšenie zapojenia používateľov. Pridaním animácií a interaktivity do grafov môžu byť pútavejšie a môžu pomôcť vašim používateľom lepšie porozumieť vašim údajom.
Ak teda hľadáte spôsob, ako zvýšiť zapojenie používateľov do aplikácie React, zvážte pridanie grafov. Svoju aplikáciu React môžete nasadiť aj na rýchlu, bezpečnú a škálovateľnú platformu, ako je Github.
