Перевод статьи «Top 5 React Chart Libraries for 2020».
Если вы хотите принять решение на основе данных, лучше воспользоваться вспомогательными инструментами.
«В графиках есть некая магия. Вид кривой мгновенно описывает ситуацию — историю эпидемии, нарастание и спад паники или эпоху процветания. Кривая графика информирует, пробуждает воображение и убеждает», — Уиллард К. Бринтон, американский инженер, пионер в области визуализации информации. (В частности, Бринтон известен благодаря своей книге «Графические методы представления фактов», изданной в 1914 году).
Если вам нужно представить некие данные, безусловно, следует определиться, какого рода график или диаграмму использовать. Но разработчику нужно также выбрать подходящую библиотеку компонентов графиков и диаграмм.
Каковы мои критерии хорошей библиотеки?
- Она должна быть хорошо настраиваемой.
- У нее должен быть простой API, а также понятная документация.
- Библиотека должна представлять хороший UI/UX.
- Она должна быть широко распространена и хорошо испытана (зачем же выступать в роли подопытного кролика?).
Вот мой список 5 лучших библиотек диаграмм для React.
1. Rechart
Rechart — библиотека, созданная при помощи D3.js (еще одной очень популярной библиотеки графики для JavaScript, о которой мы уже писали в статье «Лучшие библиотеки JavaScript для создания диаграмм»). Это сплошная модульность и простота. Сетка, строка-указатель, элементы строки — всё это компоненты React, пригодные для повторного использования. Благодаря этому гораздо легче кастомизировать графики и даже использовать повторно ваши собственные настроенные компоненты в других композициях.
2. Victory
Предлагая высокопрофессиональную экосистему компонентов с полностью изменяемыми стилями и поведением, Victory поддерживает хороший баланс между простотой использования и высокой настраиваемостью.
Victory также является хорошим выбором для тех, кто ищет кроссплатформенное решение. У этой библиотеки есть практически идентичные API для ReactJS и React Native — эту важную особенность стоит иметь в виду.
3. Nivo
Nivo (также создана при помощи D3.js) является победительницей сразу в двух номинациях: во-первых, за красивый UI, а во-вторых, за просто невероятную «интерактивную документацию». Nivo предлагает вам не читать длинные тексты с описанием функционала, а воспользоваться ее потрясающим пользовательским интерфейсом для испытания и настройки компонентов ваших графиков. Когда сочтете, что все готово, просто скопируйте код вашего графика. (Со временем, конечно, вы сможете работать с кодом напрямую — этот подход предпочтительнее).
4. Vis
Vis — библиотека, созданная Uber, — напоминает Recharts в том, что касается попыток сделать экосистемы компонентов как можно проще и модульнее. Лейтмотив этой библиотеки — если вы знаете React, то вы знаете и Vis.
Что касается эстетической стороны вопроса, Vis выглядит довольно просто.
5. VX
VX это библиотека для тех, у кого есть четкое понимание того, как должны выглядеть и работать их графики, но еще нет достаточно знаний, чтобы построить собственную экосистему компонентов на базе D3. VX отличается гибкостью и спроектирован таким образом, чтобы служить в качестве надстройки. При пользовании этой библиотекой вам будет куда проще поддерживать маленький размер ваших пакетов, чем при работе с другими аналогичными библиотеками.
Заключение
Это мой личный список React-библиотек для визуализации данных. Надеюсь, вы найдете в нем что-нибудь подходящее для себя, независимо от того, на что вы ориентируетесь: эстетичность, легкость использования или легковесность пакетов.
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]
