[swift] Swift Charts에서 차트 데이터 축 눈금 설정하기

24 Nov 2023

swift

개요

Swift Charts는 iOS 애플리케이션에서 동적인 차트를 생성하는데 사용되는 인기있는 라이브러리입니다. 이 라이브러리를 사용하면 막대 그래프, 선 그래프, 원 그래프 등 다양한 유형의 차트를 손쉽게 만들 수 있습니다. 그러나 기본적으로 차트의 축 눈금은 자동으로 설정되므로 때로는 우리가 직접 설정해야할 때가 있습니다.

이번 블로그에서는 Swift Charts에서 차트의 데이터 축 눈금을 설정하는 방법에 대해 알아보겠습니다.

코드 예시

import UIKit
import Charts

class ViewController: UIViewController {

    @IBOutlet weak var chartView: BarChartView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        chartView.xAxis.labelPosition = .bottom
        chartView.xAxis.labelTextColor = .black
        chartView.xAxis.labelFont = UIFont.systemFont(ofSize: 12)
        
        chartView.leftAxis.labelTextColor = .black
        chartView.leftAxis.labelFont = UIFont.systemFont(ofSize: 12)
        chartView.leftAxis.axisMinimum = 0
        
        chartView.rightAxis.enabled = false
        
        let entries = [BarChartDataEntry(x: 0, y: 10),
                       BarChartDataEntry(x: 1, y: 20),
                       BarChartDataEntry(x: 2, y: 30),
                       BarChartDataEntry(x: 3, y: 15)]
        
        let set = BarChartDataSet(entries: entries)
        set.colors = [.blue]
        
        let data = BarChartData(dataSet: set)
        chartView.data = data
        
        chartView.animate(xAxisDuration: 2.0, yAxisDuration: 2.0)
    }
}

설명

위 예제 코드에서는 BarChartView를 사용하여 막대 그래프를 생성하고 데이터를 설정하는 방법을 보여줍니다. 여기서 우리는 차트의 축 눈금을 설정하기 위해 몇 가지 속성을 변경합니다.

xAxis를 사용하여 x축의 눈금에 대한 설정을 진행합니다. labelPosition 속성을 .bottom으로 설정하여 눈금 레이블을 아래쪽에 표시하도록 합니다. labelTextColor 속성을 통해 레이블의 텍스트 색상을 변경합니다. labelFont를 사용하여 레이블 폰트를 설정합니다.
leftAxis를 사용하여 y축의 왼쪽 눈금에 대한 설정을 진행합니다. labelTextColor 속성을 통해 레이블의 텍스트 색상을 변경합니다. labelFont를 사용하여 레이블 폰트를 설정합니다. axisMinimum을 0으로 설정하여 y축의 최소값을 0으로 고정합니다.
rightAxis를 사용하여 y축의 오른쪽 눈금을 제거합니다.
BarChartDataEntry를 사용하여 차트의 데이터를 설정합니다. x는 x축의 위치를, y는 바의 높이를 의미합니다.
BarChartDataSet을 사용하여 데이터를 데이터셋으로 묶고, colors 속성을 통해 바의 색상을 설정합니다.
BarChartData를 사용하여 데이터셋을 차트 데이터로 설정합니다.
chartView.data를 통해 차트에 데이터를 적용합니다.
chartView.animate를 통해 차트를 애니메이션화합니다.

결과

위 예제 코드를 실행하면 아래와 같은 결과를 확인할 수 있습니다.

차트 결과

결론

Swift Charts를 사용하여 차트를 생성하고 데이터 축 눈금을 설정하는 방법에 대해 알아보았습니다. xAxis와 leftAxis를 사용하여 각 축의 눈금을 원하는대로 조정할 수 있습니다. 이를 통해 차트를 더욱 직관적으로 만들 수 있습니다.

더 자세한 내용은 Swift Charts 공식 문서를 참조하시기 바랍니다.