colin's 블로그

[swift] - Swift Charts로 심박수 추이 표시하기

16 Nov 2023

swift

이번에는 Swift Charts 라이브러리를 사용하여 심박수 추이를 표시해 보겠습니다. Swift Charts는 iOS 앱에서 다양한 차트를 생성하기 위해 사용되는 간단하고 빠른 라이브러리입니다.

단계 1: Swift Charts 설치하기

먼저, Swift Charts를 설치해야 합니다. Cocoapods를 사용하여 간단히 설치할 수 있습니다. 프로젝트의 Podfile에 다음 라인을 추가하고, pod install 명령을 실행하여 라이브러리를 설치합니다.

pod 'Charts'

단계 2: 심박수 데이터 준비하기

차트에 표시할 심박수 데이터를 준비해야 합니다. 이 예제에서는 간단하게 배열로 만들어 사용하겠습니다. 아래와 같이 배열을 만들고, 심박수 값을 추가합니다.

let heartRates = [70, 76, 78, 82, 85, 88, 92, 95, 98, 100, 102, 105, 108, 115, 120]

단계 3: Line Chart 생성하기

심박수 데이터를 기반으로 Line Chart를 생성합니다. Line Chart는 시간에 따른 데이터의 추이를 시각적으로 보여줍니다. 아래 코드를 사용하여 Line Chart를 생성합니다.

import Charts

let lineChartView = LineChartView()
view.addSubview(lineChartView)
lineChartView.frame = CGRect(x: 0, y: 0, width: view.frame.width, height: view.frame.height)

var entries = [ChartDataEntry]()
for (i, value) in heartRates.enumerated() {
    let entry = ChartDataEntry(x: Double(i), y: Double(value))
    entries.append(entry)
}

let dataSet = LineChartDataSet(entries: entries, label: "Heart Rate")
let data = LineChartData(dataSet: dataSet)

lineChartView.data = data

위 코드에서는 LineChartView를 생성하고 화면에 추가한 후, heartRates 배열을 순회하면서 ChartDataEntry 객체로 변환하여 entries 배열에 추가합니다. 이후 LineChartDataSet과 LineChartData 객체를 생성하고, 해당 객체를 lineChartView의 data 속성에 할당하여 Line Chart를 표시합니다.

단계 4: 차트 스타일 설정하기

마지막으로, Chart의 스타일을 설정할 수 있습니다. Line Chart의 색상, 축과 라벨의 스타일 등을 커스텀할 수 있습니다. 아래 코드는 Line Chart의 X축과 Y축 라벨, 라인의 색상을 설정하는 예제입니다.

lineChartView.xAxis.labelPosition = .bottom
lineChartView.leftAxis.labelTextColor = .black
lineChartView.leftAxis.axisLineColor = .black
lineChartView.rightAxis.enabled = false

dataSet.colors = [.red]

위 예제에서는 X축 라벨의 위치를 아래로 설정하고, 왼쪽 Y축 라벨과 축의 색상을 검정으로 설정합니다. 또한, 오른쪽 Y축은 표시하지 않도록 설정하고, Line Chart의 라인 색상을 빨간색으로 설정합니다.

결론

이제 Swift Chart를 사용하여 심박수 추이를 시각화하는 방법을 알아보았습니다. Swift Charts는 간단하고 사용하기 쉬운 라이브러리이며, 다양한 차트를 iOS 앱에 통합할 수 있습니다. 추가적인 사용법과 차트 커스터마이징 방법은 공식 문서를 참고하시기 바랍니다.

Swift Charts 문서: https://github.com/danielgindi/Charts