[Unity] 파이 그래프(원 그래프)를 만들어보자!

파이그래프는 이렇게 생긴 그래프를 말한다.

 

https://docs.tibco.com/pub/sfire-analyst/12.5.0/doc/html/ko-KR/TIB_sfire_client/client/topics/ko-KR/pie_chart.html

이런식으로 100% 안에서 그래프를 일정 비율로 쪼갠 그래프가 파이그래프이다.

 

유니티에서 구현하기 쉬운 편인데 유니티에서는 다음과 같은 기능이 있기 때문이다.

UI - Image에는 위와 같이 ImageType이 있다. 이 ImageType를 Filled로 바꾸면, 채워지는 그림을 만들 수 있다.

채워지는 양은 Fill Amount로 조정하면 된다.

Source Image는 알아서 동그란 형태로 바꿔두자.

 

그리고 소스코드는 다음과 같이 짜서, PieGraph 오브젝트에 붙여줬다.

using System.Collections;
using System.Collections.Generic;
using Unity.VisualScripting;
using UnityEngine;
using UnityEngine.UI;

public class PieGraphManager : MonoBehaviour
{
    [Header("Pie")]
    [SerializeField] Image[] PiePiece = new Image[0];

    [Header("PieData")]
    [SerializeField] int[] PieValue = new int[0];

    private void Update() {
        SetPieGraph();
    }

    void SetPieGraph(){
        //일단 데이터에 0이 없다고 가정하고 진행
        int sum = 0; //값의 전체 합계를 구하기 위한 변수
        float accSum = 0f; //각도의 누적을 계산하기위한 변수

        foreach(int i in PieValue){
            sum += i; //퍼센트를 구하기 위한 합계  
        }
        
        for(int i=0; i<PiePiece.Length; i++){ //각 하나씩 접근하기 위함.
            PiePiece[i].GetComponent<Image>().fillAmount = PieValue[i] / (float)sum;//파이의 크기
            float angle = 360f * accSum;
            PiePiece[i].GetComponent<Transform>().rotation = Quaternion.Euler(0f,0f,-angle); //각도를 계산해 틀어줌. -방향이 시계방향
            accSum += PieValue[i] / (float)sum; //다음 각도를 구할땐, 기존의 각을 포함해서 나가야되니깐 마지막 퍼센트를 더해줌.
        }
    }
}

파이에 대한 값이 정해져있을 때, 값이 수시로 변할때 마다 파이 그래프를 그려주기 위해 Update문에 넣었다.

그리고 각도를 계산할땐, -방향으로 진행해줘야 시계방향으로 정렬이 된다.

각도를 각각 계산하는것이 아니라, 하나를 계산한 후에 그 값을 기준으로 돌아야 하기 때문에, 구해놓은 각도를 계속 합산해서 나눠주었다.

이런식으로 오브젝트를 설정해주고, 무작위 값을 넣어 확인해보면

이런식으로 잘 나타나는것을 볼 수 있다.

 

해당하는 값을 붙이는 방법은 코드를 변형해서 스스로 만들어보자.