iOS Swift 라이브러리 Charts 1. (BarChartView)

안녕하세요 Gons 입니다.

오늘은 그래프를 사용해보겠습니다.

Xcode 기본 라이브러리로 ProgressView 가 있긴 한데요

ProgressView

보시다시피 이런식으로 생겼고 세로도 안되고 크기도 못바꾸고

Graph 로 활용하려면 여러개를 만들어야하고 생각도 하기 싫네요.

 

 

 

 

그래서 사용해볼 라이브러리가 바로 Charts 입니다.

 

Charts

기본적으로 이렇게 생겼고, 원형그래프라든지 다양한 타입으로 커스텀이 가능합니다.

사용하기도 쉽습니다.

시작할게요.

 

 

 

 

 

 

 

 

 

우리가 사용할 라이브러리 주소입니다.

https://github.com/danielgindi/Charts

 

 

 

 

 

설치해주시고요.

pod 'Charts'

※ 설치방법을 모르시면 이전 포스팅 코코아팟 설치 방법을 보고 와주세요.

 

 

 

 

import 도 해주세요.

import Charts

※ 여기서 import 에 Charts가 안뜨시는분은 커맨드⌘ + B 를 눌러서 한번 빌드하신 후에 진행해주세요.

 

 

 

 

 

스토리보드에서 View 를 하나 넣으시고 ( 잘 보이게 회색으로 했습니다. )

Custom Class - BarChartView

Custom Class 에 BarChartView 라고 넣어주세요.

(사용법을 익히고 LineChartView, PieChartView 등 다양한 타입을 사용해보세요.)

 

 

 

 

 

 

 

아울렛 변수로 만들어주세요.

@IBOutlet var barChartView: BarChartView!

 

 

차트 데이터로 쓸 배열 만들어주고요.

var months: [String]!
var unitsSold: [Double]!

 

 

viewDidLoad 에 데이터를 넣어주세요.

months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
unitsSold = [20.0, 4.0, 6.0, 3.0, 12.0, 16.0, 4.0, 18.0, 2.0, 4.0, 5.0, 4.0]

 

 

데이터가 없을 때 보일 문구는 이렇게 씁니다.

barChartView.noDataText = "데이터가 없습니다."
barChartView.noDataFont = .systemFont(ofSize: 20)
barChartView.noDataTextColor = .lightGray

 

 

자 여기까지만 하고 한번 보겠습니다.

데이터 없을 경우.

아주 잘 나오네요.

 

 

 

그럼 본격적으로 데이터를 삽입해보겠습니다.

 

 

매서드를 하나 만들어주시고요

func setChart(dataPoints: [String], values: [Double]) {

}

 

 

뷰디드로드에서 실행시켜주세요

setChart(dataPoints: months, values: unitsSold)

 

 

 

이렇게 해놓고 시작하겠습니다.

import UIKit
import Charts

class ViewController: UIViewController {

    @IBOutlet var barChartView: BarChartView!
    
    var months: [String]!
    var unitsSold: [Double]!
    
    override func viewDidLoad() {
        super.viewDidLoad()


        months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
        unitsSold = [20.0, 4.0, 6.0, 3.0, 12.0, 16.0, 4.0, 18.0, 2.0, 4.0, 5.0, 4.0]
                
        
        barChartView.noDataText = "데이터가 없습니다."
        barChartView.noDataFont = .systemFont(ofSize: 20)
        barChartView.noDataTextColor = .lightGray
        
        setChart(dataPoints: months, values: unitsSold)
    }
        
    func setChart(dataPoints: [String], values: [Double]) {
    	// 여기서부터 작성할게요.
    }
    
}

 

 

setChart 매서드 안에 쓰는겁니다.

// 데이터 생성
var dataEntries: [BarChartDataEntry] = []
for i in 0..<dataPoints.count {
	let dataEntry = BarChartDataEntry(x: Double(i), y: values[i])
	dataEntries.append(dataEntry)
}

let chartDataSet = BarChartDataSet(entries: dataEntries, label: "판매량")

// 차트 컬러
chartDataSet.colors = [.systemBlue]

// 데이터 삽입
let chartData = BarChartData(dataSet: chartDataSet)
barChartView.data = chartData

이렇게 하면 데이터를 넣어준겁니다. 한번 실행해보겠습니다.

아주 잘 나오네요.

 

 

 

 

지금은 막대가 선택 되거나 두번 터치하면 확대가 됩니다.

그런게 싫으시다면

// 선택 안되게
chartDataSet.highlightEnabled = false
// 줌 안되게
barChartView.doubleTapToZoomEnabled = false

이렇게 작성해주세요. 그러면 터치 안된답니다.

( 델리게이트 받아서 선택시 이벤트도 처리할 수 있습니다. 깃허브 참조 )

 

 

 

 

 

 

 

지금은 X축이 0,1,2,3,4 인덱스로 나오는데 우리가 만든 데이터로 해야겠죠?

// X축 레이블 위치 조정
barChartView.xAxis.labelPosition = .bottom
// X축 레이블 포맷 지정
barChartView.xAxis.valueFormatter = IndexAxisValueFormatter(values: months)

이렇게 작성해서 X축 레이블과 위치를 조정합니다.

 

