Создавайте собственные диаграммы реагирования в грубом, нарисованном от руки виде.
Создание привлекательных и интерактивных графиков в React Native всегда было сложной и интересной задачей. Но на этот раз я хотел уйти от «стандартного» вида диаграмм и создать забавный, игривый и нетрадиционныйстиль визуализации. Я понял, что нарисованные от руки диаграммы могут помочь сломить первоначальное сопротивление пользователей и позволить им лучше усвоить новый материал. На изображении ниже показана гистограмма в чистом виде по сравнению с грубо нарисованной от руки.
К моему удивлению, все библиотеки диаграмм в React Native имели стандартный аккуратный вид диаграмм.
Чтобы решить эту проблему, я провел небольшое исследование и наткнулся на эту классную библиотеку JavaScript, которая позволяет рисовать элементы, похожие на эскизы. Библиотека определяет примитивы для рисования линий, кривых, дуг, многоугольников, кругов и эллипсов. Он также поддерживает рисование путей SVG.
Я планировал поиграть с rough.js
и d3.js
и посмотреть, как они могут оживить данные.
Но создание собственных графиков сопряжено с затратами на обучение и реализацию всего с нуля. Поэтому я провел небольшое исследование существующих библиотек диаграмм React Native на основе d3.js
и react-native-svg
, которые в дальнейшем можно настроить для создания рисованных от руки диаграмм.
React Native SVG-диаграммы
После того, как я отказался от создания собственного графика с нуля, это было лучшее решение, которое я смог найти. React-native-svg-charts
использует react-native-svg
под капотом для визуализации диаграмм. Там также есть масса примеров, показывающих множество вариантов использования.
Он был построен так, чтобы быть максимально расширяемым. Все диаграммы можно расширить с помощью декораторов, всплывающих подсказок, элементов, похожих на эскизы и т. д.
В этом уроке мы интегрируем Basic Svg Rough Path Element
с компонентом React-native-SVG-charts
Bar Chart
.
Установка зависимостей
Нам нужно создать собственный проект React и установить все необходимые зависимости, включая rough.js
и d3.js.
.
npm i --save d3 npm i --save d3-array npm i --save d3-scale npm i --save d3-shape npm i --save roughjs npm i --save react-native-svg react-native link react-native-svg
Теперь все готово, давайте начнем вечеринку!
Создание хука useRough
Мы будем использовать agenerator
, который возвращает набор инструкций для рисования эскизной фигуры на более позднем этапе.
Итак, мы создадим новый файл для крючка useRough
.
import { RoughGenerator } from "roughjs/bin/generator"; const defaultOptions = Object.freeze({ ...new RoughGenerator().defaultOptions, }); export const useRough = (options = defaultOptions) => new RoughGenerator({ ...defaultOptions, ...options });
Создание базового элемента грубого пути SVG
Generator
имеет метод toPaths(drawable)
, который превращает объект рисования в PathInfo Objects
, который представляет всю информацию, необходимую для рендеринга фигуры в путь SVG.
В его состав входят следующие члены:
d
: строка, содержащая ряд описаний пути.
stroke
: Цвет обводки пути.
strokeWidth
: Ширина обводки, используемая для контура.
fill
: Цвет, используемый для заливки пути.
let rect = generator.rectangle(10, 10, 100, 100, {fill: 'red'}); let paths = generator.toPaths(rect);
ИспользуяtoPaths(drawable)
method, мы получим массив (paths)
, состоящий из PathInfo objects
. Затем мы сопоставим этот массив и отправим компонент pathInfo
в react-native-svg
Path.
Вот полный код для RoughPath
Компонента.
Использование React Native SVG-диаграмм
В react-native-svg-charts
есть множество компонентов, которые мы можем использовать для создания графиков.
В этом уроке мы будем использовать компонент BarChart
, но вы можете использовать любой из доступных компонентов диаграмм. Вот как выглядит наш компонент диаграммы Barchart
:
Чтобы отобразить данные относительно размера диаграммы, нам нужно использовать функции масштабирования D3, такие как D3-scale Band scales
и d3-scale Linear scales
.
По сути, концепция scaleBand
заключается в том, чтобы взять область вывода (некоторой ширины), данные и количество точек данных, разделить ее на полосы. Полосой в нашем случае можно считать каждый бар. Используя текущую ширину, а также известные точки данных, он определит ширину каждого столбца.
Помимо разделения контента на каждую конкретную полосу по ширине, мы можем применить отступы, чтобы создать равномерное пространство между каждой полосой.
Примечание. Ленточные шкалы имеют фиксированное дополнение и переменную ширину для координаты x
. Но если вам нужна фиксированная ширина панели и переменное отступы, для координаты x
подойдет масштаб точек.
Короче говоря, эти шкалы позволяют нам определить конкретный диапазон и конкретную область, и мы будем использовать эти шкалы для определения x
и y
.Функции предметной области найдут ширину данных x
и y
. Затем диапазон масштабирует эти данные в соответствии с SVG, используя переменные измерения диаграммы, определенные выше.
paddingInner
— это отступы между каждым столбцом. paddingOuter
— это отступы слева и справа после визуализации всех столбцов.
Метод area()
используется для возврата генератора областей, который в дальнейшем можно использовать для создания областей. Сгенерированные данные сопоставляются и отображаются с помощью Basic Svg Rough Path Element
, который мы создали поверх react-native-svg
и rough.js.
. Вместо использования компонента react-native-svg
Path мы использовали наш собственный специальный компонент RoughPath
для достижения грубого вида.
Получение фиктивных данных
Прежде чем мы углубимся дальше, нам нужно найти некоторые данные, которые мы можем использовать для рендеринга нашего BarChart
.
В идеале мы будем получать эти данные из API, сохранять их в состоянии компонента, а затем передавать их нашему компоненту bar chart
.
Вот как выглядят мои фиктивные данные JSON. Полный файл данных JSON см. здесь:
Создание базовой гистограммы
Сначала нам нужно импортировать компонент BarChart
, который мы создали поверх библиотеки react-native-svg-charts
:
import { BarChart } from "../../src";
Теперь мы можем создать базовый BarChart
с хорошо известными реквизитами react-native-svg-charts
, например:
data
: Это обязательное поле и должно быть массивом.yAccessor
: функция, которая принимает каждую записьdata
(с именем «item»), а также индекс и возвращает значение y этой записи.style
: поддерживает все ViewStyleProps.svg
: объект, содержащий все реквизиты, которые должны быть переданы базовому компонентуreact-native-svg
.contentInset
: Объект, определяющий, сколько ложного «поля» использовать внутри холста SVG.
Подробнее о других доступных реквизитах вы можете прочитать в официальной документации.
<BarChart style={{ height: ChartHeight, marginBottom: moderateScaleVertical(10), }} contentInset={{ right: moderateScale(10), }} data={BarData} yAccessor={({ item }) => item.pv} gridMin={0} gridMax={9000} xMin={0} yMin={0} spacingInner={0.2} spacingOuter={0.4} svg={{ fill: color.BRIGHT_GREEN }} />
И вот оно у нас есть!
Добавляем некоторые детали
Затем мы добавим некоторые детали, такие как метки осей X и Y, используя компоненты react-native-svg-charts
, такие как x Axis
и y Axis
. Мы нарисуем две линии, используя react-native-svg
: одну для оси Y, другую для оси X.
Вот окончательный код:
Вот окончательный результат!
Последние мысли
Это все, что нам нужно сделать для создания приблизительных диаграмм в React Native. Это лишь базовая реализация того, чего можно достичь с помощью библиотечного компонента react-native-svg-charts
и rough.js.
.
Примечание. Для краткости я пропустил некоторый шаблонный код. Если вы просто хотите просмотреть исходный код примера проекта, найдите репозиторий Github здесь.
Надеюсь, вам понравился этот урок. Этот небольшой экскурс должен помочь вам освоиться с основами и дать вам все необходимое для создания нарисованной от руки таблицы стилей. С d3.js
, react-native-svg
, react-native-svg-charts
и rough.js
вы можете сделать гораздо больше. В будущих уроках я буду изучать больше и демонстрировать другие варианты использования.
На простом английском языке
Спасибо, что вы являетесь частью нашего сообщества! Прежде чем уйти:
- Обязательно аплодируйте и следуйте за автором! 👏
- Еще больше контента вы можете найти на PlainEnglish.io 🚀
- Подпишитесь на нашу бесплатную еженедельную рассылку. 🗞️
- Следуйте за нами в Twitter, LinkedIn, YouTube > и Discord.