Recharts Графика

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

Компонент - это компонент-обертка, который получает данные графика в свойстве data и предоставляет их своим потомкам.

В нашем случае, нам нужно передать массив dataArr, созданный выше, в свойство data. Для того, чтобы график вообще отображался, нужно задать свойства высота и ширина, в данном случае высота составит 250, а ширина - 700.

Компонент отображает данные на графике. Свойство dataKey будет выбирать ключ для каждого объекта из объекта dataArr для отображения этих данных на графике.

Помните из написанного выше, что каждый объект из dataArr выглядит примерно так:

dataarr.js размещен на GitHub

Давайте покажем значение Total, для этого присвоим свойству dataKey значение «Total». Компонент   принимает много других свойств для настройки графика так, как вы хотите. Сейчас давайте зададим stroke, fillOpacity и fill.

AreaChart.js размещен на GitHub

Добавим компонент Graph в App.js, чтобы увидеть AreaChart, созданный выше.

graph.js размещен на GitHub


Форма компонента может быть изменена при помощи свойства type. Например, присвоим значение "step" свойству type.

GitHub]area.js[/url] размещен на GitHub


А теперь попробуем "natural".



Recharts Всплывающей Подсказки

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

Мы можем использовать tooltip, чтобы показать итоговые значения на каждом из интервалов графика. Стиль подсказки настраивается с помощью свойств contentStyle и labelStyle.

tooltip.js размещен на GitHub


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

Используем функцию округления ./src/round.js, которую мы создали выше, чтобы округлить значения до двух знаков после запятой. Также добавим символ $ перед значением, чтобы показать единицы измерения.




Recharts Точек

Свойство dot компонента добавит точки в каждый отдельный фрагмент графика.

Мы можем задать значение "true", чтобы показать точки так, как задано по умолчанию, задать объект с таким стилем отображения точек, каким мы хотим, или задать точки индивидуально. Сейчас добавим объект с простым стилем.

area.js размещен на GitHub


Также мы можем изменять вид точек при наведении курсора мыши при помощи свойства activeDot.

activeDot.js размещен на GitHub



Recharts оси Y и оси X

Используя компоненты и , мы можем отобразить обе оси для предоставления более полной информации о шкале значений.

Компонент по умолчанию будет отображать число точек в порядке возрастания.


Но мы хотим показать сами даты на оси Х. Для этого присвоим свойству dataKey свойства значение «date».

Существует множество свойств и настроек для компонентов XAxis и YAxis, от пользовательских меток до масштабирования, галочек и обработчиков событий. Однако, сейчас мы все сделаем просто.

axis.js размещен на GitHub



Recharts Нескольких Типов Данных

С помощью Recharts мы можем добавить несколько типов данных в один график для отображения связанных данных на одной временной шкале.

В этом случае мы хотим отобразить CoinAmount, TotalInvested и CoinPrice вместе с Total на одном графике, чтобы увидеть, как все эти данные связаны между собой. Нам нужно будет задать каждой Area свой цвет, чтобы легко их различать, а также добавить прозрачность, чтобы мы могли видеть перекрывающиеся графики.

Создайте остальные компоненты Area в AreaChart таким же образом, как мы создали один выше, используя dataKey для каждого типа данных.

AreaChart.js размещен на GitHub


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

Однако, мы можем создать два компонента YAxis, один справа и один слева, чтобы решить эту проблему. Сейчас у нас уже есть YAxis слева, который отображается в долларах, поэтому нам осталось создать YAxis справа, который будет отображаться в биткоинах.

Создаем второй компонент YAxis и задаем свойству yAxisId значение «righyt» и свойству orientation значение «right». Свойство yAxisId позволит нам задать для Area правильную шкалу YAxis шкалу.


Обновим каждый , чтобы отобразить правильное значение yAxisId, путем определения свойства yAxisId в компоненте .

area.js размещен на GitHub


У библиотеки Recharts множество других настроек, вы можете познакомиться с ними на Recharts docs.


Recharts Адаптации Размеров Экрана

График не будет автоматически адаптироваться для экранов с меньшим размером, потому что параметры высоты и ширины заданы статично. Однако, это можно легко исправить с помощью Recharts.

Оберните компонент в , удалите высоту и ширину из и задйте новое значение высоты компоненту .

ResponsiveContainer.js размещен на GitHub


Вывод

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

Если вам интересно, как добавить какие-либо из этих дополнительных опций, ознакомьтесь с репозиторием проекта crypto-dca на GitHub.

Recharts делает создание графиков с помощью React и D3 невероятно легким, в то же самое время предоставляя широкий спектр настроек.

Однако, библиотека Recharts обладает гораздо большими возможностями, чем может быть охвачено в рамках одного проекта. Надеюсь, этот пример поможет вам начать.