한번 볼까요?

xAxis 조정

X축 레이블이 실제 우리 데이터로 나오고 위치도 하단으로 이동 됐죠?

근데 Jan , Mar , May 이런식으로 띄엄띄엄 나옵니다.

모두 표시하고 싶다면

// X축 레이블 갯수 최대로 설정 (이 코드 안쓸 시 Jan Mar May 이런식으로 띄엄띄엄 조금만 나옴)
barChartView.xAxis.setLabelCount(dataPoints.count, force: false)

이렇게 써줍니다. 그러면 X축 레이블이 전체 표시됩니다.

xAxis.setLabelCount

 

 

 

 

오른쪽 레이블을 없앨 수도 있습니다.

// 오른쪽 레이블 제거
barChartView.rightAxis.enabled = false

rightAxis.enabled = false

 

 

 

 

 

 

애니메이션을 줄 수도 있습니다.

//기본 애니메이션
barChartView.animate(xAxisDuration: 2.0, yAxisDuration: 2.0)
//옵션 애니메이션
//barChartView.animate(xAxisDuration: 2.0, yAxisDuration: 2.0, easingOption: .easeInBounce)

animation

 

 

 

 

 

 

리미트 라인도 줄 수 있습니다.

// 리미트라인
let ll = ChartLimitLine(limit: 10.0, label: "타겟")
barChartView.leftAxis.addLimitLine(ll)

LimitLine

 

 

 

 

 

 

 

 

맥시멈, 미니멈 도 설정할 수 있습니다.

// 맥시멈
barChartView.leftAxis.axisMaximum = 30
// 미니멈
barChartView.leftAxis.axisMinimum = -10

Maximum , Minimum

 

 

 

 

 

백그라운드 컬러도 변경할 수 있고요

barChartView.backgroundColor = .yellow

backgroundColor

 

 

 

 

 

 

끝

전체 코드입니다.

import UIKit
import Charts

class ViewController: UIViewController {

    @IBOutlet var barChartView: BarChartView!
    
    var months: [String]!
    var unitsSold: [Double]!
    
    override func viewDidLoad() {
        super.viewDidLoad()

        months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
        unitsSold = [20.0, 4.0, 6.0, 3.0, 12.0, 16.0, 4.0, 18.0, 2.0, 4.0, 5.0, 4.0]
               
        barChartView.noDataText = "데이터가 없습니다."
        barChartView.noDataFont = .systemFont(ofSize: 20)
        barChartView.noDataTextColor = .lightGray
        
        setChart(dataPoints: months, values: unitsSold)
    }
    
    func setChart(dataPoints: [String], values: [Double]) {
        
        // 데이터 생성
        var dataEntries: [BarChartDataEntry] = []
        for i in 0..<dataPoints.count {
            let dataEntry = BarChartDataEntry(x: Double(i), y: values[i])
            dataEntries.append(dataEntry)
        }
        
        let chartDataSet = BarChartDataSet(entries: dataEntries, label: "판매량")
        
        // 차트 컬러
        chartDataSet.colors = [.systemBlue]
        
        // 데이터 삽입
        let chartData = BarChartData(dataSet: chartDataSet)
        barChartView.data = chartData
        
        
        // 선택 안되게
        chartDataSet.highlightEnabled = false
        // 줌 안되게
        barChartView.doubleTapToZoomEnabled = false


        // X축 레이블 위치 조정
        barChartView.xAxis.labelPosition = .bottom
        // X축 레이블 포맷 지정
        barChartView.xAxis.valueFormatter = IndexAxisValueFormatter(values: months)

        
        // X축 레이블 갯수 최대로 설정 (이 코드 안쓸 시 Jan Mar May 이런식으로 띄엄띄엄 조금만 나옴)
        barChartView.xAxis.setLabelCount(dataPoints.count, force: false)
        
        // 오른쪽 레이블 제거
        barChartView.rightAxis.enabled = false
        
        // 기본 애니메이션
        barChartView.animate(xAxisDuration: 2.0, yAxisDuration: 2.0)
        // 옵션 애니메이션
        //barChartView.animate(xAxisDuration: 2.0, yAxisDuration: 2.0, easingOption: .easeInBounce)


        // 리미트라인
        let ll = ChartLimitLine(limit: 10.0, label: "타겟")
        barChartView.leftAxis.addLimitLine(ll)


        // 맥시멈
        barChartView.leftAxis.axisMaximum = 30
        // 미니멈
        barChartView.leftAxis.axisMinimum = -10

        
        // 백그라운드컬러
        barChartView.backgroundColor = .yellow
        
    }
}

 

 

 

 

 

 

 

 

자 이렇게 해서 기본 사용법을 알아봤습니다.

Chart 는 그래프가 필요하신 분들에게 정말 유용한 라이브러리인데요.

 

너무 길게 써서 보기 힘드셨을지 모르겠습니다.

다음부터는 더 간결하게 쓰겠습니다.

긴 글 읽어주셔서 감사합니다!

 

오늘 해본거는 BarChartView 타입이었고요,

다음편은 CombinedChartView 타입입니다.

iOS Swift 라이브러리 Charts 2. (CombinedChartView)

감사합니다.