Создавайте элегантные диаграммы в своих приложениях для 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 - см. Репозиторий для инструкций.