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

안녕하세요.

 

저번에 xcode14 로 업데이트 이후 Charts에서 버그 나는 걸 올렸는데 

정작 Charts 를 어떻게 쓰는건지 글을 쓴적이 없더라고요.

 

그래서 이번엔 Charts 를 어떻게 쓰는지 간단히 정리해보고자 합니다. 

 

그전에 파일 설치 하시다가 오류 나시는 분들이 계시다면 아래글을 참고해주세요!

https://world-of-larooly.tistory.com/10

Xcode 14 pod Charts 버그

 

pod 또는 package 로 이미 Charts 를 추가 하셨다고 생각하고 시작하겠습니다. 

*잘 추가 되었으면 import Charts 해도 오류가 안날꺼에요.*

 

Charts 는 기본적으로 특정값을 넣으면 그걸 이용해 그래프를 그려주는 기능을 가지고 있어요.

물론 처음에 볼때는 복잡해 보일수있지만 천천히 해봅시다. 

 

1. 화면에 그래프 자리 만들어 주기 

일단 화면 어디에 보이게 할건지 정해야겠죠?

일단 StoryBoard (Main)으로 가서 보여질 화면에 

UIView 를 원하는 곳에 넣어주세요. 

원하시는 곳에 예쁘게 자리를 잡아주세요

저는 이제 2가지 그래프를 그릴꺼라 2개를 추가했고 하나만 하실 분들은 하나만 만들어주시면 됩니다. 

 

그다음 만들어주신 뷰를 클릭해서 아래 사진 처럼 속성을 바꿔주세요. 

만약  저게 안뜨시는 분들은 Charts 가 제대로 추가 안되있을 확률이 높으니 주의해주세요.

이거는 막대그래프 용입니다.

이거는 선 그래프입니다.

이름 보시고 눈치채신 분들이 많으실 것 같은데

BarChartView : 막대 그래프 

LineChartView : 선 그래프

를 의미합니다. 둘 중에 필요하신걸 선택해서 추가해주세요. 

 

2. 데이터 연결하기 

이제 들어갈 자리가 생겼으니 데이터를 넣어봅시다.

저희는 넣을 데이터가 없으니 스스로 만들어서 넣어줍시다. 

물론 그전에 스토리보드에서 만든 저 View 를 연결 해주시고 해봅시다. 

 

2-1 막대 그래프 그리기 

완성된 막대그래프입니다.

import UIKit
import Charts // 반드시 해주셔야합니다!!!!!

class ViewController: UIViewController {

    @IBOutlet weak var barChartView: BarChartView! // 아까 그 뷰랑 연결해주시면 됩니다.
    var chartMonth : [String] = []
    var chartYValue : [Float] = []
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        chartMonth = ["3월 2일","3월 3일","3월 4일","3월 5일","3월 6일","3월 2일","3월 3일","3월 4일","3월 5일","30월 60일"]
        chartYValue = [10.0,50.0,30.0,90.0,20.0,10.0,50.0,30.0,90.0,20.0]
        
        //데이터가 없을때 보여줄 글자를 말합니다.
        barChartView.noDataText = "죄송해요,\n문제가 생겼어요."
        barChartView.noDataTextColor = .black
        barChartView.noDataFont = .systemFont(ofSize: 24)
        
        setBarChart(dataPoints: chartMonth, values: chartYValue)
        
//      barChartView.backgroundColor = UIColor.white
    }
    
    func setBarChart(dataPoints: [String], values:[Float]){
        var dataEntities : [BarChartDataEntry] = []
        for i in 0..<dataPoints.count {
            let dataEntry = BarChartDataEntry(x: Double(i), y: Double(values[i]))
            
            dataEntities.append(dataEntry)
        }
        let chartDataSet = BarChartDataSet(entries: dataEntities)
        //해당 정보값을 표기할 색상
        chartDataSet.colors = [UIColor.systemMint]
        chartDataSet.drawValuesEnabled = false // 위 쪽 표기 없애기

        //줌안되게
        chartDataSet.highlightEnabled = false
        barChartView.doubleTapToZoomEnabled = false
        //
        
        //데이터 삽입
        let chartData = BarChartData(dataSet: chartDataSet)
        barChartView.data = chartData
        
//        barChartView.leftAxis.drawLabelsEnabled = false// 하면 좌측 숫자가 사라짐
        barChartView.xAxis.drawGridLinesEnabled = false // 세로 선이 사라짐
        barChartView.legend.enabled = false // 무슨뜻인지 표기하는거 없애기
        
        barChartView.xAxis.labelPosition = .bottom //하단에 x 축 표시
        barChartView.xAxis.valueFormatter = IndexAxisValueFormatter(values: chartMonth) //x축 값들 (데이터)
        barChartView.xAxis.granularity = 1

        barChartView.xAxis.setLabelCount(dataPoints.count, force: false)// 이거 순수 그 x축 표기만 의미한다 (막대기 X)
        barChartView.rightAxis.enabled = false // 오른쪽 값 삭제
        
        barChartView.leftAxis.axisMinimum = 0 // y축 최소값
        barChartView.leftAxis.axisMaximum = 100 // y축 최대값
        barChartView.leftAxis.axisLineColor = .clear // y축 선 색깔 
        barChartView.barData?.barWidth = 0.4 //막대 얇게

    }

}

저 같은 경우에는 심플하게 그리는 걸 좋아해서 기능을 대부분 빼거나 Off 해서 저런 간단한 모양이 나온 건데 

