Grafy poskytují vašim uživatelům pohodlný a atraktivní způsob vizualizace dat. Mohou usnadnit pochopení dat a mohou vaši aplikaci učinit interaktivnější.
Existuje několik způsobů, jak vytvořit grafy v Reactu, včetně použití základních CSS nebo knihovny jako React-Vis nebo React Google Charts.
Jak vytvářet grafy v React with CSS
Vytváření grafů v Reactu pomocí základního CSS je poměrně snadné. Vše, co musíte udělat, je vytvořit prvek div s šířkou a výškou a poté nastavit barvu pozadí na požadovanou barvu grafu. Například:
import Reagovat z'reagovat';konst Graf = () => {
vrátit se (šířka: '100px', výška: '300px', barva pozadí: '#5D6AFF'}}/>
);
}
vývoznívýchozí Schéma;
Ve výše uvedeném kódu jsme importovali knihovnu React. Poté jsme vytvořili funkci nazvanou Chart, která vrací div o šířce 100px, výšce 300px a barvě pozadí #5D6AFF. Tím se vytvoří základní graf s modrým pozadím. Můžete také
použijte Material UI nebo Tailwind CSS ve vaší aplikaci React k vytváření grafů.Můžete také vytvořit více grafů s textem nebo obrázky uvnitř prvků div a vytvořit tak složitější grafy.
import Reagovat z'reagovat';konst Graf = () => {
vrátit se (
<div>šířka: '100px', výška: '300px', barva pozadí: '#5D6AFF'}}>
<p>Graf 1p>
div>šířka: '100px', výška: '300px', barva pozadí: '#FFCF00'}}>
<imgsrc=" https://dummyimage.com/40x80/000/0011ff"styl={{vycpávka:'100 pixelů30 pixelů'}} />
div>
div>
);
}
vývoznívýchozí Schéma;
React Charts pomocí knihovny React-Vis
React-Vis je knihovna vytvořená Uberem, která vám umožňuje vytvářet tabulky a grafy v Reactu. Poskytuje sadu komponent, které usnadňují vytváření grafů s různými tvary, barvami a velikostmi. Podporuje také animace a interaktivitu, díky kterým budou vaše grafy poutavější.
Chcete-li použít React-Vis, musíte nejprve vytvořit základní aplikaci React a nainstalovat knihovnu. Můžete to udělat pomocí následujícího příkazu:
npm Nainstalujte reagovat-visPo instalaci knihovny můžete vytvořit základní graf s následujícím kódem:
import Reagovat, { useState } z'reagovat';import {
XYPlot,
LineSeries,
Vertikální čáry mřížky,
vodorovné čáry mřížky,
XAxis,
YAxis
} z'react-vis';konst Graf = () => {
konst [data] = 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átit se (
<XYPlotšířka={300}výška={300}>
<Vertikální čáry mřížky />
<Horizontální čáry mřížky />
<XAxis />
<YAxis />
<LineSeriesdata={data} />
XYPlot>
);
}
vývoznívýchozí Schéma;
Výše uvedený kód importuje knihovny React a React-Vis. Potom definuje funkci nazvanou Chart, která vrací XYPlot s VerticalGridLines, HorizontalGridLines, XAxis, YAxis a LineSeries. LineSeries přebírá datové pole, které obsahuje souřadnice x a y bodů, které tvoří čáru.
Pomocí knihovny React Google Charts Library
React Google Charts je další knihovna, která usnadňuje vytváření grafů v Reactu. Poskytuje sadu komponent pro vytváření různých typů grafů, jako jsou sloupcové grafy, koláčové grafy a spojnicové grafy. Podporuje také animace a interaktivitu, díky kterým budou vaše grafy poutavější.
Chcete-li používat React Google Charts, musíte nejprve nainstalovat knihovnu. Můžete to udělat pomocí následujícího příkazu:
npm Nainstalujte reagovat-google-grafyPo instalaci knihovny můžete vytvořit základní graf s následujícím kódem:
import Reagovat, { useState } z'reagovat';
import { Graf } z'react-google-charts';konst Můj graf = () => {
konst [data] = useState([
['Rok', 'Odbyt', 'výdaje'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
]);vrátit se (
šířka={'400px'}
výška={'300px'}
chartType="Bar"
data={data}
/>
);
}
vývoznívýchozí MyChart;
Tento kód importuje knihovny reagovat a reagovat-google-charts. Poté vytvoří funkci nazvanou MyChart, která vrátí komponentu Chart. Komponenta Graf přebírá datové pole, které obsahuje popisky a hodnoty bodů tvořících graf.
Nevýhody použití CSS
Používání CSS k vytváření grafů v Reactu má několik nevýhod:
- Těžko použitelné: Pokud chcete vytvářet složité grafy, použití CSS může být obtížné.
- Nepříliš flexibilní: CSS není příliš flexibilní, takže může být obtížné provádět změny v grafech.
- Není interaktivní: Grafy CSS nejsou interaktivní, takže s nimi vaši uživatelé nebudou moci interagovat.
Pokud chcete vytvářet složité grafy, React-vis a React-google-charts jsou lepší volbou. Pokud však chcete vytvářet jednoduché grafy, CSS může být dobrou volbou.
Výhody používání React-Vis
Existuje několik výhod používání React-Vis k vytváření grafů v Reactu:
- Snadné použití: React-Vis se snadno používá, takže můžete snadno vytvářet složité grafy.
- Vysoce flexibilní: React-Vis je vysoce flexibilní, takže můžete snadno provádět změny v grafech.
- Interaktivní: Grafy React-Vis jsou interaktivní, takže s nimi mohou vaši uživatelé pracovat.
- Animované: Grafy React-Vis podporují animace, takže můžete své grafy učinit poutavějšími.
Pokud chcete vytvářet komplexní grafy, které jsou interaktivní a animované, React-Vis je dobrá volba.
Výhody používání React Google Charts
Stejně jako React-Vis má použití React Google Charts k vytváření grafů v Reactu několik výhod:
- Snadné použití: React Google Charts se snadno používá, takže můžete snadno vytvářet složité grafy.
- Různé typy grafů: React Google Charts poskytuje různé typy grafů, takže si můžete vybrat ten nejlepší pro svá data.
- Podpora pro animaci: React Google Charts podporuje animace, takže vaše grafy mohou být poutavější.
Zvyšte zapojení uživatelů pomocí grafů
Grafy jsou skvělým způsobem vizualizace dat, ale můžete je také použít ke zvýšení zapojení uživatelů. Přidání animací a interaktivity do grafů je může učinit poutavějšími a může pomoci vašim uživatelům lépe porozumět vašim datům.
Pokud tedy hledáte způsob, jak zvýšit zapojení uživatelů do aplikace React, zvažte přidání grafů. Svou aplikaci React můžete také nasadit na rychlou, bezpečnou a škálovatelnou platformu, jako je Github.
