Unity3D组件 | 绘制静态柱状图

前言

Unity中并没有直接的柱状图绘制方式，但我们可以用改变图像的矩阵变换中参数的值来达到一种静态柱状图的效果。

准备工作

首先将柱状图能显示的最大值放置在Canvas中。

我这里做的是两值的比较，红色柱为速度，蓝色柱为压力，横轴是时间。柱的高度为80对应速度最大值为10m/s，压力最大值为4000N。

首先，为了之后方便计算，将柱（image）的矩阵变换参数中的锚点设为下。如下图

这样之后，可以通过代码修改Image的长度时，就会从锚点进行增加或减少。

脚本代码修改

定义类型

//在脚本开头使用gameobject定义
//或者可以通过Using UnityEngine.UI;定义image类型将需要控制的柱（image）定义
    public GameObject Speedimage_1;
    public GameObject Speedimage_2;
    public GameObject Speedimage_3;
    public GameObject Speedimage_4;
    public GameObject Speedimage_5;
    public GameObject Speedimage_6;
    public GameObject Speedimage_7;
    public GameObject Speedimage_8;
    public GameObject Speedimage_9;
    public GameObject Speedimage_10;
//定义list，这里的Speed是最终柱的高度；
//因为一共需要十个柱，对于第十一个需要将第一个进行移除list；
    private List<float> Speed = new List<float>(10);

对list进行填充

//将每次需要展示的值进行填充，这部分代码仅做展示，具体代码按需求更改。
	Speed.Add(speed0);
	Speed.Add(speed1);
	Speed.Add(speed2);
	Speed.Add(speed3);
	Speed.Add(speed4);
	Speed.Add(speed5);
	Speed.Add(speed6);
	Speed.Add(speed7);
	Speed.Add(speed8);
	Speed.Add(speed9);

初始化及填充

// 在Start或者Awake函数中进行第一次填充，这块是对第一次填充进行初始化和填充。
// 下面的Speed[i] / 10 * 80是将实际值按比例缩小至0~80，当第一次没对list进行填充时即是初始化。
// 实际就是寻找上一步定义的image中的RectTransform的sizeDelta参数并进行修改。
        Speedimage_1.gameObject.GetComponent<RectTransform>().sizeDelta = new Vector2(10, Speed[1] / 10 * 80);//改变长宽
        Speedimage_2.gameObject.GetComponent<RectTransform>().sizeDelta = new Vector2(10, Speed[2] / 10 * 80);//改变长宽
        Speedimage_3.gameObject.GetComponent<RectTransform>().sizeDelta = new Vector2(10, Speed[3] / 10 * 80);//改变长宽
        Speedimage_4.gameObject.GetComponent<RectTransform>().sizeDelta = new Vector2(10, Speed[4] / 10 * 80);//改变长宽
        Speedimage_5.gameObject.GetComponent<RectTransform>().sizeDelta = new Vector2(10, Speed[5] / 10 * 80);//改变长宽
        Speedimage_6.gameObject.GetComponent<RectTransform>().sizeDelta = new Vector2(10, Speed[6] / 10 * 80);//改变长宽
        Speedimage_7.gameObject.GetComponent<RectTransform>().sizeDelta = new Vector2(10, Speed[7] / 10 * 80);//改变长宽
        Speedimage_8.gameObject.GetComponent<RectTransform>().sizeDelta = new Vector2(10, Speed[8] / 10 * 80);//改变长宽
        Speedimage_9.gameObject.GetComponent<RectTransform>().sizeDelta = new Vector2(10, Speed[9] / 10 * 80);//改变长宽
        Speedimage_10.gameObject.GetComponent<RectTransform>().sizeDelta = new Vector2(10, Speed[10] / 10 * 80);//改变长宽

循环方式

// 填充过程中可以通过list的移除第一位功能达到循环填充的效果
            Speed.RemoveAt(0);

结语

基本实现就如上述，如果有其他功能可以通过改变Speed列表的进入值进行拓展。