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

안녕하세요 Gons 입니다.

Charts 1편

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

에 이어서

2편 CombinedChartView 타입입니다.

CombinedChartView

이렇게 생겼고요

그래프 2개를 겹쳐서 사용해야할 때 필요할 것 같습니다.

바로 시작하겠습니다.

즐거운 시간 되십시오.

 

 

 

 

 

먼저 깃허브 주소입니다.

https://github.com/danielgindi/Charts

 

 

 

 

 

설치 해주세요.

pod 'Charts

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

 

 

 

 

import 해주세요.

import Charts

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

 

 

 

 

 

 

View 하나 추가해주세요.

Custom Class - CombinedChartView

Custom Class 를 CombinedChartView 로 지정해주세요.

 

 

 

 

 

 

 

아울렛 변수로 만들어 주시고요

@IBOutlet var combinedChartView: CombinedChartView!

 

 

 

 

데이터 배열을 만들어줍니다.

var graphArray: [String] = ["09시", "10시", "11시", "12시", "13시", "14시", "15시", "16시", "17시", "18시"]

let barUnitsSold = [10.0, 17.0, 9.0, 1.0, 8.0, 13.0, 16.0, 14.0, 7.0, 1.0]
let lineUnitsSold = [10.0, 18.0, 7.0, 1.0, 5.0, 15.0, 14.0, 17.0, 7.0, 1.0]

 

 

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

func setChart(dataPoints: [String], barValues: [Double], lineValues: [Double]) {
	// ...
}

 

 

viewDidLoad 같은 곳에서 실행해주세요.

setChart(dataPoints: graphArray, barValues: barUnitsSold, lineValues: lineUnitsSold)

 

 

 

setChart 에 작성해주세요.

// bar, line 엔트리 생성
var barDataEntries: [BarChartDataEntry] = []
var lineDataEntries: [ChartDataEntry] = []
        
// bar, line 엔트리 삽입
for i in 0..<dataPoints.count {
	let barDataEntry = BarChartDataEntry(x: Double(i), y: barValues[i])
	let lineDataEntry = ChartDataEntry(x: Double(i), y: lineValues[i])
	barDataEntries.append(barDataEntry)
	lineDataEntries.append(lineDataEntry)
}

// 데이터셋 생성
let barChartDataSet = BarChartDataSet(entries: barDataEntries, label: "목표 처리량")
let lineChartDataSet = LineChartDataSet(entries: lineDataEntries, label: "실시간 처리량")

bar , line 각각의 데이터셋을 만들어줍니다.

 

 

 

 

 

일단 잘 보일 수 있게 line 색을 변경해주고요

// 라인 원 색깔 변경
lineChartDataSet.colors = [.red ]
lineChartDataSet.circleColors = [.red ]

 

 

 

그래프 데이터를 넣어줍니다.

// 데이터 생성
let data: CombinedChartData = CombinedChartData()

// bar 데이터 지정
data.barData = BarChartData(dataSet: barChartDataSet)
// line 데이터 지정
data.lineData = LineChartData(dataSet: lineChartDataSet)

// 콤비 데이터 지정
combinedChartView.data = data

 

 

 

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

기본 사용법

아주 잘 나오네요.

 

 

 

 

 

속성들을 조금 변경해보겠습니다.

 

 

일단 X축 레이블을 graphArray 로 변경해보겠습니다.

combinedChartView.xAxis.valueFormatter = IndexAxisValueFormatter(values: graphArray)

xAxis.valueFormatter

09시 , 11시 이런식으로 잘 나왔네요

 

 

 

 

라인 굵기를 한번 변경해보겠습니다.

lineChartDataSet.lineWidth = 5.0

 

lineWidth

아주 굵직해졌네요

 

 

 

 

원 구멍 반경도 한번 변경해보겠습니다.

lineChartDataSet.circleHoleRadius = 5.0

circleHoleRadius

안에 흰색 Hole 반경만 커졌죠?

 

 

원을 같은 색으로 꽉채우려면 원 반경도 똑같이 맞춰주면 됩니다.

// 원 반경 (꽉채우려면 홀 반경이랑 똑같게)
lineChartDataSet.circleRadius = 5.0

circleRadius

원이 라인색과 똑같이 채워졌습니다.

 

 

 

지금 라인이 이어지는 저 직선을 곡선으로 변경해보겠습니다.

lineChartDataSet.mode = .cubicBezier

.mode = .cubicBezier

곡선으로 변경됐네요.

 

 

 

마지막으로 애니메이션 한번 넣고 끝내겠습니다.

combinedChartView.animate(xAxisDuration: 2.0, yAxisDuration: 2.0)

animation

보기 좋네요.

 

 

 

 

bar 컬러 , 백그라운드 컬러 변경

