【Unity】簡単な円グラフの作り方

Unityで簡単に円グラフを作る場合の方法についてまとめます。Image TypeのFilledを使うと比較的簡単に実装できるので挑戦してみてください！

今回は、アニメーションで円グラフを表示する方法と、そのまま表示する方法の2種類を作っています。

こんな人におすすめ

・Unityで円グラフを出したい
・円グラフをアニメーション付きで出したい

サンプルコード

今回は「PieChart」という名前でスクリプトを作っています。使い方は次の項目で説明しますので、以下のコードをコピーして、新しいスクリプト（C#）に貼り付けを行ってください。

■PieChart

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

public class PieChart : MonoBehaviour
{
    [SerializeField]
    private GameObject CircleImage;

    [SerializeField]
    private float AnimationSpeed = 1.0f;

    [SerializeField]
    private Color[] _color;

    private bool updateFlg;
    private float ListValueAdd;
    private int SkipCnt;
    private float[] DataList;
    private GameObject[] ChildObject;

    // Update is called once per frame
    void Update()
    {
        if (updateFlg)
        {
            for (int i = SkipCnt; i >= 0; i--)
            {
                ChildObject[i].GetComponent<Image>().fillAmount += AnimationSpeed * Time.deltaTime;
                float _work = 0;
                for (int j = 0; j < DataList.Length - SkipCnt; j++)
                {
                    _work += DataList[j];
                }
                if (ChildObject[i].GetComponent<Image>().fillAmount >= _work / ListValueAdd)
                {
                    ChildObject[i].GetComponent<Image>().fillAmount = _work / ListValueAdd;
                    SkipCnt--;
                }
            }

            if(SkipCnt < 0)
            {
                updateFlg = false;
                ListValueAdd = 0;
                print("end");
            }
        }
    }

    // 子オブジェクトのリセット
    private void ResetCircle()
    {
        for (int i = 0; i < this.transform.childCount; i++)
        {
            Destroy(this.transform.GetChild(i).gameObject);
        }
    }

    // 円グラフ設定(アニメーションあり)
    public void SetPieChartAnimation(float[] _set)
    {
        ResetCircle();

        DataList = new float[_set.Length];
        DataList = _set;
        ChildObject = new GameObject[_set.Length];
        ListValueAdd = 0;

        // 色指定が足りていない場合ランダムで色を追加
        if (_color.Length < DataList.Length)
        {
            List<Color> list = new List<Color>(_color);
            for (int i = _color.Length; i < DataList.Length; i++)
            {
                list.Add(new Color(UnityEngine.Random.Range(0.5f,1.0f), UnityEngine.Random.Range(0.5f, 1.0f), UnityEngine.Random.Range(0.5f, 1.0f)));
            }
            _color = list.ToArray();
        }

        // 円の複製
        for (int i = 0; i < DataList.Length; i++)
        {
            ChildObject[i] = Instantiate(CircleImage, Vector3.zero, Quaternion.identity, this.transform);
            ChildObject[i].transform.localPosition = new Vector3(0, 0, 0);
            ChildObject[i].GetComponent<Image>().color = _color[DataList.Length - 1 - i];
            ChildObject[i].GetComponent<Image>().fillAmount = 0;
            ChildObject[i].SetActive(true);
        }

        // 全体の数値を計算
        for (int i = 0; i < DataList.Length; i++)
        {
            ListValueAdd += DataList[i];
        }

        updateFlg = true;
        SkipCnt = DataList.Length - 1;
    }

    // 円グラフ設定(アニメーションなし)
    public void SetPieChartNormal(float[] _set)
    {
        ResetCircle();

        DataList = new float[_set.Length];
        DataList = _set;
        ChildObject = new GameObject[_set.Length];

        // 色指定が足りていない場合ランダムで色を追加
        if (_color.Length < DataList.Length)
        {
            List<Color> list = new List<Color>(_color);
            for (int i = _color.Length; i < DataList.Length; i++)
            {
                list.Add(new Color(UnityEngine.Random.Range(0.5f, 1.0f), UnityEngine.Random.Range(0.5f, 1.0f), UnityEngine.Random.Range(0.5f, 1.0f)));
            }
            _color = list.ToArray();
        }

        // 円の複製
        for (int i = 0; i < DataList.Length; i++)
        {
            ChildObject[i] = Instantiate(CircleImage, Vector3.zero, Quaternion.identity, this.transform);
            ChildObject[i].transform.localPosition = new Vector3(0, 0, 0);
            ChildObject[i].GetComponent<Image>().color = _color[DataList.Length - 1 - i];
            ChildObject[i].GetComponent<Image>().fillAmount = 0;
            ChildObject[i].SetActive(true);
        }

        // 全体の数値を計算
        for (int i = 0; i < DataList.Length; i++)
        {
            ListValueAdd += DataList[i];
        }

        for (int i = DataList.Length - 1; i >= 0; i--)
        {
            float _work = 0;
            for (int j = 0; j < DataList.Length - i; j++)
            {
                _work += DataList[j];
            }
            print(ListValueAdd);
            ChildObject[i].GetComponent<Image>().fillAmount = _work / ListValueAdd;
        }

        ListValueAdd = 0;
    }
}

プロジェクトの準備

今回の円グラフ表示には、白い円の画像が必要です。無い場合は以下の画像を右クリックで保存してください。（※白いので見えないですが下の枠線内にあります。）

画像を保存したら、新しいプロジェクトに以下のオブジェクトを作ります。

・スクリプトアタッチ用の空のオブジェクト
・Imageオブジェクト

作ったオブジェクトが画像のようにCanvasに入っているようにしてください。

また、空のオブジェクトには「PieChart」のスクリプトをアタッチしておきます。そしてインスペクターのCircle Imageの項目に先ほど作ったImageオブジェクトを設定します。

終わったらImageのインスペクターの項目も設定します。

Imageのインスペクターの値は上の画像のような感じにします。アクティブのチェックマークを消して、見えない状態にしておいてください。

Source Imageは先ほどの円の画像を設定します。Raycast TargetについてはONのままでも良いのですが、今回は特にタッチチェックを行うわけでは無いのでチェックを外しています。

Image Typeは必ずFilledにしてください。

使い方

次に使い方を説明します。まずは新しく空のオブジェクトを作り、以下のサンプルコードをアタッチしてください！

■test

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class test : MonoBehaviour
{
    [SerializeField]
    PieChart _pie;

    // Start is called before the first frame update
    void Start()
    {
        float[] list = { 1, 3, 5 };
        _pie.SetPieChartAnimation(list);
    }

    // Update is called once per frame
    void Update()
    {
        
    }
}

テストスクリプトをアタッチした後は、「PieChart」がアタッチされているオブジェクトを「Pie」部分に設定します。あとはプロジェクトを再生して動きを確認してみてください。

サンプルにあるように、floatの配列に値を設定し、それを「SetPieChartAnimation(list);」に渡すことで円グラフが表示されます。

テストスクリプトの「_pie.SetPieChartAnimation(list);」を「_pie.SetPieChartNormal(list);」に変更すればアニメーション無しで円グラフの表示を行うこともできます。