지난 시간에는 BarChartView를 그려봤어요. 그리는 원리는 완전히 똑같지만 프로젝트에 구현했던 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
라이브러리를 사용하지 않고 직접 차트를 그리는 작업도 경험해보고 싶네요.