SwiftUI를 사용하여 iOS에서 차트를 만드는 방법

SwiftUI는 기본적으로 차트 작성을 지원합니다.

iOS 16, iPadOS 16 및 watchOS 9부터 SwiftUI는 기본 차트 생성을 지원합니다. 해당 버전이 2022년에 출시되기 전에 차트를 생성하려면 수많은 개발 작업 또는 outside dependency .

요구 사항

SwiftUI를 사용하여 차트를 생성하려면 iOS 16 이상을 대상으로 하는 iOS 앱을 개발해야 합니다.

마크 유형

마크 유형은 차트에 데이터를 그리는 데 사용됩니다. Apple은 6가지 마크 유형을 정의합니다.

AreaMark(x: , y: )

LineMark(x: , y: )

PointMark(x: , y: )

RectangleMark(x: , y: )

RuleMark(xStart: , xEnd: , y:)

BarMark(x: , y: )

기본 막대 차트를 만드는 방법

모든 차트는 Chart view 으로 시작합니다. 차트 보기는 데이터의 컨테이너입니다. 차트 보기 내에서 Apple의 미리 정의된 마크 중 하나를 사용하여 데이터 제공을 시작할 수 있습니다.

Chart {
    BarMark(
        x: .value("Type", "Swift"),
        y: .value("Total Count", 5)
    )
    BarMark(
        x: .value("Type", "UI"),
        y: .value("Total Count", 4)
    )
    BarMark(
        x: .value("Type", "Chart"),
        y: .value("Total Count", 3)
    )
 }

보다 고급 막대 그래프 예제는 my Github에서 찾을 수 있습니다.

선 그래프를 만드는 방법

차트 보기 내에서 LineMark를 사용하여 선 그래프를 만들 수 있습니다.

Chart {
    LineMark(
        x: .value("Type", "Swift"),
        y: .value("Total Count", 5)
    )
    LineMark(
        x: .value("Type", "UI"),
        y: .value("Total Count", 4)
    )
    LineMark(
        x: .value("Type", "Chart"),
        y: .value("Total Count", 3)
    )
 }

산점도를 만드는 방법

마지막으로 차트 보기 내에서 PointMark를 사용하여 분산형 그래프를 만들 수 있습니다.

Chart {
    PointMark(
        x: .value("Type", "Swift"),
        y: .value("Total Count", 5)
    )
    PointMark(
        x: .value("Type", "UI"),
        y: .value("Total Count", 4)
    )
    PointMark(
        x: .value("Type", "Chart"),
        y: .value("Total Count", 3)
    )
 }

차트 데이터에 레이블을 지정하는 방법

PlottableValue을 사용하여 데이터에 레이블을 지정할 수 있습니다.

PointMark(
    x: .value("Type", "Swift"),
    y: .value("Total Count", 5)
).foregroundStyle(by: .value("Series", "Swift"))

결론

SwiftUI 차트는 기본 지원에 중요한 기능을 제공하는 강력하고 사용하기 쉬운 옵션입니다. 다음 앱 해킹 프로젝트에 포함시켜 보세요.

출처

Chart documentation

Creating a chart using Swift Charts