Создавайте элегантные диаграммы в своих приложениях для iOS
В этой статье я объясню, как я создал красивую круговую диаграмму, показанную выше, в SwiftUI. Вы можете найти эту библиотеку на Github и добавить ее в свой проект в XCode за один простой шаг. См. Https://github.com/ilamanov/SwiftPieChart.
Статья состоит из двух разделов:
- Создание круговой диаграммы
- Создание таблицы с дополнительной информацией под круговой диаграммой
Создание круговой диаграммы
Круговая диаграмма состоит из нескольких срезов. Давайте создадим компонент для отображения одного среза.
Создайте новый файл PieSliceView.swift
. Добавьте в него следующую структуру данных PieSliceData
- она будет использоваться для хранения данных для сегмента круговой диаграммы:
Для рендеринга сектора пирога мы будем использовать Path
. Path
требуется два вызова для рендеринга этого фрагмента. Сначала нам нужно переместить курсор в центр экрана, затем нам нужно нарисовать дугу. Мы добьемся этого с помощью path.move()
и path.addArc()
:
Мы рассчитали центральную точку, используя ширину и высоту нашей рамки. Мы можем получить ширину и высоту нашей рамки из объекта GeometryReader
. Мы берем наименьшее измерение нашего фрейма и используем его как измерение нашей диаграммы (линия 7
выше), чтобы наша диаграмма была квадратной и помещалась в ее фрейм. Мы также добавляем aspectRatio()
, чтобы наша диаграмма была центрирована по вертикали. Нам нужно смещение 90 градусов (линии 17
и 18
), потому что в системе координат SwiftUI 0 градусов начинается с 3 часов, а не с часов.
Теперь мы можем протестировать рендеринг этого среза:
Результат такой:
Давайте добавим текст поверх этого фрагмента. Мы будем использовать для этого ZStack
- мы размещаем текст поверх нашей дуги:
Вычислить позицию текста (строка 30
выше) сложно. Сначала мы вычисляем средний угол (середина между начальным и конечным углами - линия 4
). Снова нам нужно смещение Pi / 2
(90 градусов), чтобы компенсировать разницу в системах координат (0 градусов в SwiftUI соответствует 3 часам, но для наших целей 0 градусов соответствует 12 часам).
Затем положение текста рассчитывается по следующей формуле:
В результате получился кусок пирога с текстом поверх него:
Теперь, когда мы можем визуализировать один кусок круговой диаграммы, давайте визуализируем их несколько и объединим в круговую диаграмму.
Объединение ломтиков пирога
Давайте создадим новый файл для визуализации круговой диаграммы с именем PieChartView.swift
. Мы добавим два параметра для этого представления: values
и colors
, которые будут указывать значения и цвета для секторов круговой диаграммы.
Мы вычисляем slices
(который представляет собой массив PieSliceData
) на основе предоставленных values
и colors
. Мы вычисляем диапазон каждого среза на основе значения этого среза. Формула для вычисления диапазона в градусах: degrees = 360 * value / sum
, где sum
- сумма всех значений (строка 13). На основе диапазона мы вычисляем start
и end angles
всех срезов. Мы будем использовать массив slices
для передачи необходимых данных в наш PieSliceView
из предыдущего раздела.
Теперь давайте изменим функцию body
нашего представления, чтобы рисовать наши срезы:
Мы используем ZStack
, чтобы складывать все срезы, и устанавливаем фрейм для всех срезов равным размеру фрейма нашего PieChartView
. Мы также добавляем параметр backgroundColor
к нашему PieChartView
, чтобы мы могли легко изменить фон. Результат показан ниже:
Теперь давайте добавим текст в центр круговой диаграммы. Сначала мы добавляем круг, соответствующий цвету фона, затем добавляем текст поверх круга:
Мы добавили еще один параметр под названием innerRadiusFraction
(строка 11) для управления радиусом внутреннего круга. На данный момент мы устанавливаем текст в центре круговой диаграммы как сумму всех значений.
Мы также можем сделать этот текст динамическим - отображая значение среза, когда вы нажимаете на срез. См. Https://github.com/ilamanov/SwiftPieChart для реализации динамического текста.
Результат ниже:
Мы закончили с самой важной частью нашей круговой диаграммы. Мы также можем добавить классную анимацию, когда пользователь щелкает отдельные фрагменты, как показано ниже. См. Https://github.com/ilamanov/SwiftPieChart для реализации этих эффектов.
Затем давайте добавим дополнительную информацию под нашей круговой диаграммой.
Создание таблицы с дополнительной информацией
Давайте добавим в PieChartView.swift
следующее PieChartRows
представление:
Это представление будет выглядеть так:
Теперь мы можем отобразить его в нашем PieChartView
:
Мы обернули наш ZStack
в VStack
и добавили PieChartRows
под ZStack
. Мы также добавили еще один параметр names
, чтобы мы могли отображать названия категорий на нашей диаграмме.
Вот и все! Наша круговая диаграмма готова. Полный код для PieChartView
показан ниже.
И вот результат:
Мы не добавляли эффекты наведения на нашу круговую диаграмму, но вы можете найти реализацию этих эффектов в репозитории Github для этой круговой диаграммы: https://github.com/ilamanov/SwiftPieChart.
Вы даже можете добавить это репо как библиотеку в свой проект прямо из XCode - см. Репозиторий для инструкций.