colin's 블로그

[swift] - Swift Charts로 직선 그래프 그리기

16 Nov 2023

swift

Swift Charts는 iOS 앱에 그래프를 쉽게 구현할 수 있도록 도와주는 라이브러리입니다. 이번에는 Swift Charts를 사용하여 직선 그래프를 그리는 방법에 대해 알아보겠습니다.

1. Swift Charts 라이브러리 설치하기

먼저 프로젝트에 Swift Charts 라이브러리를 설치해야 합니다. Cocoapods를 사용하신다면 Podfile에 다음과 같이 추가해주세요.

pod 'Charts'

그리고 터미널에서 pod install 명령을 실행해 라이브러리를 설치합니다.

2. 직선 그래프 그리기

직선 그래프를 그리기 위해 다음과 같은 단계를 따릅니다.

2.1. 차트 뷰 생성

import Charts

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

2.2. 데이터 준비

직선 그래프에 표시할 데이터를 준비합니다. 예를 들어, x축에는 시간, y축에는 판매 수량을 나타내는 데이터를 사용한다고 가정해보겠습니다.

let xValues: [Double] = [0, 1, 2, 3, 4, 5] // x축 데이터
let yValues: [Double] = [10, 15, 20, 25, 30, 35] // y축 데이터

var dataEntries: [ChartDataEntry] = []

for i in 0..<xValues.count {
    let dataEntry = ChartDataEntry(x: xValues[i], y: yValues[i])
    dataEntries.append(dataEntry)
}

2.3. 데이터셋 생성

let dataSet = LineChartDataSet(entries: dataEntries, label: "Sales") // 데이터셋 생성
dataSet.colors = [UIColor.blue] // 데이터셋 색상 설정
dataSet.lineWidth = 2.0 // 데이터셋 선 두께 설정

2.4. 데이터셋을 차트에 적용

let data = LineChartData(dataSets: [dataSet]) // 데이터 객체 생성
chartView.data = data // 차트에 데이터 적용

2.5. 차트 스타일 설정

chartView.xAxis.labelPosition = .bottom // x축 라벨 위치 설정
chartView.xAxis.drawGridLinesEnabled = false // x축 그리드 라인 활성화 여부 설정

chartView.leftAxis.drawGridLinesEnabled = false // 왼쪽 y축 그리드 라인 활성화 여부 설정
chartView.rightAxis.enabled = false // 오른쪽 y축 비활성화 설정

chartView.legend.enabled = false // 범례 비활성화 설정

2.6. 차트 화면에 표시

view.addSubview(chartView) 

위의 단계들을 따르면 직선 그래프가 화면에 표시됩니다.

참고 자료

Swift Charts 라이브러리는 다양한 그래프 유형을 지원하고 세부적인 스타일링을 할 수 있는 기능들이 더 있습니다. 공식문서를 참고하여 원하는 그래프를 구현해보세요. Happy coding!