Create a pie chart in the Editor and runtime UI

Version: 2023.2+

This example demonstrates how to use the Vector API to create graphs in the Editor and runtime UI.

Example overview

This example generates a pie chart onto a VisualElement, and displays it in the Editor and runtime UI.

You can find the completed files that this example creates in this GitHub repository.

要件

This guide is for developers familiar with the Unity Editor, UI Toolkit, and C# scripting. Before you start, get familiar with the following:

• Generate 2D visual content
• MeshGenerationContext

Create the pie chart graph

Create a C# script that uses the Arc and Fill methods in the Vector API to draw a pie chart into a visual element.

1. Create a Unity project with any template.
2. Create a folder named pie-chart to store your files.
3. In the pie-chart folder, create a C# script named PieChart.cs with the following content:

[!code-cs]

Add the pie chart in the Editor UI

1. Create a folder named Editor to store your files.
2. In the Editor folder, create a C# script named PieChartWindow.cs with the following contents:

[!code-cs]

To see the pie chart in the Editor window, from the menu, select Tools > PieChart Window.

Add the pie chart in the runtime UI

Add the pie chart in the UIDocument GameObject in the SampleScene. To do so, first, create a C# script named in the pie-chart folderPieChartComponet.cs with the following content:

[!code-cs]

To see the pie chart in runtime:

1. In the SampleScene, select GameObject > UI Toolkit > UI Document.
2. Select the UIDocument GameObject in the hierarchy.
3. Add PieChartComponet.cs as a component of the UIDocument GameObject.
4. Enter Play mode to see the pie chart in the scene.

その他の参考資料

• Use Vector API to create a radial progress