제 코드에서 일부를 변형하시면 더 다양한 모양으로 그릴수 있으니 (색이라던지 보조선이라던지)

주석을 참고해서 원하시는 형태로 바꾸시는걸 추천 드립니다.

 

2-2 선그래프

완성된 선 그래프입니다.

import UIKit
import Charts

class ViewController: UIViewController {

    var chartMonth : [String] = []
    var chartYValue : [Float] = []
    @IBOutlet weak var lineChartView: LineChartView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        chartMonth = ["3월 2일","3월 3일","3월 4일","3월 5일","3월 6일","3월 2일","3월 3일","3월 4일","3월 5일","3월 6일"]
        chartYValue = [10.0,50.0,30.0,90.0,20.0,10.0,50.0,30.0,90.0,20.0]
        
        lineChartView.noDataText = "죄송해요,\n문제가 생겼어요."
        lineChartView.noDataTextColor = .black
        lineChartView.noDataFont = .systemFont(ofSize: 24)
        
        setLineChart(dataPoints: chartMonth, values: chartYValue)
        
    }
    
    func setLineChart(dataPoints: [String], values:[Float]){
        var dataEntities : [ChartDataEntry] = []
        for i in 0..<dataPoints.count {
            let value = ChartDataEntry(x: Double(i), y: Double(values[i]))
            dataEntities.append(value)
        }
        let line1 = LineChartDataSet(entries: dataEntities, label: "Number")
        line1.colors = [UIColor.green,UIColor.blue,UIColor.purple]
        
        line1.circleHoleRadius = 0
        line1.circleRadius = 3// 동그라미 크기
        line1.circleColors = [UIColor.red,UIColor.yellow]
        
        line1.drawValuesEnabled = false
        
        let lindata = LineChartData(dataSet: line1)
        lineChartView.data = lindata
        lineChartView.xAxis.drawGridLinesEnabled = false // 세로 선이 사라짐 (우리 이거써야함)
        lineChartView.legend.enabled = false // 무슨뜻인지 표기하는거 없애기
        lineChartView.doubleTapToZoomEnabled = false
        
        lineChartView.xAxis.labelPosition = .bottom //x축 표기 아래로
        lineChartView.xAxis.valueFormatter = IndexAxisValueFormatter(values: chartMonth) //x축 데이터 넣기
        lineChartView.xAxis.granularity = 1 // 간격 맞추기
        
        lineChartView.xAxis.setLabelCount(dataPoints.count, force: false)// 이거 순수 그 x축 표기만 의미한다 (막대기 X)
        
        lineChartView.rightAxis.enabled = false // 오른쪽 값 삭제
        lineChartView.leftAxis.axisMinimum = 0 // y축 최소 수치
        lineChartView.leftAxis.axisMaximum = 100 // Z 축 최소 수치
        lineChartView.leftAxis.axisLineColor = .clear // y축 맨 왼쪽 선 색깔
        
        lineChartView.leftAxis.labelCount = 5 // - y 갯수
        lineChartView.leftAxis.xOffset = 16.0// y축 선 과 글자 사이
        lineChartView.xAxis.yOffset = 4 //x축 선 과 글자 사이
        lineChartView.xAxis.labelFont = UIFont.systemFont(ofSize: 12)
        
        lineChartView.setVisibleXRange(minXRange: 0.0, maxXRange: 4.0)// 현 면에 몇개나?
        
        lineChartView.xAxis.axisMinimum = -0.3 // 시작지점 살짝 여백 만들기
        
        lineChartView.setViewPortOffsets(left: 32, top: 20, right: 32, bottom: 20)
        lineChartView.scaleYEnabled = false // 위아래 스크롤
        lineChartView.scaleXEnabled = true // 좌우 스크롤
        
        
    }
}

참고로 색깔 넣는 곳에 여러 색을 넣으면 저렇게 알록달록(?) 하게 선을 그릴수있습니다. 

아까와 같이 주석을 참고해서 원하시는 형태로 바꾸시는걸 추천 드립니다.

 

2-3 데이터가 없으면?

참고로 데이터 셋팅을 안하시면 아래처럼 출력되게 됩니다. 

데이터가 없을 경우 뷰에 보이는 화면

barChartView.noDataText = "죄송해요,\n문제가 생겼어요."
barChartView.noDataTextColor = .black
barChartView.noDataFont = .systemFont(ofSize: 24)

데이터를 설정하지 않을 경우 어떤 화면이 보이게 해줄지 도와주는 기능을 하는 부분이니 

필요하신 분들은 참고해주시길 바랍니다. 

 

* 참고로 글자가 짤리시거나 이상하신 분들은 아래 부분은 빼고 해주세요. *

- 저의 경우 레이아웃을 강제로 정해진 사이즈에 맞추기 위해 넣은 겁니다!!!

- 수정 2023.01.09

lineChartView.setViewPortOffsets(left: 32, top: 20, right: 32, bottom: 20)

 

참고로 y축이나 그래프 위에있는 값 수치를 다르게 표시하고 싶으신 분들은 아래를 참고해 주시길 바랍니다.

2023.01.09 - [iOS개발/Swift 기능] - Swift Charts 숫자(값) 표시 바꾸기 (Formatter)

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

 

 

해메시는 분들에게 도움이 되셨으면 하는 마음에서 올려봅니다.

오늘도 파이팅입니다.