[iOS/Swift] DGCharts 그래프 라이브러리 커스텀 마커 | Highlight Selected Value With a Custom Marker | 선택 값 출력 꾸미기

[iOS/Swift] Charts 그래프 라이브러리 커스텀 마커 | Highlight Selected Value With a Custom Marker | 선택 값 출력 꾸미기

Custom Marker 동작

 오늘은 Custom Marker를 만들어보도록 하겠습니다. 선택하면 나오는 Value를 좀 더 Custom 해서 보여줄 수 있습니다.

 

 시작하기 전에 필요한 구성부터 확인하겠습니다. 기본적으로 차트가 보이는 ViewController와 CustomMarker를 그리는 View와 Class가 필요합니다.

 

 처음에는 기본적으로 우리가 평소에 하던 방법으로 Chart를 그려줍니다.

 

다음은 CustomMarkerView Class 생성입니다.

//
//  CustomMarkerView.swift
//  ChartsLibTest
//
//  Created by 김지태 on 2023/01/11.
//

import UIKit
import Charts

class CustomMarkerView: MarkerView {

    override init(frame: CGRect) {
        super.init(frame: frame)
        initUI()
    }
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        initUI()
    }
    private func initUI() {
        Bundle.main.loadNibNamed("CustomMarkerView", owner: self, options: nil)
        self.addSubview(contentView)
    }
}

 CustomMarkerView 클래스는 위와 같이 작성합니다.

 

다음은 CustomMarkerView UI 생성입니다.

 View를 생성해 줍니다.

 

 이름은 CustomMarkerView로 작성했습니다.

 

 View를 생성한 모습입니다. (왜인지는 모르겠지만 화면이 깨진 모습..)

 

 그리고 생성한 View에 미리 작성해 둔 Class를 연결합니다. (class를 입력하고 엔터를 눌렀을 때 Module에 프로젝트 이름이 제대로 나오면 됩니다.)

 

 그리고 View의 Size를 freeform으로 변경합니다.

 

 그리고 원하는 디자인으로 커스텀을 진행합니다.

 

 미리 작성한 Class에 IBOutlet을 연결합니다. 이러면 CustomMarker 준비는 끝입니다. 이제 ViewController를 수정해야 합니다.

 

다음은 ViewController 코드 수정입니다.

// Custom Marker View
let customMarkerView = CustomMarkerView()

// Chart Delegate
self.myLineChart.delegate = self

// 마커 등록
self.markerInit()

 마커와 delegate를 등록합니다.

 

//MARK: - Chart Delegate
extension CustomMarkerLineChartViewController: ChartViewDelegate {
    // Marker 등록
    func markerInit() {
        // 마커에 차트 등록
        self.customMarkerView.chartView = self.myLineChart
        // 차트에 마커 등록
        self.myLineChart.marker = customMarkerView
    }
    
    // Value 선택
    func chartValueSelected(_ chartView: ChartViewBase, entry: ChartDataEntry, highlight: Highlight) {
        // entry를 사용해서 index 계산
        let index = Int(entry.x)
        
        // 월 일
        self.customMarkerView.topLabel.text = dayData[index]
        // 금액
        self.customMarkerView.bottomLabel.text = "\(priceData[index])"
    }
}

 마커를 등록하는 함수를 선언해 줍니다. 다음은 delegate를 등록했기 때문에 'ChartViewDelegate'를 상속받는 extension을 만들어서 chartValueSelected 함수를 사용했습니다. 그 안에서 마커와 차트를 각각 등록하고 entry를 사용해 index를 계산 후 데이터를 꺼내와 우리가 생성한 CustomMarkerView에 표시를 해주는 것으로 완료입니다.

 

CustomMarkerView를 그리는 부분과 chartValueSelected 부분은 구현하는 디자인에 따라서 다를 수 있습니다.

 

 방금 구현한 View가 잘 동작하는 모습입니다. 지금 모습은 touch한 부분을 기준으로 오른쪽에 나오는 모습입니다. 

 

 

다음은 탭 위치 가운데로 Marker 표시입니다.(필요한 경우만)

// 위치 설정
self.offset = CGPoint(x: -(self.contentView.frame.width/2), y: 0)

 생성한 CustomMarkerView로 이동해서 initUI에 위 한줄을 추가하면 탭한 위치 가운데로 View가 출력됩니다. y는 자동적으로 조절되는 부분이 있어서 0으로 해두었습니다.

 y축 위치는 변하지만 x축 위치는 탭 가운데로 오는 모습을 확인할 수 있습니다.

 

 다음은 Y축 고정입니다.(필요한 경우만)

context.translateBy(x: point.x + offset.x,
                    y: self.frame.size.height + 30)

 pod에서 MarKerView Class로 이동합니다. 현재 버전 기준으로 66번 자리 코드를 주석처리하고 위 코드를 붙여넣기 합니다. 뒤에 30을 늘렸다 줄였다 하면서 높이를 조절하면 됩니다.

 

 높이가 고정된 상태로 나오는 모습을 확인할 수 있습니다.