colin's 블로그

[swift] - Swift Charts로 시간대 별 데이터 표시하기

16 Nov 2023

swift

소개

이번에는 Swift Charts 라이브러리를 사용하여 시간대별 데이터를 표시하는 방법에 대해 알아보겠습니다. Swift Charts는 iOS 애플리케이션에서 간편하게 그래프를 그릴 수 있는 오픈 소스 라이브러리입니다.

준비 작업

먼저, Swift Charts 라이브러리를 프로젝트에 추가해야 합니다. CocoaPods를 사용하여 설치할 수 있습니다.

pod 'Charts'

설치가 완료되면, 프로젝트 파일을 열고, Chart를 그릴 뷰 컨트롤러에 import 문을 추가해주세요.

import Charts

데이터 준비하기

이 예제에서는 시간대 별 데이터를 표시하기 위해, 시간대와 연관된 값을 저장하는 TimeChartData 클래스를 만들겠습니다. 다음은 예시입니다.

class TimeChartData {
    let time: String
    let value: Double
    
    init(time: String, value: Double) {
        self.time = time
        self.value = value
    }
}

그리고, 시간대 별 데이터를 저장하는 배열을 만들어줍니다.

let chartData = [
    TimeChartData(time: "9AM", value: 30),
    TimeChartData(time: "10AM", value: 50),
    TimeChartData(time: "11AM", value: 40),
    TimeChartData(time: "12PM", value: 70),
    TimeChartData(time: "1PM", value: 60)
]

그래프 그리기

이제 그래프를 그리기 위해 LineChartView를 만들어줍니다.

let lineChartView = LineChartView(frame: CGRect(x: 0, y: 0, width: 300, height: 200))

뷰에 그래프를 추가하고, 데이터를 설정해줍니다.

view.addSubview(lineChartView)

var chartEntries = [ChartDataEntry]()
for (index, data) in chartData.enumerated() {
    chartEntries.append(ChartDataEntry(x: Double(index), y: data.value))
}

let chartDataSet = LineChartDataSet(entries: chartEntries, label: "시간대별 데이터")
let chartData = LineChartData(dataSet: chartDataSet)

lineChartView.data = chartData

마지막으로, 그래프의 스타일을 임의로 변경해줄 수 있습니다.

chartDataSet.colors = [UIColor.blue]
chartDataSet.circleColors = [UIColor.blue]
chartDataSet.circleHoleColor = UIColor.white
chartDataSet.drawFilledEnabled = true
chartDataSet.fillAlpha = 0.5

실행 결과

위의 코드를 실행하면, 시간대 별 데이터를 간단한 선 그래프로 나타낼 수 있습니다.

chart

결론

Swift Charts 라이브러리를 사용하여 시간대 별 데이터를 그래프로 표시하는 방법에 대해 알아보았습니다. 이러한 그래프는 데이터의 변화를 한눈에 파악할 수 있어 유용합니다. Swift Charts 라이브러리를 사용하여 다양한 그래프를 그려보세요!