[SwiftUI] PolygonChart 만들기

Radar chart 만들기

아래와 같은 형식의 Radar 차트를 간단하게 만드는 방법을 찾아봤다. Swift 에서도 자체적으로 Chart 를 제공해주고 있지만 아직 아래와 같은 Radar chart 는 없다. 그래서 자체적으로 차트를 만드는 코드를 Shape 를 활용해서 만들어 보았다.

Swift Charts | Apple Developer Documentation

코드

data, maxValue 를 받는다. data 는 [Double] 형식으로 maxValue 는 Double 형식으로 받는다. 아래와 같이 data 를 [3, 3, 4, 4, 4, 4] 로 6개의 데이터를 입력하여 육각형 모양의 차트를 만들 수 있다. 마찬가지로 다양한 데이터를 입력하여 다양한 도형을 만들 수 있다.

Shape 구조체를 만들었다. 360도를 데이터 갯수만큼 나눠서 value 만큼 radius 로 두어서 해당 각도만큼 회전시켜 도형을 만들었다.

import SwiftUI

struct PolygonChart: Shape {
    let data: [Double]
    let maxValue: Double
    
    func path(in rect: CGRect) -> Path {
        var path = Path()
        
        let center = CGPoint(x: rect.width / 2, y: rect.height / 2)
        let radius = min(rect.width, rect.height) / 2
        
        let segmentAngle = 2 * .pi / Double(data.count)
        
        for (index, value) in data.enumerated() {
            let angle = segmentAngle * Double(index) - .pi / 2
            let valueRadius = radius * CGFloat(value / maxValue)
            
            let point = CGPoint(
                x: center.x + valueRadius * CGFloat(cos(angle)),
                y: center.y + valueRadius * CGFloat(sin(angle))
            )
            
            if index == 0 {
                path.move(to: point)
            } else {
                path.addLine(to: point)
            }
        }
        path.closeSubpath()

        return path
    }
}