colin's 블로그

[swift] - Swift Charts로 식습관 데이터 시각화하기

16 Nov 2023

swift

Swift Charts는 iOS 애플리케이션에서 데이터를 시각화하는 데 사용되는 강력한 라이브러리입니다. 이 라이브러리를 사용하면 막대 그래프, 선 그래프, 원 그래프 등 다양한 형식의 차트를 손쉽게 만들 수 있습니다. 이번 블로그 포스트에서는 Swift Charts를 사용하여 식습관 데이터를 시각화하는 방법을 알아보겠습니다.

1. Swift Charts 라이브러리 추가하기

먼저, 프로젝트에 Swift Charts 라이브러리를 추가해야 합니다. Cocoapods를 사용한다면 Podfile에 다음과 같이 라이브러리를 추가하고 pod install 명령어를 실행하여 라이브러리를 다운로드 받습니다.

    pod 'Charts'

만약 Cocoapods를 사용하지 않는다면, Swift Charts의 공식 GitHub 저장소에서 직접 소스 코드를 다운로드하고 프로젝트에 추가합니다.

2. 차트 초기화하기

데이터를 시각화하기 위해 차트를 초기화합니다. ViewController.swift 파일에 다음과 같은 코드를 추가합니다.

    import UIKit
    import Charts

    class ViewController: UIViewController {

        @IBOutlet weak var chartView: BarChartView!
        
        override func viewDidLoad() {
            super.viewDidLoad()
            // 차트 설정
            chartView.chartDescription?.text = "식습관 데이터"
            
        }
    }

위 코드에서 BarChartView는 막대 그래프를 그리기 위한 차트 뷰입니다. chartView 아울렛 변수는 Storyboard에서 생성한 차트 뷰와 연결됩니다.

3. 데이터 준비하기

식습관 데이터를 시각화하기 위해 필요한 데이터를 준비합니다. 이 예제에서는 하루에 섭취한 음식의 종류와 해당 음식의 칼로리를 사용할 것입니다.

    let foodLabels = ["아침", "점심", "저녁"]
    let calorieData = [300, 600, 400]

위 코드에서 foodLabels는 음식의 종류를 나타내는 레이블이고, calorieData는 해당 음식의 칼로리를 나타냅니다. 여기서는 간단히 [아침, 점심, 저녁]과 [300, 600, 400] 데이터를 사용하였습니다.

4. 차트 그리기

데이터를 준비한 후, 해당 데이터를 사용하여 차트를 그립니다. viewDidLoad 메서드에 다음 코드를 추가합니다.

    func setChart(dataPoints: [String], values: [Double]) {
        var dataEntries: [BarChartDataEntry] = []
        
        for i in 0..<dataPoints.count {
            let dataEntry = BarChartDataEntry(x: Double(i), yValues: [values[i]])
            dataEntries.append(dataEntry)
        }
        
        let chartDataSet = BarChartDataSet(entries: dataEntries)
        let chartData = BarChartData(dataSets: [chartDataSet])
        
        chartView.data = chartData
    }

위 코드에서 setChart 메서드는 데이터를 사용하여 차트를 그리기 위한 함수입니다. 데이터 포인트와 해당 값들이 dataPoints와 values 매개변수로 전달됩니다. 이 메서드는 dataEntries 배열에 BarChartDataEntry 객체를 생성한 후, chartDataSet과 chartData에 대입합니다. 마지막으로, chartView.data에 chartData를 대입하여 차트를 설정합니다.

이제, viewDidLoad 메서드에 다음 코드를 추가하여 식습관 데이터를 시각화합니다.

    setChart(dataPoints: foodLabels, values: calorieData)

5. 결과 확인하기

앱을 실행하면 아침, 점심, 저녁에 해당하는 막대 그래프가 생성됩니다. 그래프는 x축이 음식 종류를, y축이 해당 음식의 칼로리를 나타냅니다.

이로써 Swift Charts를 사용하여 식습관 데이터를 시각화하는 방법을 알아보았습니다. Swift Charts를 사용하면 손쉽게 데이터를 시각화할 수 있어, 앱 사용자들에게 쉽게 정보를 전달할 수 있습니다.

참고 자료

Swift Charts GitHub 저장소