Визуализация данных: легкое построение графиков React

Визуализация данных: легкое построение графиков React

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

Веб-приложения часто должны помочь конечному пользователю разобраться в различных типах данных. Один из лучших способов представить данные в приятной и простой для понимания форме — это визуализировать их с помощью графиков (диаграмм).

В этой статье будет продемонстрирован эффективный подход к созданию графиков React с использованием библиотеки KendoReact Charts, а также мы реализуем интерактивную кольцевую диаграмму, столбчатую диаграмму, линейную диаграмму и диаграмму Sparkline. Выберем графическую библиотеку React, которая является частью KendoReact, поскольку она многофункциональна и легко настраивается. Как часть полной библиотеки компонентов React UI, эта библиотека визуализации данных действительно выделяется своей интеграцией с более чем 90 компонентами KendoReact, что позволяет разработчикам реализовывать согласованные стили и элегантный дизайн для всего проекта. А теперь приступим!

Настройка проекта

Прежде чем мы углубимся в реализацию наших графиков React, давайте создадим новый проект React с помощью Create React App. Вы можете сделать это, выполнив приведенную ниже команду в своем терминале.

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

После того, как проект сформирован, нам нужно установить несколько пакетов, чтобы использовать библиотеку диаграмм KendoReact.

Через npm

Через Yarn

Первый пакет — это библиотека kendo-react-charts, которая содержит множество компонентов диаграмм для React. В этом примере мы будем использовать тему «Material». KendoReact также предлагает темы по умолчанию (созданные внутренними UX-экспертами команды) и темы Bootstrap, но вы можете легко настроить их или даже создать свои собственные. Наконец, нам нужно установить Hammer.js, библиотеку с открытым исходным кодом для распознавания жестов, создаваемых касанием, мышью и указателем.

После установки новых зависимостей давайте очистим проект. Сначала замените содержимое файлов App.js и App.css.

src/App.js

src/App.css

В App.js мы удалили код по умолчанию, созданный приложением Create React, и вместо этого импортировали тему материала KendoReact и Hammer. У нас также есть два класса в файле App.css, чтобы добавить немного места между графиками, которые мы сейчас реализуем.

Вот и все по настройке. Запустите сервер разработки, запустив npm run start или yarn start, и вы увидите пустой экран. Добавим графики.

Создание графиков (диаграмм) React

Представьте, что вы работаете над платформой для управления заявками о приеме на работу. Эта платформа позволяет компаниям создавать объявления о вакансиях, на которые соискатели могут подавать заявки. Сотрудники, работающие в компании, создавшей объявление о вакансии, должны иметь возможность видеть множество деталей, например, сколько кандидатов подали заявки, статус заявок, сколько заявок было принято или отклонено и т. Д. Как я упоминал ранее, мы собираемся реализовать четыре типа графиков:

интерактивная кольцевая диаграмма — для отображения статуса заявок за текущий месяц

столбчатая диаграмма — показывает статус приложений за последние три месяца.

линейная диаграмма — чтобы показать, сколько позиций было заполнено, а сколько осталось

диаграмма Sparkline — чтобы показать, сколько приложений осталось обработать, чтобы достичь минимальной цели.

Интерактивная кольцевая диаграмма

Во-первых, нам нужно создать два новых файла. Первый файл constants.js содержит цвета, используемые для графиков.

src/constants.js

Во втором файле мы реализуем кольцевую диаграмму. В каталоге src создайте новую папку с именем charts, а внутри нее — файл с именем Donut.js.

src/components/charts/Donut.js

Как видите, мы импортируем несколько различных компонентов React из библиотеки KendoReact. Они используются для составления кольцевой диаграммы.

Компонент <Chart> представляет собой контейнер для всех других компонентов. <ChartTitle>, как следует из названия, используется для отображения заголовка рисунка. Компонент <ChartLegend> может быть использован, чтобы указать, если диаграмма должна отображать данные по категориям. В этом примере у нас установлен параметр visibleprop false, но вы можете переключить его на, true чтобы отобразить его.

<ChartSeries*> являются основными компонентами, поскольку они отвечают за визуализацию данных. В этом случае мы указываем, что нам нужна кольцевая диаграмма, передав свойство type=»donut» компоненту <ChartSeriesItem>. Полный список доступных опций вы можете найти в документации.

Прежде чем мы сможем увидеть график кольцевой диаграммы на экране, нам нужно обновить файл App.js, чтобы он импортировал и отрисовал компонент <Donut>.

src/App.js

Теперь вы должны увидеть на экране приведенный ниже график.

Визуализация данных: легкое построение графиков React

Это было быстро и легко, а графики выглядят великолепно. Однако мы не можем увидеть реальные проценты. Давайте обновим диаграмму и добавим всплывающую подсказку, которая покажет процентное распределение для каждого статуса приложения. Вернемся к файлу Donut.js и внесем следующие изменения:

1. Добавте импорт ChartTooltip.

2. Ниже импорта создайте функцию с именем renderTooltip, отображающую разметку, которая будет выводиться во всплывающей подсказке. Эта функция будет передана компоненту <ChartTooltip>.

3. Визуализируйте компонент <ChartTooltip>.

Ниже вы можете увидеть всплывающие подсказки в действии.

Визуализация данных: легкое построение графиков React

У нас есть первый график. Но что, если мы захотим увидеть результаты за последние несколько месяцев? Мы можем решить это, реализовав гистограмму React Bar.

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

