Графикони пружају вашим корисницима згодан, атрактиван начин визуелизације података. Они могу олакшати разумевање података и учинити вашу апликацију интерактивнијом.
Постоји неколико начина за креирање графикона у Реацт-у, укључујући коришћење основног ЦСС-а или библиотеке као што су Реацт-Вис или Реацт Гоогле Цхартс.
Како направити графиконе у Реацт витх ЦСС
Прављење графикона у Реацт-у помоћу основног ЦСС-а је релативно лако. Све што треба да урадите је да креирате див елемент са ширином и висином, а затим подесите боју позадине на жељену боју графикона. На пример:
увоз Реаговати из'реаговати';конст Графикон = () => {
повратак (ширина: '100пк', висина: '300пк', боја позадине: '#5Д6АФФ'}}/>
);
}
извозУобичајено Цхарт;
У горњем коду смо увезли Реацт библиотеку. Затим смо креирали функцију под називом Цхарт која враћа див ширине 100пк, висине 300пк и боје позадине #5Д6АФФ. Ово ће креирати основни графикон са плавом позадином. Можете такође
користите Материал УИ или Таилвинд ЦСС у вашој Реацт апликацији да креирате графиконе.Такође можете да креирате више графикона са текстом или сликама унутар див-ова да бисте креирали сложеније графиконе.
увоз Реаговати из'реаговати';конст Графикон = () => {
повратак (
<див>ширина: '100пк', висина: '300пк', боја позадине: '#5Д6АФФ'}}>
<стр>Графикон 1стр>
див>ширина: '100пк', висина: '300пк', боја позадине: '#ФФЦФ00'}}>
<имгсрц=" https://dummyimage.com/40x80/000/0011ff"стил={{паддинг:'100пк30пк'}} />
див>
див>
);
}
извозУобичајено Цхарт;
Реацт графикони користећи Реацт-Вис библиотеку
Реацт-Вис је библиотека коју је креирао Убер и која вам омогућава да креирате графиконе и графиконе у Реацт-у. Пружа скуп компоненти које олакшавају прављење графикона различитих облика, боја и величина. Такође подржава анимације и интерактивност, што може помоћи да ваше карте буду привлачније.
Да бисте користили Реацт-Вис, прво морате креирајте основну Реацт апликацију и инсталирајте библиотеку. То можете урадити следећом командом:
нпм инсталирај реаговати-висКада инсталирате библиотеку, можете креирати основни графикон са следећим кодом:
увоз Реагујте, { усеСтате } из'реаговати';увоз {
КСИПлот,
ЛинеСериес,
ВертицалГридЛинес,
ХоризонталГридЛинес,
Кс оса,
ИАкис
} из'реаговати-вис';конст Графикон = () => {
конст [подаци] = усеСтате([
{ Икс: 0, и: 8 },
{ Икс: 1, и: 5 },
{ Икс: 2, и: 4 },
{ Икс: 3, и: 9 },
{ Икс: 4, и: 1 },
{ Икс: 5, и: 7 },
{ Икс: 6, и: 6 },
{ Икс: 7, и: 3 },
{ Икс: 8, и: 2 },
{ Икс: 9, и: 0 }
]);повратак (
<КСИПлотширина={300}висина={300}>
<ВертицалГридЛинес />
<ХоризонталГридЛинес />
<КСАкис />
<ИАкис />
<ЛинеСериесподатака={подаци} />
КСИПлот>
);
}
извозУобичајено Цхарт;
Горњи код увози Реацт и Реацт-Вис библиотеке. Затим дефинише функцију под називом Цхарт која враћа КСИПлот са ВертицалГридЛинес, ХоризонталГридЛинес, КСАкис, ИАкис и ЛинеСериес. Серија линија узима низ података који садржи к и и координате тачака које чине линију.
Коришћење библиотеке Реацт Гоогле Цхартс
Реацт Гоогле Цхартс је још једна библиотека која олакшава креирање графикона у Реацт-у. Пружа скуп компоненти за креирање различитих типова графикона, као што су тракасти графикони, кружни графикони и линијски графикони. Такође подржава анимације и интерактивност, што може помоћи да ваше карте буду привлачније.
Да бисте користили Реацт Гоогле Цхартс, прво морате да инсталирате библиотеку. То можете урадити следећом командом:
нпм инсталирај реацт-гоогле-цхартсКада инсталирате библиотеку, можете креирати основни графикон са следећим кодом:
увоз Реагујте, { усеСтате } из'реаговати';
увоз { Графикон } из'реацт-гоогле-цхартс';конст МиЦхарт = () => {
конст [подаци] = усеСтате([
['Година', 'Продаја', 'Трошкови'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
]);повратак (
ширина={'400пк'}
висина={'300пк'}
цхартТипе="бар"
дата={подаци}
/>
);
}
извозУобичајено МиЦхарт;
Овај код увози библиотеке реацт и реацт-гоогле-цхартс. Затим креира функцију под називом МиЦхарт која враћа компоненту графикона. Компонента Цхарт узима низ података који садржи ознаке и вредности тачака које чине графикон.
Недостаци коришћења ЦСС-а
Постоји неколико недостатака коришћења ЦСС-а за креирање графикона у Реацт-у:
- Тешко за употребу: Ако желите да креирате сложене графиконе, ЦСС може бити тежак за коришћење.
- Није баш флексибилан: ЦСС није много флексибилан, тако да може бити тешко направити промене у вашим графиконима.
- Није интерактивно: ЦСС графикони нису интерактивни, тако да ваши корисници неће моћи да комуницирају са њима.
Ако желите да креирате сложене графиконе, Реацт-вис и Реацт-гоогле-цхартс су бољи избор. Међутим, ако желите да креирате једноставне графиконе, ЦСС може бити добра опција.
Предности коришћења Реацт-Вис-а
Постоји неколико предности коришћења Реацт-Вис-а за креирање графикона у Реацт-у:
- Једноставан за коришћење: Реацт-Вис је једноставан за коришћење, тако да можете са лакоћом да креирате сложене графиконе.
- Веома флексибилан: Реацт-Вис је веома флексибилан, тако да можете лако да мењате своје графиконе.
- интерактивно: Реацт-Вис графикони су интерактивни, тако да ваши корисници могу да комуницирају са њима.
- анимирано: Реацт-Вис графикони подржавају анимације, тако да своје графиконе можете учинити занимљивијим.
Ако желите да креирате сложене графиконе који су интерактивни и анимирани, Реацт-Вис је добар избор.
Предности коришћења Реацт Гоогле графикона
Баш као и Реацт-Вис, постоји неколико предности коришћења Реацт Гоогле графикона за креирање графикона у Реацт-у:
- Једноставан за коришћење: Реацт Гоогле Цхартс је једноставан за коришћење, тако да можете са лакоћом да креирате сложене графиконе.
- Различити типови графикона: Реацт Гоогле Цхартс пружа различите типове графикона, тако да можете да изаберете најбољи за своје податке.
- Подршка за анимацију: Реацт Гоогле Цхартс подржава анимације, тако да можете да учините своје графиконе занимљивијим.
Повећајте ангажовање корисника помоћу графикона
Графикони су одличан начин за визуелизацију података, али можете их користити и за повећање ангажовања корисника. Додавање анимација и интерактивности вашим графиконима може их учинити занимљивијим и може помоћи вашим корисницима да боље разумеју ваше податке.
Дакле, ако тражите начин да повећате ангажовање корисника у вашој Реацт апликацији, размислите о додавању графикона. Такође можете да примените своју Реацт апликацију на брзу, безбедну и скалабилну платформу као што је Гитхуб.
