Всем привет! Мне очень приятно создавать свой первый пост на Medium. Знаешь что? Мне хорошо! Давным-давно я думал об этом, и, наконец, сегодня я это делаю. Моя собственная революция.

В этом посте я хотел бы начать небольшое руководство по созданию линейной диаграммы на React Native. Вы знаете, что такое линейная графика? На всякий случай покажу:

Да, красиво смотрится, правда? Дело в том, как я могу создать его в приложении React Native? Что ж ... Это моя причина, по которой я здесь. Поверьте, это просто!

Во-первых, я хотел бы поделиться пакетом от npm под названием react-native-chart-kit. Это идеальная и простая библиотека javascript с использованием React Native для создания собственной графики.

Я предполагаю, что у вас уже есть собственный проект React Native. Итак, давайте пропустим этот шаг.

Давайте начнем!

  1. yarn add react-native-chart-kit
  2. yarn add react-native-svg prop-types установить одноранговые зависимости

Выполнено? Хорошо, второй шаг: импорт LineChar.

import { LineChart} from "react-native-chart-kit";

Все в порядке. Все установлено и импортировано. Звучит отлично!

Следующий шаг - использование компонента LineChart и создание ваших фиктивных данных.

const labels = [
'Label 1',
'Label 2',
'Label 3',
'Label 4',
'Label 5',
'Label 6',
];
const data = [
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
];

и теперь, используя компонент Line Chart:

<LineChart
data={{ labels: labels,
datasets: [{ data: data }],}}
width={Dimensions.get('window').width - 50}
height={220}
chartConfig={{
backgroundColor: '#e26a00',
backgroundGradientFrom: '#D9D9D9',
backgroundGradientTo: '#FFF',
decimalPlaces: 2, // optional, defaults to 2dp
color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
labelColor: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
style: { borderRadius: 16, },
propsForDots: { r: '6', strokeWidth: '2', stroke: '#ffa726', }, }}
bezier
style={{ marginVertical: 5, borderRadius: 15, }}
/>

Что у нас здесь?

Перво-наперво. Конечно, нам нужно импортировать и использовать наш LineChart в качестве компонента. Но что это за информация? Хорошо, позвольте мне объяснить:

const labels = ["Label 1", "Label 2", "Label 3",  "Label 4", "Label 5", "Label 6"];

Как следует из названия, нам нужно использовать массив со значениями, такими как метка на графике. Итак, в этом примере это массив с некоторыми значениями.

Как насчет данных?

const data = [
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
Math.random() * 100
];

Хм ... но что это за функция Math.random ()?

Math.random() * 100);
// returns a random integer from 0 to 99

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

Отличная работа! Но нам нужно больше!

import { Dimensions } from 'react-native';

Давайте импортируем размеры из React Native, чтобы рассчитать ширину устройств и использовать ее, чтобы всегда реагировать.

width={Dimensions.get("window").width}

и создать определенную высоту:

height={220}

Хорошо, еще немного. Конфигурации диаграммы:

chartConfig={{
backgroundColor: '#e26a00',
backgroundGradientFrom: '#D9D9D9',
backgroundGradientTo: '#FFF',
decimalPlaces: 2,
color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
labelColor: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
style: { borderRadius: 16, },
propsForDots: { r: '6', strokeWidth: '2', stroke: '#ffa726', },
}}

Если вы знакомы со стилями JSX или даже CSS, вы можете увидеть, что у нас есть конфигурация стиля JSX: backgroundColor, color и style.

Это просто!

propsForDots? Просто установите стиль для каждой точки на графике, например ширину обводки и r.

Тогда у нас есть:

bezier
style={{ marginVertical: 8, borderRadius: 16 }}

Безье?

Определяет функцию цвета точек, которая используется для вычисления цветов точек на линейной диаграмме. Это логическое значение, поэтому просто установите true или false. В этом случае просто установите true, без аргументов.

и, наконец, о свойствах стиля, как вы знаете, это просто свойства, чтобы установить поле для компонента и borderRadius, чтобы сделать его красивым виджетом =)

Хорошо, мы сделали.

Если вы хотите проверить полный исходник на Github.

Пожалуйста, не стесняйтесь тянуть его (или сделать запрос на слияние, почему бы и нет?)

Https://github.com/pedrosgmagalhaes/linechart-sample