Всем привет! Мне очень приятно создавать свой первый пост на Medium. Знаешь что? Мне хорошо! Давным-давно я думал об этом, и, наконец, сегодня я это делаю. Моя собственная революция.
В этом посте я хотел бы начать небольшое руководство по созданию линейной диаграммы на React Native. Вы знаете, что такое линейная графика? На всякий случай покажу:
Да, красиво смотрится, правда? Дело в том, как я могу создать его в приложении React Native? Что ж ... Это моя причина, по которой я здесь. Поверьте, это просто!
Во-первых, я хотел бы поделиться пакетом от npm под названием react-native-chart-kit. Это идеальная и простая библиотека javascript с использованием React Native для создания собственной графики.
Я предполагаю, что у вас уже есть собственный проект React Native. Итак, давайте пропустим этот шаг.
Давайте начнем!
yarn add react-native-chart-kit
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.
Пожалуйста, не стесняйтесь тянуть его (или сделать запрос на слияние, почему бы и нет?)