Swift Charts 한 표 안에 다수의 그래프 그리기

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

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

이번 글은 위의 글에 나온 내용을 응용한 버전이라고 생각하시면 됩니다. 

따라서 처음하시는 분들은 위 글을 참고해주시길 바랍니다. 

 

하나의 표에 하나의 그래프만 들어가면 좋겠지만 

여러 개를 넣어야만 하는 경우도 있죠......

 

저의 경우에는 하나의 데이터를 2가지 그래프로 나누어 그려달라고 해서 

하나의 표에 두가지 선그래프를 넣게 되었습니다. 

* 서로 다른 종류의 그래프를 같이 하고싶은 분들은 방법이 다릅니다 주의하세요.

 

1. 점만 찍힌 그래프 (빨간색)

2. 0 이상의 값만 가진 선 그래프 (초록색)

 

그랬더니 아래처럼 나오더라고요.

같은 공간 두개의 그래프

원리는 비교적 간단합니다. 

1. 표현하고 싶은 그래프의 LineChartDataSet(다른 값도 가능) 을 각각 만들기 

2. LineChartView 의 데이터에 아래 처럼 집어넣기 

let data = LineChartData(dataSets: [set1, set2])
lineChartView.data = data

 

그럼 LineChartDataSet 은 어떻게 만들까요?

 예를 들어 아래같은 좌표들을 사용해 DataSet을 만든다고 하면  

// Data set 1
let chartXValueDot : [Float] = [1.0,2.0,3.0,4.0,5.0,6.0]
let chartYValueDot : [Float] = [10.0, 0.0, 0.0, 1.0, 10.0, 0.0]
// Data set 2
let chartXValueLine : [Float] = [1.0,4.0, 5.0]
let chartYValueLine : [Float] = [10.0,1.0, 10.0]

아래처럼 dataSet을 만든 후 해당 그래프의 설정도 같이 할 수 있습니다. 

func drawDotSet()->LineChartDataSet{
    var dataEntities : [ChartDataEntry] = []
    for i in 0..<self.chartXValueDot.count {
        let value = ChartDataEntry(x: Double(self.chartXValueDot[i]), y: Double(self.chartYValueDot[i]))
        dataEntities.append(value)
    }
    let line1 = LineChartDataSet(entries: dataEntities)
    line1.colors = [UIColor.clear] // 선 색깔

    line1.circleHoleRadius = 0 // 점 구멍 크기
    line1.circleRadius = 3// 점 크기
    line1.circleColors = [UIColor.red]// 점 색상
    line1.drawValuesEnabled = false // 값 표시 삭제 
    return line1
}

이렇게 하신 후 저번 포스트처럼 설정해주시면 위처럼 나오게 됩니다. (이 부분은 위 포스트를 참고해주세요.) 

//Total Graph Set

let data = LineChartData(dataSets: [set1, set2])
lineChartView.data = data
// Custom Chart
// There is no Data
lineChartView.noDataText = "죄송해요,\n등록된 데이터가 없어요."
lineChartView.noDataTextColor = .black

// There is Data
lineChartView.xAxis.labelPosition = .bottom
lineChartView.xAxis.drawGridLinesEnabled = false // 세로 선이 사라짐
lineChartView.legend.enabled = false // 무슨뜻인지 표기하는거 없애기
lineChartView.doubleTapToZoomEnabled = false // 확대 불가

lineChartView.xAxis.drawLabelsEnabled = false //라벨없애기

lineChartView.isUserInteractionEnabled = false


lineChartView.rightAxis.enabled = false // 오른쪽 값 삭제
lineChartView.leftAxis.axisMinimum = 0 // y축 최소 수치
lineChartView.leftAxis.axisMaximum = 10.3 // y 축 최소 수치
lineChartView.leftAxis.axisLineColor = .clear // 왼쪽 선 제거

lineChartView.leftAxis.labelCount = 4 // - y 갯수
lineChartView.leftAxis.xOffset = 8.0// y축 선 과 글자 사이


lineChartView.xAxis.spaceMin = 0.3 // 시작지점 여백
lineChartView.xAxis.spaceMax = 0.3 // 끝점 여백
lineChartView.scaleYEnabled = false
lineChartView.scaleXEnabled = false// 옆으로 넘기기 가능
lineChartView.dragEnabled = false 
lineChartView.dragXEnabled = false

* 번외  : 서로 다른 그래프 같이 그리기 (선  + 막대)

그럼 서로 다른 종류의 그래프를 섞으려면 어떻게 해야할까요?

예를 들면 이렇게요

방법은 생각보다 위와 굉장히 유사합니다. 

1. 전체가 그려질 뷰를 CombinedChartView 로 변경해주세요.

@IBOutlet weak var combineChartView: CombinedChartView!

2. 마찬가지로 BarChartDataSet / LineChartDataSet 을 만들어주세요. 

- 아래는 예시 입니다. 참고 하실 분들만 참고해주세요.

var dataEntities : [BarChartDataEntry] = []
for i in 0..<self.chartXValueLine.count {
    let value = BarChartDataEntry(x: Double(self.chartXValueLine[i]), y: Double(self.chartYValueLine[i]))
    dataEntities.append(value)
}
let bar = BarChartDataSet(entries: dataEntities)
bar.colors = [UIColor.orange]

return bar // => 이런식으로 만들어주시면 됩니다.

3. 데이터를 아래처럼 넣어주세요. 조금 다르게 생겼으니 주의해주세요.

let data = CombinedChartData(dataSets: [bar1, line1])
let lineChartData = LineChartData(dataSets: [line1])
data.lineData = lineChartData
let barChartData = BarChartData(dataSets: [bar1])
data.barData = barChartData
combineChartView.data = data
combineChartView.notifyDataSetChanged()

이렇게만 설정해 주시면 위처럼 두가지 그래프가 같이 나오게 됩니다. 

어려운 것 처럼 보이지만 방법만 알면 간단합니다. 

저처럼 해매시는 분들에게 도움이 되었으면 좋겠네요.

 

그럼 오늘도 파이팅입니다~