iOS-Charts - это очень гибкая и простая в использовании сторонняя библиотека, позволяющая настраивать ваши диаграммы.
В последнее время использую в работе iOS-Charts. Это очень гибкая и простая в использовании сторонняя библиотека, позволяющая настраивать диаграммы.
Эта библиотека примерно на 95% похожа на свой аналог для Android, что значительно упрощает разработку приложений для обеих платформ.
Здесь я использую данные о рождаемости в некоторых странах с высоким уровнем дохода, чтобы продемонстрировать, как настроить базовую гистограмму с помощью iOS-Charts.
До начала
Исходный код показан ниже. Если вас немного смущают некоторые классы или функции, которые я использую в этом примере, вот небольшое объяснение обработки необработанных данных, которое не имеет отношения к сегодняшней теме iOS-Charts:
Необработанные данные в этом примере представляют собой массив строк.
CountryItem - это класс, созданный для хранения индекса, страны и коэффициента рождаемости каждой страны. Функция getFormattedItemValue анализирует необработанные данные и возвращает массив CountryItem.
В viewDidLoad() getFormattedItemValue вызывается для обработки необработанных данных, а возвращенные данные сохраняются в items.
Настройка просмотра карты
Во-первых, добавьте UIView в раскадровку и установите для него класс BarChartView.
Не забудьте импортировать Charts в файл кода этого контроллера представления.
Контроллер представления должен соответствовать ChartViewDelegate и установить для делегата представления диаграммы значение self.
Теперь, если вы запустите симулятор, он должен показать «Данные диаграммы недоступны». Если в представлении диаграммы не отображаются эти слова, вы, вероятно, не реализовали его успешно.
Настройка данных
Структура данных диаграммы похожа на снимок экрана:
BarChartData содержит один или несколько наборов данных, и каждый набор данных содержит несколько записей.
В этом примере есть только 1 набор данных. Каждая запись данных представляет данные одной страны. Значение x - это индекс страны, а значение y - их коэффициент рождаемости.
Я определил метод transformToBarChartEntry(), который возвращает элемент BarChartDataEntry со значениями x и y из элемента CountryItem.
let dataEntries = items.map{ $0.transformToBarChartDataEntry() }
let set1 = BarChartDataSet(entries: dataEntries)
let data = BarChartData(dataSet: set)
chartView.data = data
После завершения настройки данных в вашем представлении должна появиться простая гистограмма.
BarValueFormatter() - это настраиваемое средство форматирования, которое я пишу, которое округляет значение y, отображаемое на каждой панели, до двух знаков после запятой.
Таблица стилей
Значение оси X
Ось x показывает значение x каждой записи по умолчанию. Чтобы изменить отображаемые значения, используйте IndexAxisValueFormatter(values: ) и предоставьте массив строк, которые вы хотите отобразить на оси x. Я позволил отображать названия стран на метках оси X.
xAxis.valueFormatter = IndexAxisValueFormatter(values: items.map { $0.country })
Но названия стран слишком длинные, чтобы их можно было втиснуть в таблицу без дублирования. Я настраиваю labelRotationAngle так, чтобы их можно было четко прочитать на диаграмме.
xAxis.labelRotationAngle = -25
Значение оси Y
По умолчанию ось Y отображается с обеих сторон, но оси можно отключить.
let rightAxis = chartView.rightAxis rightAxis.enabled = false
Максимальное значение осей может быть установлено выше, чем наибольшее значение x или y, поэтому на диаграмме остается некоторое пространство.
И количество этикеток можно регулировать. Я вручную установил его на 6, чтобы гарантировать, что минимальное и максимальное число будут отображаться на метке оси.
leftAxis.setLabelCount(6, force: true) leftAxis.axisMinimum = 0.0 leftAxis.axisMaximum = 2.5
Лимитная линия
iOS-Charts позволяет добавлять дополнительные линии по обеим осям.
Я добавляю две строки, чтобы показать коэффициент замещения населения и средний коэффициент рождаемости в странах с высоким уровнем дохода.
Создайте объект ChartLimitLine для дополнительной линии и настройте его свойства. Самое главное, не забудьте использовать addLimitLine() для добавления этого ChartLimitLine объекта к оси.
let highIncomeAvg = 1.6 let highIncomeAverageLine = ChartLimitLine() highIncomeAverageLine.limit = highIncomeAvg highIncomeAverageLine.lineColor = .chartAverageColour highIncomeAverageLine.valueTextColor = .chartAverageColour highIncomeAverageLine.label = “Average (High Income): \(highIncomeAvg)” highIncomeAverageLine.labelPosition = .bottomLeft leftAxis.addLimitLine(highIncomeAverageLine)
Смещение обзора карты
Смещение представления диаграммы можно отрегулировать, чтобы оно выглядело лучше.
Я добавляю дополнительные смещения, чтобы все метки оси X полностью отображались в представлении диаграммы.
chartView.setExtraOffsets(left: 10, top: 0, right: 20, bottom: 50)
Вместо этого их можно установить индивидуально. Достигает того же результата.
chartView.extraLeftOffset = 10 chartView.extraTopOffset = 0 chartView.extraRightOffset = 20 chartView.extraBottomOffset = 50
Анимация
Небольшой визуальный эффект делает ваше приложение более привлекательным. iOS-Charts предоставляет широкий спектр предопределенных анимаций для использования при отображении диаграммы.
Используйте animate(), чтобы добавить анимацию к вашей диаграмме.
chartView.animate(yAxisDuration: 1.5 , easingOption: .easeOutBounce)
Руководство по диаграммам для iOS: выделите выбранное значение с помощью настраиваемого маркера
✨ Узнайте, как создать собственный маркер для диаграммы 👇🏻
Использованная литература:
Документация
Смещение маржи графика
Индекс входа
Уровень рождаемости
