Charts для Swift: полное руководство с примерами

Введение в Charts для Swift

Charts — это мощная и гибкая библиотека с открытым исходным кодом для визуализации данных на платформах Apple (iOS, tvOS, macOS, watchOS). Она написана на Swift и предоставляет широкий спектр типов диаграмм: от простых линейных и столбчатых до сложных комбинированных и пузырьковых. Библиотека является форком знаменитой iOS-библиотеки ios-charts, которая, в свою очередь, была портирована с Java-библиотеки MPAndroidChart.

Зачем нужна Charts?

• Визуализация данных: Превращает скучные цифры в наглядные графики и диаграммы.
• Богатая функциональность: Поддерживает анимацию, интерактивное взаимодействие (касания, выделение), легенды, оси, маркеры данных и многое другое.
• Нативная производительность: Написана на Swift, использует Core Graphics и Core Animation, что обеспечивает плавную работу даже с большими наборами данных.
• Простота интеграции: Легко устанавливается через Swift Package Manager, CocoaPods или Carthage.
• Активное сообщество: Регулярно обновляется, имеет обширную документацию и множество примеров.

Установка библиотеки Charts

Charts можно установить одним из трех основных способов. Рекомендуемым является Swift Package Manager (SPM).

1. Swift Package Manager (SPM) — Рекомендуемый способ

1. В Xcode откройте ваш проект.
2. Выберите File → Add Packages...
3. В поле поиска введите URL репозитория: https://github.com/danielgindi/Charts.git
4. Выберите нужную версию (обычно последнюю стабильную).
5. Нажмите Add Package.
6. Убедитесь, что пакет добавлен в вашу цель (target).

2. CocoaPods

Добавьте в ваш Podfile:

platform :ios, '13.0'
use_frameworks!

target 'YourApp' do
  pod 'Charts'
end

Затем выполните команду в терминале:

pod install

3. Carthage

Добавьте в ваш Cartfile:

github "danielgindi/Charts"

Затем выполните:

carthage update

Быстрый старт: Создаем первую диаграмму

Давайте создадим простую линейную диаграмму, отображающую изменение температуры за неделю.

1. Импортируйте библиотеку в ваш контроллер:

   import UIKit
   import Charts

2. Добавьте View на Storyboard или создайте программно:

   На сториборде перетащите UIView и измените его класс на LineChartView в инспекторе идентичности (Identity Inspector). Создайте IBOutlet:

   @IBOutlet weak var lineChartView: LineChartView!

3. Настройте данные:

   func setupLineChart() {
       // 1. Создаем точки данных
       let dataEntries: [ChartDataEntry] = [
           ChartDataEntry(x: 1.0, y: 20.0),
           ChartDataEntry(x: 2.0, y: 22.0),
           ChartDataEntry(x: 3.0, y: 19.0),
           ChartDataEntry(x: 4.0, y: 25.0),
           ChartDataEntry(x: 5.0, y: 23.0),
           ChartDataEntry(x: 6.0, y: 21.0),
           ChartDataEntry(x: 7.0, y: 26.0)
       ]
   
       // 2. Создаем набор данных
       let lineDataSet = LineChartDataSet(entries: dataEntries, label: "Температура (°C)")
       lineDataSet.colors = [.systemBlue] // Цвет линии
       lineDataSet.circleColors = [.systemRed] // Цвет точек
       lineDataSet.circleRadius = 4.0
       lineDataSet.lineWidth = 2.0
   
       // 3. Создаем объект данных
       let lineData = LineChartData(dataSet: lineDataSet)
   
       // 4. Назначаем данные диаграмме
       lineChartView.data = lineData
   
       // 5. Дополнительные настройки
       lineChartView.xAxis.labelPosition = .bottom
       lineChartView.rightAxis.enabled = false
       lineChartView.animate(xAxisDuration: 1.5)
   }

Вызовите метод setupLineChart() в viewDidLoad(). Готово! Вы создали свою первую диаграмму.

Основные методы и функции Charts

Ниже представлены ключевые методы и свойства для работы с различными аспектами библиотеки.

1. ChartViewBase.data

Что делает: Основное свойство для установки данных на любую диаграмму. Принимает объект ChartData (или его подклассы, такие как LineChartData, BarChartData и т.д.).

Параметры:

• data: ChartData? — объект данных, который будет отображаться.

Пример:

