Создавайте собственные диаграммы реагирования в грубом, нарисованном от руки виде.

Создание привлекательных и интерактивных графиков в 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 вы можете сделать гораздо больше. В будущих уроках я буду изучать больше и демонстрировать другие варианты использования.

На простом английском языке

Спасибо, что вы являетесь частью нашего сообщества! Прежде чем уйти: