Wykresy zapewniają użytkownikom wygodny, atrakcyjny sposób wizualizacji danych. Mogą ułatwić zrozumienie danych i sprawić, że Twoja aplikacja będzie bardziej interaktywna.
Istnieje kilka sposobów tworzenia wykresów w React, w tym użycie podstawowego CSS lub biblioteki, takiej jak React-Vis lub React Google Charts.
Jak tworzyć wykresy w React With CSS
Tworzenie wykresów w React przy użyciu podstawowego CSS jest stosunkowo łatwe. Wystarczy utworzyć element div o szerokości i wysokości, a następnie ustawić kolor tła na żądany kolor wykresu. Na przykład:
import Reagować z'reagować';konst Wykres = () => {
powrót (szerokość: „100 pikseli”, wysokość: „300 pikseli”, kolor tła: „#5D6AFF”}}/>
);
}
eksportdomyślny Wykres;
W powyższym kodzie zaimportowaliśmy bibliotekę React. Następnie utworzyliśmy funkcję o nazwie Chart, która zwraca element div o szerokości 100 pikseli, wysokości 300 pikseli i kolorze tła #5D6AFF. Spowoduje to utworzenie podstawowego wykresu z niebieskim tłem. Możesz również
użyj interfejsu materiałów Lub Tailwind CSS w Twojej aplikacji React do tworzenia wykresów.Możesz także tworzyć wiele wykresów z tekstem lub obrazami wewnątrz elementów div, aby tworzyć bardziej złożone wykresy.
import Reagować z'reagować';konst Wykres = () => {
powrót (
<dz>szerokość: „100 pikseli”, wysokość: „300 pikseli”, kolor tła: „#5D6AFF”}}>
<P>Wykres 1P>
dz>szerokość: „100 pikseli”, wysokość: „300 pikseli”, kolor tła: „#FFCF00”}}>
<imgźródło=" https://dummyimage.com/40x80/000/0011ff"styl={{wyściółka:'100 pikseli30px'}} />
dz>
dz>
);
}
eksportdomyślny Wykres;
Wykresy React przy użyciu biblioteki React-Vis
React-Vis to biblioteka stworzona przez Ubera, która umożliwia tworzenie wykresów i wykresów w React. Zapewnia zestaw komponentów, które ułatwiają tworzenie wykresów o różnych kształtach, kolorach i rozmiarach. Obsługuje również animacje i interaktywność, co może pomóc w uatrakcyjnieniu wykresów.
Aby korzystać z React-Vis, musisz najpierw stworzyć podstawową aplikację React i zainstaluj bibliotekę. Możesz to zrobić za pomocą następującego polecenia:
np zainstalować reaguj-visPo zainstalowaniu biblioteki możesz utworzyć podstawowy wykres z następującym kodem:
import Reaguj, { stan użycia } z'reagować';import {
Wykres XY,
Seria linii,
pionowe linie siatki,
poziome linie siatki,
oś X,
Oś Y
} z„reakcja-vis”;konst Wykres = () => {
konst [dane] = 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 }
]);powrót (
<Wykres XYszerokość={300}wysokość={300}>
<Pionowe linie siatki />
<Poziome Linie Siatki />
<Oś X />
<Oś Y />
<Seria liniidane={dane} />
Wykres XY>
);
}
eksportdomyślny Wykres;
Powyższy kod importuje biblioteki React i React-Vis. Następnie definiuje funkcję o nazwie Chart, która zwraca XYPlot z VerticalGridLines, HorizontalGridLines, XAxis, YAxis i LineSeries. LineSeries pobiera tablicę danych, która zawiera współrzędne x i y punktów tworzących linię.
Korzystanie z React Google Charts Library
React Google Charts to kolejna biblioteka, która ułatwia tworzenie wykresów w React. Zapewnia zestaw komponentów do tworzenia różnych typów wykresów, takich jak wykresy słupkowe, wykresy kołowe i wykresy liniowe. Obsługuje również animacje i interaktywność, co może pomóc w uatrakcyjnieniu wykresów.
Aby korzystać z React Google Charts, musisz najpierw zainstalować bibliotekę. Możesz to zrobić za pomocą następującego polecenia:
np zainstalować reaguj-google-wykresyPo zainstalowaniu biblioteki możesz utworzyć podstawowy wykres z następującym kodem:
import Reaguj, { stan użycia } z'reagować';
import {Wykres} z'reaguj-google-wykresy';konst Mój Wykres = () => {
konst [dane] = useState([
['Rok', 'Obroty', 'Wydatki'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
]);powrót (
szerokość={„400 pikseli”}
wysokość={„300 pikseli”}
typ wykresu="Bar"
dane={dane}
/>
);
}
eksportdomyślny Mój wykres;
Ten kod importuje biblioteki Reaguj i Reaguj-google-charts. Następnie tworzy funkcję o nazwie MyChart, która zwraca składnik Chart. Komponent Chart pobiera tablicę danych zawierającą etykiety i wartości punktów tworzących wykres.
Wady korzystania z CSS
Istnieje kilka wad używania CSS do tworzenia wykresów w React:
- Trudny w użyciu: jeśli chcesz tworzyć złożone wykresy, CSS może być trudny w użyciu.
- Mało elastyczny: CSS nie jest zbyt elastyczny, więc wprowadzanie zmian w wykresach może być trudne.
- Nieinteraktywny: Wykresy CSS nie są interaktywne, więc Twoi użytkownicy nie będą mogli wchodzić z nimi w interakcję.
Jeśli chcesz tworzyć złożone wykresy, React-vis i React-google-charts są lepszym wyborem. Jeśli jednak chcesz tworzyć proste wykresy, dobrym rozwiązaniem może być CSS.
Korzyści z używania React-Vis
Korzystanie z React-Vis do tworzenia wykresów w React ma kilka zalet:
- Łatwy w użyciu: React-Vis jest łatwy w użyciu, dzięki czemu możesz z łatwością tworzyć złożone wykresy.
- Wysoce elastyczny: React-Vis jest bardzo elastyczny, więc możesz łatwo wprowadzać zmiany w swoich wykresach.
- Interaktywny: Wykresy React-Vis są interaktywne, więc Twoi użytkownicy mogą z nimi wchodzić w interakcje.
- Ożywiony: Wykresy React-Vis obsługują animacje, dzięki czemu możesz uatrakcyjnić swoje wykresy.
Jeśli chcesz tworzyć złożone wykresy, które są interaktywne i animowane, dobrym wyborem jest React-Vis.
Korzyści z używania React Google Charts
Podobnie jak React-Vis, korzystanie z React Google Charts do tworzenia wykresów w React ma kilka zalet:
- Łatwy w użyciu: React Google Charts jest łatwy w użyciu, dzięki czemu możesz z łatwością tworzyć złożone wykresy.
- Różne typy wykresów: React Google Charts zapewnia różne typy wykresów, więc możesz wybrać najlepszy dla swoich danych.
- Wsparcie dla animacji: React Google Charts obsługuje animacje, dzięki czemu możesz uatrakcyjnić swoje wykresy.
Zwiększ zaangażowanie użytkowników dzięki wykresom
Wykresy to świetny sposób na wizualizację danych, ale można ich również używać do zwiększania zaangażowania użytkowników. Dodanie animacji i interaktywności do wykresów może uczynić je bardziej atrakcyjnymi i pomóc użytkownikom w lepszym zrozumieniu danych.
Jeśli więc szukasz sposobu na zwiększenie zaangażowania użytkowników w swoją aplikację React, rozważ dodanie wykresów. Możesz także wdrożyć swoją aplikację React na szybkiej, bezpiecznej i skalowalnej platformie, takiej jak Github.
