들어가며

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

CandleStickChartView

open class CandleStickChartView: BarLineChartViewBase, CandleChartDataProvider

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

그리고 또한, 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 의 속성만 결정지어준 이후에 CandleStickChartView 의 data 에 CandleChartData 를 넣어주기만 하면 돼요.

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

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