let data = LineChartData(dataSet: myDataSet)
lineChartView.data = data

2. ChartViewBase.animate(xAxisDuration:yAxisDuration:easingOption:)

Что делает: Запускает анимацию появления диаграммы. Можно анимировать оси X и Y независимо с разной длительностью и функциями сглаживания (easing).

Параметры:

• xAxisDuration: TimeInterval — длительность анимации по оси X в секундах.
• yAxisDuration: TimeInterval — длительность анимации по оси Y в секундах.
• easingOption: ChartEasingOption — (опционально) функция сглаживания, например, .easeInOutQuad, .linear.

Пример:

lineChartView.animate(xAxisDuration: 2.0, yAxisDuration: 2.0, easingOption: .easeInOutCubic)

3. ChartDataSet.values

Что делает: Свойство, содержащее массив точек данных ([ChartDataEntry]) для конкретного набора данных. Позволяет динамически обновлять или заменять данные.

Параметры:

• values: [ChartDataEntry] — новый массив записей.

Пример:

let newEntries = [ChartDataEntry(x: 1, y: 100), ChartDataEntry(x: 2, y: 200)]
lineDataSet.values = newEntries
lineChartView.notifyDataSetChanged() // Обязательно вызвать для обновления

4. ChartDataSet.colors

Что делает: Управляет цветом (или массивом цветов) для отрисовки элементов набора данных (линии, столбцы, точки и т.д.). Если задан массив, цвета будут циклически применяться к каждому элементу.

Параметры:

• colors: [NSUIColor] — массив цветов.

Пример:

barDataSet.colors = [.systemGreen, .systemYellow, .systemRed] // Разные цвета для столбцов

5. ChartDataSet.drawValuesEnabled

Что делает: Включает или отключает отображение числовых значений над элементами диаграммы (над точками, столбцами и т.д.).

Параметры:

• enabled: Bool — true для отображения, false для скрытия.

Пример:

lineDataSet.drawValuesEnabled = false // Скрываем значения над точками

6. ChartXAxis.labelPosition

Что делает: Определяет положение подписей оси X относительно оси.

Параметры:

• position: XAxis.LabelPosition — возможные значения: .top, .bottom, .bothSided, .topInside, .bottomInside.

Пример:

lineChartView.xAxis.labelPosition = .bottom

7. ChartYAxis.axisMinimum и axisMaximum

Что делает: Позволяет вручную установить минимальное и максимальное значение для оси Y (левой или правой). Полезно, когда нужно задать фиксированный диапазон, а не автоматический.

Параметры:

• axisMinimum: Double — минимальное значение.
• axisMaximum: Double — максимальное значение.

Пример:

lineChartView.leftAxis.axisMinimum = 0.0
lineChartView.leftAxis.axisMaximum = 100.0

8. ChartViewBase.legend

Что делает: Свойство, предоставляющее доступ к объекту Legend для настройки внешнего вида и положения легенды диаграммы.

Основные свойства Legend:

• enabled: Bool — показать/скрыть легенду.
• horizontalAlignment: HorizontalAlignment — выравнивание по горизонтали (.left, .center, .right).
• verticalAlignment: VerticalAlignment — выравнивание по вертикали (.top, .center, .bottom).
• orientation: Orientation — ориентация (.horizontal, .vertical).

Пример:

let legend = lineChartView.legend
legend.enabled = true
legend.horizontalAlignment = .center
legend.verticalAlignment = .bottom
legend.orientation = .horizontal

9. ChartDataSet.circleRadius (для LineChartDataSet)

Что делает: Устанавливает радиус кружков, отображаемых в каждой точке данных на линейной диаграмме.

Параметры:

• radius: CGFloat — радиус в точках.

Пример:

lineDataSet.circleRadius = 6.0
lineDataSet.drawCirclesEnabled = true

10. BarChartDataSet.barWidth

Что делает: Определяет ширину столбцов на столбчатой диаграмме. Значение задается в долях от единицы (1.0 — полная ширина категории).

Параметры:

• barWidth: Double — ширина столбца (обычно от 0.1 до 1.0).

Пример:

let barDataSet = BarChartDataSet(entries: entries, label: "Продажи")
barDataSet.barWidth = 0.7 // Столбцы будут занимать 70% доступного пространства

Реальный практический пример: Дашборд продаж

Создадим комбинированную диаграмму (CombinedChartView),