에디터 및 런타임 UI에서 파이 차트 만들기

버전: 2023.2+

이 예시는 벡터 API를 사용하여 에디터 및 런타임 UI에서 그래프를 만드는 방법을 보여줍니다.

개요 예시

이 예시에서는 VisualElement에 파이 차트를 생성하여 에디터 및 런타임 UI에 표시합니다.

이 예시에서 생성하는 완성된 파일은 GitHub 저장소에서 찾을 수 있습니다.

선행 조건

이 가이드는 Unity 에디터, UI 툴킷, C# 스크립팅에 익숙한 개발자용입니다.시작하기 전에 먼저 다음을 숙지하십시오.

• 2D 시각적 콘텐츠 만들기
• MeshGenerationContext

파이 차트 그래프 만들기

벡터 API에서 Arc 및 Fill 메서드를 사용하는 C# 스크립트를 생성하여 시각적 요소에 파이 차트를 그립니다.

1. 임의의 템플릿을 사용하여 Unity 프로젝트를 생성합니다.
2. pie-chart라는 폴더를 만들어 파일을 저장합니다.
3. • pie-chart 폴더에 다음 콘텐츠가 포함된 PieChart.cs라는 이름의 C# 스크립트를 생성합니다.

[!code-cs]

에디터 UI에서 파이 차트 추가

1. Editor라는 폴더를 만들어 파일을 저장합니다.
2. Editor 폴더에 다음 콘텐츠가 포함된 PieChartWindow.cs라는 이름의 C# 스크립트를 생성합니다.

[!code-cs]

에디터 창에서 파이 차트를 확인하려면 메뉴에서 Tools > PieChart Window를 선택합니다.

런타임 UI에서 파이 차트 추가

SampleScene에서 UIDocument 게임 오브젝트에 파이 차트를 추가합니다. 이렇게 하려면 먼저 pie-chart 폴더에 다음 콘텐츠를 포함하는 PieChartComponet.cs라는 C# 스크립트를 생성합니다.

[!code-cs]

런타임에서 파이 차트를 보려면 다음과 같이 수행합니다.

1. SampleScene에서 GameObject > UI Toolkit > UI Document를 선택합니다.
2. 계층 구조에서 UIDocument 게임 오브젝트를 선택합니다.
3. PieChartComponet.cs를 UIDocument 게임 오브젝트의 컴포넌트로 추가합니다.
4. 플레이 모드로 전환하여 씬에서 파이 차트를 확인합니다.

추가 리소스

• 벡터 API를 사용하여 라디안 진행 표시기 생성