X축 레이블 09시,10시,11시 이런식으로 전체 표시

X축 레이블 위치 조정

맥시멈 , 미니멈 지정

리미트 라인 생성

우측 레이블 제거

차트 선택 비활성화

줌 비활성화

는 1편과 동일하기 때문에 코드에만 포함시켜놨습니다.

 

 

 

코드 전체입니다.

import UIKit
import Charts

class ViewController: UIViewController {

    @IBOutlet var combinedChartView: CombinedChartView!
    
    var graphArray: [String] = ["09시", "10시", "11시", "12시", "13시", "14시", "15시", "16시", "17시", "18시"]
    
    let barUnitsSold = [10.0, 17.0, 9.0, 1.0, 8.0, 13.0, 16.0, 14.0, 7.0, 1.0]
    let lineUnitsSold = [10.0, 18.0, 7.0, 1.0, 5.0, 15.0, 14.0, 17.0, 7.0, 1.0]
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        setChart(dataPoints: graphArray, barValues: barUnitsSold, lineValues: lineUnitsSold)
        
    }
    
    
    func setChart(dataPoints: [String], barValues: [Double], lineValues: [Double]) {
        
        // bar, line 엔트리 생성
        var barDataEntries: [BarChartDataEntry] = []
        var lineDataEntries: [ChartDataEntry] = []
        
        // bar, line 엔트리 삽입
        for i in 0..<dataPoints.count {
            let barDataEntry = BarChartDataEntry(x: Double(i), y: barValues[i])
            let lineDataEntry = ChartDataEntry(x: Double(i), y: lineValues[i])
            barDataEntries.append(barDataEntry)
            lineDataEntries.append(lineDataEntry)
        }

        // 데이터셋 생성
        let barChartDataSet = BarChartDataSet(entries: barDataEntries, label: "목표 처리량")
        let lineChartDataSet = LineChartDataSet(entries: lineDataEntries, label: "실시간 처리량")
 
        // 라인 원 색깔 변경
        lineChartDataSet.colors = [.red ]
        lineChartDataSet.circleColors = [.red ]
        
        
        // 데이터 생성
        let data: CombinedChartData = CombinedChartData()
        
        // bar 데이터 지정
        data.barData = BarChartData(dataSet: barChartDataSet)
        // line 데이터 지정
        data.lineData = LineChartData(dataSet: lineChartDataSet)
        
        // 콤비 데이터 지정
        combinedChartView.data = data
        
        // X축 레이블 포맷 ( index -> 실제데이터 )
        combinedChartView.xAxis.valueFormatter = IndexAxisValueFormatter(values: graphArray)


        // 라인 굵기
        lineChartDataSet.lineWidth = 5.0
        
        // 원 구멍 반경
        lineChartDataSet.circleHoleRadius = 5.0

        // 원 반경 (꽉채우려면 홀 반경이랑 똑같게)
        lineChartDataSet.circleRadius = 5.0

        lineChartDataSet.mode = .cubicBezier

        // 기본 애니메이션
        combinedChartView.animate(xAxisDuration: 2.0, yAxisDuration: 2.0)
        // 옵션 애니메이션
        //combinedChartView.animate(xAxisDuration: 2.0, yAxisDuration: 2.0, easingOption: .easeInBounce)
        
        
        // 바 컬러
        barChartDataSet.colors = [.systemBlue ]
        // 백그라운드 컬러
        combinedChartView.backgroundColor = .yellow
        
        // X축 레이블 전체 보이도록 설정 ( 09시, 10시, 11시 ... )
        combinedChartView.xAxis.setLabelCount(graphArray.count, force: true)
        // X축 레이블 위치 조정
        combinedChartView.xAxis.labelPosition = .bottom
        
        
        // 맥시멈
        combinedChartView.leftAxis.axisMaximum = 25
        // 미니멈
        combinedChartView.leftAxis.axisMinimum = -5
        
        
        // 리미트 라인 생성
        combinedChartView.leftAxis.addLimitLine(ChartLimitLine(limit: 10, label: "평균"))
        // 우측 레이블 제거
        combinedChartView.rightAxis.enabled = false

        
        // 차트 선택 안되게
        lineChartDataSet.highlightEnabled = false
        barChartDataSet.highlightEnabled = false
        
        // 줌 안되게
        combinedChartView.doubleTapToZoomEnabled = false
    }

}

 

 

 

 

콤비 차트는 이런식으로 사용하시면 됩니다.

Charts 라이브러리는 원형 그래프라든지 레이더 그래프 등 다양한 타입이 있으니

자유롭게 사용하시면 됩니다.

잘못된 내용이 있으면 댓글로 알려주세요.

바로바로 고치겠습니다.

저는 다음에 더 필요한 정보로 돌아오겠습니다.

감사합니다.