Home-theater-designers
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.
utwórz bootowalny usb dla systemu Windows 7
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:
WYKORZYSTAJ WIDEO DNIA
import React from 'react';
const Chart = () => {
return (
<div style={{width: '100px', height: '300px', backgroundColor: '#5D6AFF'}}/>
);
}
export default Chart;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 także 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 React from 'react';
const Chart = () => {
return (
<div>
<div style={{width: '100px', height: '300px', backgroundColor: '#5D6AFF'}}>
<p>Chart 1</p>
</div>
<div style={{width: '100px', height: '300px', backgroundColor: '#FFCF00'}}>
<img src="https://dummyimage.com/40x80/000/0011ff" style={{padding:'100px 30px'}} />
</div>
</div>
);
}
export default Chart; 
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:
npm install react-visPo zainstalowaniu biblioteki możesz utworzyć podstawowy wykres z następującym kodem:
import React, { useState } from 'react';
import {
XYPlot,
LineSeries,
VerticalGridLines,
HorizontalGridLines,
XAxis,
YAxis
} from 'react-vis';
const Chart = () => {
const [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 }
]);
return (
<XYPlot width={300} height={300}>
<VerticalGridLines />
<HorizontalGridLines />
<XAxis />
<YAxis />
<LineSeries data={data} />
</XYPlot>
);
}
export default Chart;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:
npm install react-google-chartsPo zainstalowaniu biblioteki możesz utworzyć podstawowy wykres z następującym kodem:
import React, { useState } from 'react';
import { Chart } from 'react-google-charts';
const MyChart = () => {
const [data] = useState([
['Year', 'Sales', 'Expenses'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
]);
return (
<Chart
width={'400px'}
height={'300px'}
chartType="Bar"
data={data}
/>
);
}
export default MyChart;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.