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

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);」に変更すればアニメーション無しで円グラフの表示を行うこともできます。

PieChartの設定項目について

「PieChart」の設定項目を紹介します。

設定項目の説明

・Animation Speed
円グラフが表示されるアニメーションの速度を変更します。値を下げればアニメーションは遅くなります。

・Color
任意の順番までの色を指定します。Sizeに指定したいデータ番号までの数値を設定し、後は色を指定してください。

※作ったばかりの色指定はアルファが「0」になっています! 必ず255にしてください!

色の指定は、無い場合はランダムに設定されるようになっていますが、同じ色が続いてしまった場合見にくいグラフになってしまいます。

可能な限り色の指定はしたほうが良いと思います。

まとめ

以上が円グラフの作り方についてでした。

Unityの機能により、結構簡単に実装ができるようになっていますので、一度試してみてはいかがでしょうか!