[swift] Swift Charts에서 툴팁 표시하기

Swift Charts는 iOS 애플리케이션에서 강력한 그래프를 생성할 수 있는 오픈 소스 라이브러리입니다. 이 라이브러리를 이용하여 그래프를 그리면서, 원하는 데이터 포인트에 툴팁을 표시하고 싶을 때가 있습니다. 이번 포스트에서는 Swift Charts에서 툴팁을 표시하는 방법에 대해 알아보겠습니다.

1. 툴팁 표시 준비하기

툴팁을 표시하기 위해서는 BalloonMarker라는 클래스를 사용합니다. 이 클래스는 툴팁에 대한 텍스트를 설정하고, 툴팁의 크기와 모양을 지정할 수 있는 기능을 제공합니다. 아래의 코드를 참고하여 BalloonMarker 인스턴스를 생성합니다.

let marker = BalloonMarker(color: .black, font: .systemFont(ofSize: 12), textColor: .white, insets: UIEdgeInsets(top: 7.0, left: 7.0, bottom: 7.0, right: 7.0))
marker.chartView = chartView
marker.minimumSize = CGSize(width: 75.0, height: 35.0)
chartView.marker = marker

2. 툴팁 표시하기

툴팁을 표시할 데이터 포인트에 대해서는 chartValueSelected 함수를 사용합니다. 이 함수는 선택된 데이터 포인트의 값을 파라미터로 받아와서 툴팁을 업데이트합니다. 아래의 코드를 참고하여 chartValueSelected 함수를 구현합니다.

func chartValueSelected(_ chartView: ChartViewBase, entry: ChartDataEntry, highlight: Highlight) {
    if let marker = chartView.marker as? BalloonMarker {
        let value = String(format: "%.2f", entry.y)
        marker.label = "Value: \(value)"
        marker.offset.x = -marker.size.width / 2.0
        marker.offset.y = -marker.size.height - 4.0
        chartView.marker = marker
    }
}

툴팁을 표시하고 싶은 그래프의 delegate를 설정해주고, chartValueSelected 함수를 호출하면 선택된 데이터 포인트에 해당하는 툴팁이 표시됩니다.

3. 툴팁 숨기기

툴팁을 숨기기 위해서는 chartValueNothingSelected 함수를 사용합니다. 이 함수는 데이터 포인트가 선택되지 않았을 때 호출되며, 툴팁을 초기화하여 숨깁니다. 아래의 코드를 참고하여 chartValueNothingSelected 함수를 구현합니다.

func chartValueNothingSelected(_ chartView: ChartViewBase) {
    if let marker = chartView.marker as? BalloonMarker {
        marker.label = nil
        chartView.marker = marker
    }
}

결론

Swift Charts를 이용하여 그래프를 그릴 때, 툴팁을 표시하는 것은 주로 사용되는 기능 중 하나입니다. BalloonMarker 클래스를 사용하여 툴팁에 대한 커스텀을 할 수 있으며, chartValueSelected 함수를 통해 선택된 데이터 포인트에 해당하는 툴팁을 표시할 수 있습니다. chartValueNothingSelected 함수를 이용하여 툴팁을 숨길 수도 있습니다. 이와 같은 방법을 활용하여 Swift Charts에서 툴팁을 효과적으로 활용해보세요.

참고 자료