Топ-5 React-библиотек для создания графиков и диаграмм в 2020 году

Перевод статьи «Top 5 React Chart Libraries for 2020».

React-библиотеки для создания графиков

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

«В графиках есть некая магия. Вид кривой мгновенно описывает ситуацию — историю эпидемии, нарастание и спад паники или эпоху процветания. Кривая графика информирует, пробуждает воображение и убеждает», — Уиллард К. Бринтон, американский инженер, пионер в области визуализации информации. (В частности, Бринтон известен благодаря своей книге «Графические методы представления фактов», изданной в 1914 году).

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

Каковы мои критерии хорошей библиотеки?

  1. Она должна быть хорошо настраиваемой.
  2. У нее должен быть простой API, а также понятная документация.
  3. Библиотека должна представлять хороший UI/UX.
  4. Она должна быть широко распространена и хорошо испытана (зачем же выступать в роли подопытного кролика?).

Вот мой список 5 лучших библиотек диаграмм для React.

1. Rechart

Rechart — библиотека, созданная при помощи D3.js (еще одной очень популярной библиотеки графики для JavaScript, о которой мы уже писали в статье «Лучшие библиотеки JavaScript для создания диаграмм»). Это сплошная модульность и простота. Сетка, строка-указатель, элементы строки — всё это компоненты React, пригодные для повторного использования. Благодаря этому гораздо легче кастомизировать графики и даже использовать повторно ваши собственные настроенные компоненты в других композициях.

Rechart Chart - библиотека для создания графиков
Удаление под-компонента в компоненте Rechart Chart

2. Victory

Предлагая высокопрофессиональную экосистему компонентов с полностью изменяемыми стилями и поведением, Victory поддерживает хороший баланс между простотой использования и высокой настраиваемостью.

Victory также является хорошим выбором для тех, кто ищет кроссплатформенное решение. У этой библиотеки есть практически идентичные API для ReactJS и React Native — эту важную особенность стоит иметь в виду.

Применение анимаций компонентов в Victory chart
Применение анимаций компонентов в Victory chart

3. Nivo

Nivo (также создана при помощи D3.js) является победительницей сразу в двух номинациях: во-первых, за красивый UI, а во-вторых, за просто невероятную «интерактивную документацию». Nivo предлагает вам не читать длинные тексты с описанием функционала, а воспользоваться ее потрясающим пользовательским интерфейсом для испытания и настройки компонентов ваших графиков. Когда сочтете, что все готово, просто скопируйте код вашего графика. (Со временем, конечно, вы сможете работать с кодом напрямую — этот подход предпочтительнее).

Настройка компонента в "песочнице" Nivo
Настройка компонента в «песочнице» Nivo

4. Vis

Vis — библиотека, созданная Uber, — напоминает Recharts в том, что касается попыток сделать экосистемы компонентов как можно проще и модульнее. Лейтмотив этой библиотеки — если вы знаете React, то вы знаете и Vis.

Что касается эстетической стороны вопроса, Vis выглядит довольно просто.

Простота графиков Vis
Простота графиков Vis

5. VX

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

При помощи VX можно создавать интересные диаграммы
При помощи VX можно создавать интересные диаграммы

Заключение

Это мой личный список React-библиотек для визуализации данных. Надеюсь, вы найдете в нем что-нибудь подходящее для себя, независимо от того, на что вы ориентируетесь: эстетичность, легкость использования или легковесность пакетов.

[customscript]techrocks_custom_after_post_html[/customscript]

[customscript]techrocks_custom_script[/customscript]

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Прокрутить вверх