Узнайте, как отображать диаграммы в приложении React
В мире науки о данных или других исследований диаграммы и другие методы визуализации имеют решающее значение. Более того, когда дело доходит до того, чтобы поделиться своими выводами с остальным миром, вам необходимо отобразить эти диаграммы на веб-сайте или в файле PDF. Так как же их отобразить? Наиболее распространенный способ отображения диаграмм - изображения.
«Конечно, это прекрасно работает», - можете подумать вы. Но есть небольшая проблема: на больших экранах или экранах с высокой плотностью пикселей эти изображения получаются нечеткими. В результате вам, возможно, придется увеличить разрешение вашего изображения. Но это приведет к тому, что ваша веб-страница будет собирать больше данных. Так как же решить эту проблему?
Здесь на помощь приходит Plotly.js. Это библиотека JavaScript с открытым исходным кодом, которая может отображать до 40 типов диаграмм. Помимо этого, он позволяет настраивать ваши графики. Например, вы можете разрешить пользователю увеличивать или уменьшать масштаб:
Давайте начнем!
Сюжет: графики рендеринга
Установка модулей
Для использования Plotly нам понадобятся две библиотеки:
react-plotly.js
: для использования библиотеки диаграмм в приложениях Reactplotly.js
: Базовая зависимость дляreact-plotly.js
Чтобы установить их, выполните следующую команду терминала:
npm install react-plotly.js plotly.js
Базовый график разброса
В папке src
создайте файл с именем Scatter.js
. Как следует из названия, этот компонент будет содержать код, отвечающий за отрисовку диаграмм разброса.
В этом примере мы загрузим следующий набор данных:
Давайте построим график этого набора данных с помощью кода. В /src/Scatter.js
напишите следующий код:
- Строка 4: Наша переменная
trace
будет содержать наш набор данных. - Строки 5-6: Массивы
x
иy
содержат наши координаты. - Строки 7-8: Наше свойство
mode
указывает Plotly рисовать как маркеры, так и линии для наших точек. Мы также установили для нашего свойстваtype
значениеscatter
. Это отобразит диаграмму рассеяния. - Строки 13-14: визуализируем элемент
Plot
и передаем наши данные в качестве свойств.
Запустите код. Это будет результат:
Мы даже можем визуализировать несколько трасс на одном графике следующим образом:
Это будет результат:
Обратите внимание, что Plotly даже автоматически отобразил нам легенду. Позже в этой статье вы узнаете, как редактировать названия легенд. Это облегчит читателям идентификацию ваших данных.
А теперь перейдем к созданию гистограмм.
В итоге src/Scatter.js
должно выглядеть так:
Гистограммы
В этом сегменте мы будем эмулировать этот набор данных:
В папке src
создайте компонент React с именем BarChart.js
. Здесь напишите следующий код:
- Строка 8: Мы установили для свойства
type
значениеbar
. Это построит гистограмму. - Строка 13: передайте наш набор данных в компонент
Plot
в качестве опоры.
Запустите код. Это будет результат:
Хотите горизонтальную гистограмму? Без проблем! Настройте свой data
объект следующим образом:
Обратите внимание, что теперь мы обменялись значениями массивов x
и y
друг с другом. Кроме того, мы также устанавливаем свойство orientation
на h
. Это изменяет ориентацию на горизонтальную.
Это будет результат:
Мы даже можем сделать сгруппированную гистограмму вот так:
- Строки 4-9: Создайте нашу первую группу данных. В строке 7 мы указали название этой группы
- Строки 11-16: создание второй таблицы.
- Строка 18: Передайте эти наборы данных в массив
data
. - Строка 21: передайте опору
data
компонентуPlot
, чтобы отобразить данные.
Это будет вывод:
Удивительный! Пришло время узнать об отображении круговых диаграмм с помощью пакета Plotly.
В итоге BarChart.js
должен выглядеть так:
Круговые диаграммы
Здесь мы будем использовать информацию из следующей таблицы:
В папке src
создайте файл с именем PieChart.js
. Здесь напишите следующий код:
- Строки 6-7: Определите наш набор данных. Массив
values
содержит наши значения частоты, а массивlabels
содержит цвета шариков. - Строка 8: Сообщите Plotly, что мы хотим визуализировать круговую диаграмму.
Запустите код. Это будет результат:
Готово! Теперь займемся отображением простых таблиц на веб-странице.
Таблицы
Здесь мы будем использовать следующие данные:
Давайте теперь реализуем это в коде. Создайте файл с именем Table.js
. Здесь напишите следующий код:
- Строка 4: массив
values
содержит значения наших ячеек. - Строка 8: переменная
headers
будет содержать наши заголовки для этой таблицы. - Строка 11: Здесь мы установили свойство
type
, которое сообщает Plotly о необходимости визуализации элемента таблицы. - Строка 14: Выровняйте наши заголовки по центру.
Это будет результат кода. Вы даже можете изменить положение своих столбцов следующим образом:
Мы даже можем применять стили к нашей таблице. Для этого измените вашу константу data
следующим образом:
- Строка 7: Установите цвет фона для наших заголовков.
- Строка 8: Установите цвет и размер шрифта.
- Строка 13: Установите семейство шрифтов для наших ячеек.
В следующем разделе мы узнаем, как отображать несколько типов диаграмм на одном и том же графике.
В итоге src/Table.js
должно выглядеть так:
Несколько типов диаграмм на одном графике
В этом разделе мы узнаем, как визуализировать точечную диаграмму и гистограмму.
Создайте файл с именем Mixed.js
и напишите следующий код:
- Строка 8: Сообщите Plotly, что мы хотим представить этот фрагмент данных с помощью диаграммы рассеяния.
- Строка 14: укажите, что мы хотим отображать эти данные в виде гистограммы.
Это будет результат:
В следующем разделе вы узнаете, как изменить настройки Plotly по умолчанию по своему вкусу.
Настройка Plotly
Маркировка осей
Здесь мы обозначим наши оси x и y на гистограмме в BarChart.js
. В /src/BarChart.js
найдите следующий фрагмент кода:
<Plot data={dataVertical} layout={{ title: "Viewers by genre" }} />
Измените это так:
- Строка 5: Установите для свойства
xaxis.title
значениеGenre
. - Строка 6: Установите для свойства
yaxis.title
значениеViewers
.
Это будет вывод:
Удивительный! Давайте теперь узнаем, как включить масштабирование при прокрутке.
Получение прокрутки для увеличения
Мы можем добиться этого с помощью config
prop. Давайте добавим это свойство в наш Scatter.js
файл:
- Строка 6: Установите для свойства
scrollZoom
значениеtrue
.
Изменение названий легенд
Перейдите к src/Scatter.js
и найдите свои определения переменных trace1
и trace2
:
Измените их так:
- Строки 6-13: установите свойства
name
для этих наборов данных.
Как видите, наш код работает отлично!
Дополнительные ресурсы
Заключение
Если вы занимаетесь наукой о данных и хотите отображать свои диаграммы во внешнем интерфейсе, то Plotly.js - отличный вариант для вашего варианта использования. Код, необходимый для визуализации данных, минимален, что сокращает использование шаблонного кода и время, затрачиваемое впустую.
Большое спасибо за то, что дожили до конца!