Узнайте, как отображать диаграммы в приложении React

В мире науки о данных или других исследований диаграммы и другие методы визуализации имеют решающее значение. Более того, когда дело доходит до того, чтобы поделиться своими выводами с остальным миром, вам необходимо отобразить эти диаграммы на веб-сайте или в файле PDF. Так как же их отобразить? Наиболее распространенный способ отображения диаграмм - изображения.

«Конечно, это прекрасно работает», - можете подумать вы. Но есть небольшая проблема: на больших экранах или экранах с высокой плотностью пикселей эти изображения получаются нечеткими. В результате вам, возможно, придется увеличить разрешение вашего изображения. Но это приведет к тому, что ваша веб-страница будет собирать больше данных. Так как же решить эту проблему?

Здесь на помощь приходит Plotly.js. Это библиотека JavaScript с открытым исходным кодом, которая может отображать до 40 типов диаграмм. Помимо этого, он позволяет настраивать ваши графики. Например, вы можете разрешить пользователю увеличивать или уменьшать масштаб:

Давайте начнем!

Сюжет: графики рендеринга

Установка модулей

Для использования Plotly нам понадобятся две библиотеки:

  • react-plotly.js: для использования библиотеки диаграмм в приложениях React
  • plotly.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 - отличный вариант для вашего варианта использования. Код, необходимый для визуализации данных, минимален, что сокращает использование шаблонного кода и время, затрачиваемое впустую.

Большое спасибо за то, что дожили до конца!