Swift Charts 숫자(값) 표시 바꾸기 (Formatter)

2022.11.03 - [iOS개발/Swift 기능] - Swift Charts 를 이용해 그래프 그리기

Swift Charts 를 이용해 그래프 그리기

이번 포스트는 위 포스트와 내용이 연결됨을 알려드립니다.

 

그래프를 하다보면 y축 이나 점위의 수치 표시를 원하는 문구로 바꾸고 싶으실때가 있을꺼에요. 

예를 들면 아래처럼 y축을 원하는 "글자(String)"으로 표기해야 할 경우가 있습니다.

y축이 숫자가 아니라 글자인게 보이시나요?

 

그럴때는 Formatter 라는 걸 사용해 표시합니다. 

(참고로 Formatter 종류가 여러가지가 있기 때문에 필요하신 걸로 만들어 사용하시면 됩니다.)

 

이 글에서는 y축 과 저기 그래프 점 위의 숫자를 원하는 형식으로 바꿔주는 Formatter를 만들어볼께요.

전체적인 순서는 간단합니다.

1. Formatter 를 만들고 

2. 설정에서 적용해주면 끝

 

그럼 시작해볼까요?

1. y축 Formatter

1-1 Formatter 만들기 

- 식 자체는 굉장히 간단합니다.

import Charts

final class MyCustomYLabelFormatter : AxisValueFormatter{
    func stringForValue(_ value : Double, axis : AxisBase?) -> String {
        // value 는 데이터 값이라고 생각하시면 됩니다.
        if(value >= 100){
            return "매우 만족"
        }else if(value >= 80){
            return "만족"
        }else if(value >= 60){
            return "보통"
        }else if(value >= 40){
            return "불만"
        }else if(value >= 20){
            return "매우 불만"
        }
        return "미응답"
    }
}

 

1-2 Formatter 적용하기 

- lineChartView : 여러분들이 만든 그래프를 넣어주시면 됩니다. 

lineChartView.leftAxis.valueFormatter = MyCustomYLabelFormatter()// 포맷 적용
lineChartView.leftAxis.labelFont = .systemFont(ofSize: 20)// 이거는 글자 사이즈 조절하는 겁니다.

y축 글자가 잘 보이시나요?

* 참고로 글자 조절하다가 글자가 짤리시는 분들은 아래 부분에 있는 것들이 추가 설정되있는지 확인해주세요.

//lineChartView.setViewPortOffsets(left: 32, top: 20, right: 32, bottom: 20)
//꼭 필요한 경우가 아니시면 위 기능은 사용안하시는걸 추천드립니다.
lineChartView.leftAxis.axisMinimum = 0 // y축 최소 수치
lineChartView.leftAxis.axisMaximum = 110 // y 축 최대 수치 (넉넉히 잡아야 안짤립니다.)

생각보다 간단하죠? 

 

2. 값 표시 Formatter

- 그래프 점 위에 작은 숫자를 저희가 원하는 형태로 나타내볼께요.

- 아래 속성이 True 여야 값이 보입니다. 주의해주세요.

lineChartView.lineData?.setDrawValues(true)

 

2-1 Formatter 만들기 

- 그냥 간단히 정수로 표현하고 싶으신 분들은 NumberFormatter 를 사용하셔도 됩니다.

final class graphValueFormatter : ValueFormatter{
    func stringForValue(_ value: Double, entry: Charts.ChartDataEntry, dataSetIndex: Int, viewPortHandler: Charts.ViewPortHandler?) -> String {
        let num = Int(value)
        return String(num) + "%"
    }
}

 

2-2 Formatter 적용하기 

- lineChartView : 여러분들이 만든 그래프를 넣어주시면 됩니다. 

let pFormatter = graphValueFormatter()
lineChartView.lineData?.setValueFormatter(pFormatter)// 포맷 설정
lineChartView.lineData?.setValueFont(.systemFont(ofSize: 20))// 값 표시 폰트입니다.

 

점 위 글자가 달라진게 보이시나요?

참고로 그냥 간단하게 숫자를 표현하고 싶으신 분들은 따로 만들지 않고 아래처럼 하실수도 있습니다. (NumberFormatter)

let pFormatter = NumberFormatter()
lineChartView.lineData?.setValueFormatter(DefaultValueFormatter(formatter: pFormatter))

간단하죠?

 

 

그래프를 하다 보니까 이 부분에 대한 건 찾긴 어려운데 

한번 해보면 상당히 간단하더라고요.

 

저처럼 이 부분에 대해 찾는 분들에게 

도움이 되길 바라며 추가해 봅니다. 

 

오늘도 파이팅입니다.