Привет, Хабр! Представляю вашему вниманию перевод статьи «Библиотеки визуализации данных для разработчиков React в 2019 году» Вероника Ровник.
Уже несколько лет подряд React не сдает позиций и не без оснований входит в тройку самых любимых библиотек профессиональных разработчиков по всему миру.
Сталкивались ли вы когда-нибудь с необходимостью расширить свое приложение аналитическими и визуальными функциями и получить представление о ваших данных? Чтобы не потеряться в разнообразии инструментов, представляю вам обзор библиотек для React, которые можно легко интегрировать на ваш сайт или приложение.
Победа
Победа — это фреймворк повторно используемых компонентов React для создания диаграмм.Их стильность, интерактивность и плавная анимация сразу бросаются в глаза.
Компоненты можно модифицировать, упаковывать или создавать с нуля.
Работа с документацией кажется удобной и интуитивно понятной, и разработчики, которые предпочитают все настраивать, влюбятся в эту библиотеку.
Начать проект визуализации легко — вам просто нужно импортировать библиотеку Victory в свой проект, добавить данные и встроить компонент в веб-страницу, а также существует дополнительная версия для React Native.
React-vis
Uber преуспевает не только в сфере пассажирских перевозок, но и в разработке систем визуализации.React-vis — это библиотека, предлагающая большую коллекцию диаграмм для приложений React. Его компоненты работают аналогично обычным компонентам React, к которым мы привыкли.
Чтобы создать свою первую визуализацию, установите библиотеку, используя НПМ , импортируйте необходимые стили и компоненты CSS, отобразите их на странице и вуаля! Среди всех графиков меня больше всего впечатлила графическая мощь.
Инструменты построения диаграмм хороши, когда используются сами по себе, но они еще лучше, когда связаны с агрегированными данными.
По моему опыту, диаграммы и сводные таблицы дают отличные результаты, если их объединить в информационную панель.
Итак, теперь перейдем к инструментам, которые помогут вам создавать отчеты непосредственно в вашем проекте React.
Сводная таблица WebDataRocks
ВебДанныеРоккс — это компонент сводной таблицы JavaScript, совместимый с React и другими платформами.Он поддерживает подключение к удаленным/локальным источникам данных JSON и CSV. Что делает его особенным, так это то, что он полностью бесплатный и настраиваемый.
С помощью WebDataRocks вы можете воспользоваться классическими функциями отчетности: агрегированием, фильтрацией, сортировкой, нарезкой и разделением данных.
Чтобы завершить отчет, я рекомендую выделять ячейки с помощью условного форматирования, чтобы выделить наиболее важные значения.
Для запуска вашего первого проекта отчетности необходимо выполнить несколько шагов: добавить зависимости в проект React, отобразить компонент на веб-странице и заполнить его данными.
Это просто.
Сводная таблица и диаграммы Flexmonster
Флексмонстр — это более продвинутый компонент сводной таблицы и расширенная версия WebDataRocks. Он служит встроенным BI (бизнес-аналитиком) для стартапов и проектов уровня предприятия.
Больше внимания привлекает разнообразие доступных источников данных: кубы CSV, JSON, OLAP, данные SQL/NoSQL и Elasticsearch. Функции агрегирования, фильтрации, сортировки, детализации и группировки всегда доступны на панели инструментов.
В ходе тестирования я был приятно удивлен производительностью компонента — он обрабатывал большие объемы данных из базы данных MongoDB и использовал рендеринг сетки.
С точки зрения разработчика, процесс интеграции с проектом React довольно прост, как и процесс подключения к базе данных.
Я искренне надеюсь, что этот обзор был полезен.
Не стесняйтесь поделиться своими предложениями в комментариях ниже.
Какие еще библиотеки React вы используете для своего приложения? Теги: #Разработка веб-сайтов #JavaScript #Визуализация данных #html5 #react.js #dashboard #графики #графики и диаграммы #диаграммы #библиотека javascript
-
Продуктивный Подход К Конвертации Mkv В Wmv
19 Oct, 24 -
Важные Аспекты Блог-Платформ
19 Oct, 24 -
Удаление Smitnyl.a Вручную
19 Oct, 24 -
Руководитель Windows-Сервера
19 Oct, 24
