[iOS] Charts 라이브러리를 이용해서 그래프 그리기

Youngwoo Lee·2022년 2월 22일
0

iOS

목록 보기
43/46
post-thumbnail

들어가며

지난 시간에는 BarChartView를 그려봤어요. 그리는 원리는 완전히 똑같지만 프로젝트에 구현했던 CandleStickChartView를 기록해보려고 해요.

CandleStickChartView

open class CandleStickChartView: BarLineChartViewBase, CandleChartDataProvider

앞 순서에서 알아봤던 BarLineChartViewBaseCandleStickChartView 또한 상속하고 있네요.

그리고 또한, Provider 중 하나인 CandleChartDataProvider 를 채택하고 있네요

public protocol CandleChartDataProvider: BarLineScatterCandleBubbleChartDataProvider
{
    var candleData: CandleChartData? { get }
}

해당 프로토콜에서는 CandleStick 을 그리는데 사용하는 CandleChartData 만을 요구하네요.

지난 시간에 알아봤던 BarChartView 와 크게 다른 것이 없으니 바로 그려보도록 할게요

그려보기

일단 ChartView 의 속성 먼저 입 맛에 맞게 변경시키도록 할게요. 해당 부분은 지난 시간과 동일하게 넘어가도록 할게요. 네이밍이 매우 직관적으로 되어 있어서 설명할 것이 마땅히 없네요.

private func attribute() {
    self.noDataText = "데이터가 없습니다."
    self.noDataFont = .systemFont(ofSize: 20)
    self.noDataTextColor = .lightGray
    self.backgroundColor = .white
    self.xAxis.setLabelCount(4, force: false)
    self.xAxis.labelPosition = .bottom
    self.dragDecelerationEnabled = false
    self.autoScaleMinMaxEnabled = true
    self.doubleTapToZoomEnabled = false
    self.highlightPerTapEnabled = false
    self.rightAxis.enabled = false
    self.leftAxis.enabled = true
    self.scaleYEnabled = false
    self.dragYEnabled = false
    self.delegate = self
  }

그리고 이제 CandleStick을 그리고 위해서 가져온 ChartData 들을 ChartView 에 주입시켜주도록 할게요

private func setChart(chartData: [ChartData]) {
  let dataEntries = self.convertToDataEntries(from: chartData)
  let axisValues = self.convertToAxisValues(from: chartData)
  
  let chartDataSet = CandleChartDataSet(entries: dataEntries).then {
    $0.shadowColorSameAsCandle = true
    $0.drawValuesEnabled = false
    $0.highlightEnabled = false
    $0.increasingFilled = true
    $0.decreasingFilled = true
    $0.increasingColor = .red
    $0.decreasingColor = .blue
    $0.label = nil
    $0.form = .none
  }
  
  let chartData = CandleChartData(dataSet: chartDataSet)
  self.data = chartData
  self.xAxis.valueFormatter = IndexAxisValueFormatter(values: axisValues)
  self.setVisibleXRangeMaximum(20.0)
  self.moveViewToX(self.chartXMax)
  self.drawMarkers = false
}

일단은 먼저 CandleChartDataEntry 를 생성하도록 해요. CandleChartDataEntry의 이니셜라이저를 보게 된다면 우리가 아는 CandleStick == 봉 이 하나의 CandleChartDataEntry 라는 것을 알 수 있네요.

private func convertToDataEntries(from graphData: [ChartData]) -> [CandleChartDataEntry] {
  return graphData.enumerated().map {
    CandleChartDataEntry(x: Double($0),
                         shadowH: $1.highPrice,
                         shadowL: $1.lowPrice,
                         open: $1.openPrice,
                         close: $1.closePrice)
  }
}

그리고 지난번 처럼 X축에서 각 CandleStick 들의 정보를 나타내줄 AxisValue 를 가져오도록 해보죠.

private func convertToAxisValues(from graphData: [ChartData]) -> [String] {
  return graphData.map { $0.dateText }
}

이렇게 하면 모두 끝이에요. 제일 위에 있던 전체 코드를 보면 알겠지만, 해당 DataEntry 의 속성만 결정지어준 이후에 CandleStickChartViewdataCandleChartData 를 넣어주기만 하면 돼요.

그러면 이렇게 멋진 차트 뷰가 나옵니다ㅎㅎ

그럴 듯한 차트 뷰가 나와서 만족스럽네요. 다음 번에는 Charts 라이브러리를 사용하지 않고 직접 차트를 그리는 작업도 경험해보고 싶네요.

profile
iOS Developer Student

0개의 댓글