colin's 블로그

[swift] - Swift Charts로 센서 데이터 표시하기

16 Nov 2023

swift

많은 모바일 앱은 센서 데이터를 수집하고 표시하는 기능을 제공합니다. 이번 튜토리얼에서는 Swift Charts 라이브러리를 사용하여 센서 데이터를 효과적으로 표시하는 방법에 대해 설명하겠습니다.

필요한 라이브러리 설치하기

Swift Charts는 CocoaPods을 통해 손쉽게 설치할 수 있습니다. Podfile 파일에 아래와 같이 추가해주세요.

platform :ios, '9.0'
use_frameworks!

target 'YourApp' do
    pod 'Charts'
end

터미널에서 pod install 명령어를 실행하여 라이브러리를 다운로드하세요.

센서 데이터 준비하기

테스트를 위해 가상의 센서 데이터를 생성해보겠습니다. 우선 SensorData 클래스를 생성하고, 다음과 같이 속성을 추가합니다.

class SensorData {
    var timestamp: Date
    var value: Double
    
    init(timestamp: Date, value: Double) {
        self.timestamp = timestamp
        self.value = value
    }
}

이제 센서 데이터 배열을 생성하고 여러 개의 SensorData 객체를 추가해보겠습니다.

var sensorDataArray = [SensorData]()

let formatter = DateFormatter()
formatter.dateFormat = "yyyy-MM-dd HH:mm:ss"

// 가상의 센서 데이터 생성
for i in 1...10 {
    let timestamp = formatter.date(from: "2020-01-01 10:\(i):00")
    let value = Double(arc4random_uniform(10))
    
    let sensorData = SensorData(timestamp: timestamp!, value: value)
    sensorDataArray.append(sensorData)
}

차트 생성하기

이제 차트를 생성하고 센서 데이터를 표시해봅시다. 먼저 LineChartView 인스턴스를 생성합니다.

import Charts

// 차트 뷰 생성
let chartView = LineChartView(frame: CGRect(x: 0, y: 0, width: 300, height: 300))

다음으로 차트의 데이터 세트를 생성합니다.

var entries = [ChartDataEntry]()

for i in 0..<sensorDataArray.count {
    let sensorData = sensorDataArray[i]
    let entry = ChartDataEntry(x: Double(i), y: sensorData.value)
    entries.append(entry)
}

let dataSet = LineChartDataSet(entries: entries, label: "Sensor Data")

이제 차트의 스타일을 설정해봅시다.

dataSet.lineWidth = 2
dataSet.circleRadius = 4
dataSet.circleHoleRadius = 2
dataSet.setColor(.blue)

마지막으로 차트에 데이터를 추가하고, 차트를 화면에 표시합니다.

let data = LineChartData(dataSet: dataSet)
chartView.data = data

결과 확인하기

이제 앱을 실행하여 차트를 확인해보세요. 가상의 센서 데이터가 차트에 잘 표시되는 것을 확인할 수 있을 것입니다.

sensor_chart

참고 자료

Swift Charts GitHub 리포지토리

위에 나열된 사이트는 소개 목적을 가지고 있으며 해당 사이트의 내용과 경험은 저희와 무관합니다. 저희 회사는 해당 리포지토리와 어떠한 소유권도 공유하지 않습니다.