Столбчатая диаграмма

Как и раньше, нам нужно создать новый файл для графика— Bar.js.

src/components/charts/Bar.js

Вы могли заметить, что многие вещи похожи, например, компоненты диаграммы. Столбчатая диаграмма задается путем передачи свойства type=»bar» компоненту <ChartSeriesItem>.

У нас также есть новые компоненты — <ChartCategoryAxis*>. Они используются для изменения содержимого полосы на каждой оси. В этом случае мы указываем месяцы для категорий, а также метку «Месяцы» на оси Y. Мы также сделали видимым <ChartLegend>, поскольку, по сравнению с кольцевой диаграммой , у нас нет ярлыков статуса. Тем не менее, предоставляя labels, мы можем указать компоненту ChartSeriesItem отображать значения на каждой полосе.

Прежде чем мы сможем увидеть гистограмму на экране, нам нужно добавить ее в файл App.js.

src/App.js

На изображении ниже показано, как теперь должна выглядеть гистограмма.

Визуализация данных: легкое построение графиков React

Мы можем видеть статус заявок за последние три месяца. Замечательная особенность библиотеки графов React в KendoReact заключается в том, что графики можно сделать интерактивными. Например, мы можем сделать их панорамируемыми и масштабируемыми, добавив zoomable и props pannable к <Chart>:

Более того, также можно экспортировать графики KendoReact в различные форматы, такие как изображения или PDF. Это может быть очень полезно, если вы хотите разрешить пользователям создавать отчеты с диаграммами. Давайте посмотрим, как мы можем добавить функцию экспорта PDF.

Как экспортировать график React

Мы можем добавить функцию экспорта, воспользовавшись пакетами kendo-drawing и kendo-file-saver. Давайте их установим.

Через npm

Через Yarn

Следующим шагом будет обновление файла Bar.js. Во-первых, нам нужно импортировать метод exportVisual из @progress/kendo-react-charts и exportPDF из @progress/kendo-drawing а также saveAs из @progress/kendo-file-saver. Нам также нужно импортировать useRef, поскольку нам нужно получить доступ к экземпляру компонента <Chart>. Этот экземпляр будет передан методу exportVisual. См. обновленный код ниже.

src/components/charts/Bar.js

Импорт

Компонент диаграммы

Мы добавили кнопку, которая вызывает функцию onPDFExportClick. Функция onPDFExportClick подготавливает информацию, которая должна быть экспортирована. Затем она передается методу exportPDF, который подготавливает файл и преобразует его в файл dataURI. И последнее, но не менее важное dataURI: передается методу saveAs, который запускает загрузку файла. Вы можете применить эту логику и к другим диаграммам KendoReact. Если вы хотите узнать больше о доступных вариантах экспорта, вы можете посмотреть подробную документацию.

Линейная диаграмма

Пока что мы реализовали два типа графиков: кольцевая диаграмма и столбчатая диаграмма. Давайте посмотрим, как мы можем использовать линейный график для отображения информации о количестве выполненных и незавершенных заданий за последние три месяца. Опять же, нам нужно создать новый файл, на этот раз с именем Line.js.

src/components/Line.js

Мы используем те же компоненты, что и в предыдущих диаграммах, с добавлением компонента <ChartValueAxis>, который используется для добавления текста заголовка и указания минимального и максимального значений для отображения на графике. Наконец, импортируйте компонент Line в App.js.

src/App.js

Ниже вы можете увидеть гиф, который демонстрирует линейный график, сравнивающий общее количество заданий, а также количество ожидающих и выполненных.

Визуализация данных: легкое построение графиков React

Диаграмма Sparkline

Спарклайны — это простые небольшие графики, которые можно встраивать в таблицы, заголовки или текст. Мы будем использовать спарклайн с маркером, чтобы показать, сколько заявок было обработано, а также ежемесячный целевой показатель. Как вы видите в приведенном коде ниже, реализация графиков Спарклайн немного отличается от предыдущих графиков, так как он не использует компоненты <Chart*>, а использует <Sparkline> и <ChartValue*>.

src/components/charts/Sparkline.js

Вы можете настроить внешний вид графика, изменив реквизиты, передаваемые компоненту <ChartValueAxisItem>. В этом случае мы раскладываем объект bulletValueAxis. Последнее, что нужно сделать, — это импортировать компонент Sparkline и отобразить его в файле App.js.

src/App.js

Вот как выглядит окончательный результат.

Визуализация данных: легкое построение графиков React

Чтобы увидеть полный список типов диаграмм, которые может отображать Sparkline, вы можете проверить страницу документации KendoReact Sparkline.

Заключение

Мы рассмотрели, как создавать графики React, используя в качестве примера эти четыре типа графиков из пользовательского интерфейса KendoReact и библиотеки визуализации данных: Donut, Bar, Line и Sparkline. Создавать графики с помощью KendoReact очень просто, поскольку он предоставляет множество готовых компонентов, которые многофункциональны и легко настраиваются.

Если вы хотите получить доступ к полному примеру кода для этой статьи, вы можете найти его в этом репозитории GitHub.

Автор: Thomas Findlay

Источник: www.telerik.com

Редакция: Команда webformyself.

Читайте нас в Telegram, VK, Яндекс.Дзен

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

React JS с Нуля до Профи

React JS. Полное руководство для современной веб-разработки

Подробнее

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментирование закрыто.