Такие читатели, как вы, помогают поддерживать MUO. Когда вы совершаете покупку по ссылкам на нашем сайте, мы можем получать партнерскую комиссию. Читать далее.

Диаграммы предоставляют вашим пользователям удобный и привлекательный способ визуализации данных. Они могут упростить понимание данных и сделать ваше приложение более интерактивным.

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

Как создавать диаграммы в React с помощью CSS

Создание диаграмм в React с использованием базового CSS относительно просто. Все, что вам нужно сделать, это создать элемент div с шириной и высотой, а затем установить цвет фона в соответствии с желаемым цветом диаграммы. Например:

Импортировать Реагировать от«реагировать»;
константа Диаграмма = () => {
возвращаться (


ширина: «100 пикселей», высота: «300 пикселей», фоновый цвет: '# 5D6AFF'}}/>
 );
}
экспортпо умолчанию Диаграмма;

В приведенном выше коде мы импортировали библиотеку React. Затем мы создали функцию под названием Chart, которая возвращает div шириной 100 пикселей, высотой 300 пикселей и цветом фона #5D6AFF. Это создаст базовую диаграмму с синим фоном. Вы также можете

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

Вы также можете создать несколько диаграмм с текстом или изображениями внутри элементов div для создания более сложных диаграмм.

Импортировать Реагировать от«реагировать»;
константа Диаграмма = () => {
возвращаться (
<див>


ширина: «100 пикселей», высота: «300 пикселей», фоновый цвет: '# 5D6AFF'}}>
<п>Диаграмма 1п>
див>
ширина: «100 пикселей», высота: «300 пикселей», фоновый цвет: '#FFCF00'}}>
<изображениеисточник=" https://dummyimage.com/40x80/000/0011ff"стиль={{заполнение:'100 пикселей30 пикселей'}} />
див>
див>
 );
}


экспортпо умолчанию Диаграмма;

Диаграммы React с использованием библиотеки React-Vis

React-Vis — это библиотека, созданная Uber, которая позволяет создавать диаграммы и графики в React. Он предоставляет набор компонентов, упрощающих создание диаграмм различных форм, цветов и размеров. Он также поддерживает анимацию и интерактивность, которые могут сделать ваши диаграммы более привлекательными.

Чтобы использовать React-Vis, вам сначала нужно создать базовое приложение React и установить библиотеку. Вы можете сделать это с помощью следующей команды:

нпм установить реагировать-виз

После того, как вы установили библиотеку, вы можете создать базовую диаграмму с помощью следующего кода:

Импортировать Реагировать, {useState} от«реагировать»;
Импортировать {
 XYPlot,
 ЛинияСерия,
 вертикальные линии сетки,
 Горизонтальные линии сетки,
 Xось,
 Yось
} от'реагировать-виз';


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


возвращаться (
<XYPlotширина={300}высота={300}>
<Вертикальные линии сетки />
<Горизонтальные линии сетки />
<Xось />
<Yось />
<ЛинияСерияданные={данные} />
XYPlot>
 );
}
экспортпо умолчанию Диаграмма;

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

Использование библиотеки React Google Charts

React Google Charts — еще одна библиотека, которая упрощает создание диаграмм в React. Он предоставляет набор компонентов для создания различных типов диаграмм, таких как гистограммы, круговые диаграммы и линейные графики. Он также поддерживает анимацию и интерактивность, которые могут сделать ваши диаграммы более привлекательными.

Чтобы использовать React Google Charts, сначала необходимо установить библиотеку. Вы можете сделать это с помощью следующей команды:

нпм установить реагировать-гугл-чарты

После того, как вы установили библиотеку, вы можете создать базовую диаграмму с помощью следующего кода:

Импортировать Реагировать, {useState} от«реагировать»;
Импортировать { Диаграмма } от«реагировать на Google-диаграммы»;
константа Моя Диаграмма = () => {
константа [данные] = useState([
['Год', 'Продажи', 'Затраты'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
 ]);


возвращаться (
 ширина = {«400 пикселей»}
 высота = {«300 пикселей»}
 тип диаграммы="Бар"
 данные = {данные}
 />
 );
}
экспортпо умолчанию моя диаграмма;

Этот код импортирует библиотеки 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.