Читатели като вас помагат в подкрепа на MUO. Когато правите покупка чрез връзки на нашия сайт, ние може да спечелим комисионна за партньор. Прочетете още.

Диаграмите предоставят на вашите потребители удобен и привлекателен начин за визуализиране на данни. Те могат да направят данните по-лесни за разбиране и да направят приложението ви по-интерактивно.

Има няколко начина за създаване на диаграми в React, включително използване на базов CSS или библиотека като React-Vis или React Google Charts.

Как да създавате диаграми в React с CSS

Създаването на диаграми в React с помощта на основен CSS е сравнително лесно. Всичко, което трябва да направите, е да създадете div елемент с ширина и височина, след което да зададете цвета на фона на желания цвят на диаграмата. Например:

импортиране Реагирайте от"реагира";
конст Диаграма = () => {
връщане (


ширина: "100px", височина: "300px", Цвят на фона: „#5D6AFF“}}/>
 );
}
износпо подразбиране Диаграма;

В горния код импортирахме библиотеката React. След това създадохме функция, наречена Chart, която връща div с ширина 100px, височина 300px и цвят на фона #5D6AFF. Това ще създаде основна диаграма със син фон. Можете също

instagram viewer
използване на материален потребителски интерфейс или Tailwind CSS във вашето приложение React за създаване на диаграми.

Можете също да създадете множество диаграми с текст или изображения вътре в div, за да създадете по-сложни диаграми.

импортиране Реагирайте от"реагира";
конст Диаграма = () => {
връщане (
<див>


ширина: "100px", височина: "300px", Цвят на фона: „#5D6AFF“}}>
<стр>Диаграма 1стр>
див>
ширина: "100px", височина: "300px", Цвят на фона: „#FFCF00“}}>
<imgsrc=" https://dummyimage.com/40x80/000/0011ff"стил={{подложка:'100 пиксела30px'}} />
див>
див>
 );
}


износпо подразбиране Диаграма;

Графики на React с помощта на библиотеката React-Vis

React-Vis е библиотека, създадена от Uber, която ви позволява да създавате диаграми и графики в React. Той предоставя набор от компоненти, които улесняват създаването на диаграми с различни форми, цветове и размери. Той също така поддържа анимации и интерактивност, което може да ви помогне да направите вашите диаграми по-ангажиращи.

За да използвате React-Vis, първо трябва създайте основно приложение React и инсталирайте библиотеката. Можете да направите това със следната команда:

npm Инсталирай реагират-вис

След като инсталирате библиотеката, можете да създадете основна диаграма със следния код:

импортиране Реагирайте, {useState} от"реагира";
импортиране {
 XYплот,
 LineSeries,
 вертикални решетки,
 Хоризонтални решетки,
 ос X,
 YAxis
} от"реагиране срещу";


конст Диаграма = () => {
конст [данни] = useState([
 { х: 0, y: 8 },
 { х: 1, y: 5 },
 { х: 2, y: 4 },
 { х: 3, y: 9 },
 { х: 4, y: 1 },
 { х: 5, y: 7 },
 { х: 6, y: 6 },
 { х: 7, y: 3 },
 { х: 8, y: 2 },
 { х: 9, y: 0 }
 ]);


връщане (
<XYплотширина={300}височина={300}>
<Вертикални решетки />
<Хоризонтални решетки />
<X ос />
<YAxis />
<LineSeriesданни={данни} />
XYплот>
 );
}
износпо подразбиране Диаграма;

Горният код импортира библиотеките React и React-Vis. След това дефинира функция, наречена Chart, която връща XYPlot с VerticalGridLines, HorizontalGridLines, XAxis, YAxis и LineSeries. LineSeries взема масива от данни, който съдържа x и y координатите на точките, които съставят линията.

Използване на React Google Charts Library

React Google Charts е друга библиотека, която улеснява създаването на диаграми в React. Той предоставя набор от компоненти за създаване на различни типове диаграми, като стълбовидни диаграми, кръгови диаграми и линейни графики. Той също така поддържа анимации и интерактивност, което може да ви помогне да направите вашите диаграми по-ангажиращи.

За да използвате React Google Charts, първо трябва да инсталирате библиотеката. Можете да направите това със следната команда:

npm Инсталирай реагират-google-диаграми

След като инсталирате библиотеката, можете да създадете основна диаграма със следния код:

импортиране Реагирайте, {useState} от"реагира";
импортиране { Диаграма } от'react-google-charts';
конст MyChart = () => {
конст [данни] = useState([
["година", "Продажби", "Разходи"],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
 ]);


връщане (
 ширина={"400px"}
 височина={"300px"}
 chartType="бар"
 данни={данни}
 />
 );
}
износпо подразбиране MyChart;

Този код импортира библиотеките react и react-google-charts. След това създава функция, наречена MyChart, която връща компонент Chart. Компонентът Chart взема масива от данни, който съдържа етикетите и стойностите на точките, съставляващи диаграмата.

Недостатъци на използването на CSS

Има няколко недостатъка на използването на CSS за създаване на диаграми в React:

  • Труден за използване: Ако искате да създадете сложни диаграми, CSS може да бъде труден за използване.
  • Не е много гъвкав: CSS не е много гъвкав, така че може да е трудно да правите промени в диаграмите си.
  • Не е интерактивен: CSS диаграмите не са интерактивни, така че потребителите ви няма да могат да взаимодействат с тях.

Ако искате да създавате сложни диаграми, React-vis и React-google-charts са по-добър избор. Въпреки това, ако искате да създадете прости диаграми, CSS може да бъде добър вариант.

Ползи от използването на React-Vis

Има няколко предимства от използването на React-Vis за създаване на диаграми в React:

  • Лесен за използване: React-Vis е лесен за използване, така че можете да създавате сложни диаграми с лекота.
  • Силно гъвкав: React-Vis е много гъвкав, така че можете лесно да правите промени в диаграмите си.
  • Интерактивен: Диаграмите на React-Vis са интерактивни, така че вашите потребители могат да взаимодействат с тях.
  • анимирани: Диаграмите React-Vis поддържат анимации, така че можете да направите диаграмите си по-ангажиращи.

Ако искате да създавате сложни диаграми, които са интерактивни и анимирани, React-Vis е добър избор.

Предимства от използването на React Google Charts

Точно като React-Vis, има няколко предимства от използването на React Google Charts за създаване на диаграми в React:

  • Лесен за използване: React Google Charts е лесен за използване, така че можете да създавате сложни диаграми с лекота.
  • Различни типове диаграми: React Google Charts предоставя различни типове диаграми, така че можете да изберете най-добрата за вашите данни.
  • Поддръжка за анимация: React Google Charts поддържа анимации, така че можете да направите вашите диаграми по-ангажиращи.

Увеличете ангажираността на потребителите с диаграми

Диаграмите са чудесен начин за визуализиране на данни, но можете също да ги използвате, за да увеличите ангажираността на потребителите. Добавянето на анимации и интерактивност към вашите диаграми може да ги направи по-ангажиращи и може да помогне на потребителите ви да разберат по-добре вашите данни.

Така че, ако търсите начин да увеличите ангажираността на потребителите в приложението си React, помислете за добавяне на диаграми. Можете също така да внедрите приложението си React на бърза, сигурна и мащабируема платформа като Github.