🐾 个人主页 🐾
阿松爱睡觉，横竖醒不来
🏅你可以不屠龙，但不能不磨剑🗡
文章目录
- 一、前言
- 二、饼状图
-
- （一）准备工作
- （二）开发逻辑
- 三、多组饼状图
- 四、占比饼状图
-
- （一）准备工作
- （二）原理
一、前言
用于在unity开发中，有时候需要进行数据展示的地方，这篇文章集合日常的开发做了几个数据类型的展示开发，后面会持续的更新。
这里只是展示日常开发小规模使用，如果有专业的数据处理可以使用unity的插件XChart，进行开发，具体的功能可以去GitHub进行查看。
如果有其他的需要展示数据的类型可以在评论区留言，后期会进行制作更新，这里目前只有常见的饼状图和柱状图，后期可能会更新折线图等展示类型。
成品资源已经上传至我的主页里面的资源，大家可以自行下载！ CircleStatistics2.0.unitypackage在1.0的基础上功能更加丰富
资源链接: CircleStatistics1.0.unitypackage、CircleStatistics2.0.unitypackage
二、饼状图
先看下效果图。 
对样式可以进行自定义，包括：
- 颜色
- 是否显示中间的数值
- 数值是实际数值还是百分比
- 图片是实心的还是空心圆圈的
- 是否对颜色进行过渡
（一）准备工作
首先是素材的准备：一张圆形图片⚪、一张圆圈图片⭕
然后就是物体的制作，首先创建一个空物体，然后创建两个子级，一个图片类型，一个Text文字类型（用于展示数据）。图片类型的Image组件中的Image Type记得按照下图修改： 
最终效果图如下： 
制作完成之后开始创建脚本。这里由于数据处理可能不止一组，所以将相同的数据属性提取成一个基类。然后单组的和多组的会继承这个基类，开发起来会更加的规范。下面就是脚本的创建，StatisticAttribute 和 Statistic。
创建完成之后键入逻辑代码。
（二）开发逻辑
StatisticAttribute 基类：
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class StatisticAttribute : MonoBehaviour
{
public float maxValue = 100f; //最大值
public float transitionTime = 1f; //动画过渡时间
public bool isShowText; //是否展示中间数据文字
public bool isPercentage; //数据是否以百分比形式展示
public bool isSolid; //图片是否是实心的
public bool isTransitionColor; //是否对颜色进行过渡
public Color startColor;
public Color endColor;
public Sprite solidImg;//实心图片
public Sprite hollowImg;//空心图片
}
StatisticAttribute类，这个类需要挂载到刚刚创建的物体上面：
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class Statistic : StatisticAttribute
{
public float targetValue; //目标值
private Image slider;
private Text numText;
public Color originalColor;
public void Awake()
{
hollowImg = Resources.Load<Sprite>("UI/Hollow");
solidImg = Resources.Load<Sprite>("UI/Solid");
slider = transform.GetChild(0).GetComponent<Image>();
numText = transform.GetChild(1).GetComponent<Text>();
originalColor = slider.color;
}
void Start()
{
if (isSolid)
{
slider.sprite = solidImg;
transform.GetComponent<Image>().sprite = solidImg;
}
else
{
slider.sprite = hollowImg;
transform.GetComponent<Image>().sprite = hollowImg;
}
slider.fillAmount = 0;
numText.text = "0";
numText.gameObject.SetActive(isShowText);
StartTransition();
}
/// <summary>
/// 开启协程
/// </summary>
public void StartTransition()
{
StopAllCoroutines();
StartCoroutine(Transition());
}
/// <summary>
/// 开始动画，刷新数据
/// </summary>
/// <returns></returns>
private IEnumerator Transition()
{
if (targetValue > maxValue)
{
Debug.LogWarning("目标值大于最大值");
yield break;
}
float targetFillAmount = targetValue / maxValue;
while (slider.fillAmount < targetFillAmount)
{
slider.fillAmount += targetFillAmount * Time.deltaTime / transitionTime;
if (isPercentage)
{
numText.text = $"{(int)(slider.fillAmount * 100)}%";
}
else
{
numText.text = $"{(int)(slider.fillAmount * maxValue)}";
}
if (isTransitionColor)
{
slider.color = Color.Lerp(startColor, endColor, slider.fillAmount);
}
else
{
slider.color = originalColor;
}
yield return null;
}
yield return null;
}
}
挂载完了之后运行就可以看到效果了。 
三、多组饼状图
上面只是展示一个数据，那么在上面基础上可以处理多组的一连串的数据： 
有了上面制作的基础，这个制作起来也比较简单，只需要创建一个空物体StatisticManager，然后挂载下面的脚本就可以了。
原理非常简单：我们生成与数据相同数量的Statistic，然后将数组中的数据分别给它们，让它们进行展示就行。下面展示具体的逻辑代码:
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class StatisticManager : StatisticAttribute
{
public List<float> countList = new List<float>(); //数据列表
public GameObject statisticPrefab; //圆圈数据预制体
void Start()
{
Refresh();
}
/// <summary>
/// 刷新数据
/// </summary>
public void Refresh()
{
ClearChilds();
for (int i = 0; i < countList.Count; i++)
{
GameObject child = Instantiate(statisticPrefab, transform);
child.name = $"statistic{i}";
Statistic statistic = child.GetComponent<Statistic>();
statistic.maxValue = maxValue;
statistic.transitionTime = transitionTime;
statistic.isShowText = isShowText;
statistic.isPercentage = isPercentage;
statistic.isSolid = isSolid;
statistic.isTransitionColor = isTransitionColor;
statistic.startColor = startColor;
statistic.endColor = endColor;
statistic.targetValue = countList[i];
statistic.StartTransition();
}
}
/// <summary>
/// 清楚物体的所有子级
/// </summary>
private void ClearChilds()
{
for (int i = 0; i < transform.childCount; i++)
{
Destroy(transform.GetChild(i).gameObject);
}
}
}
完成之后在物体上挂载这个脚本，然后拖拽预制体，也就是上面制作的Statistic，输入一组数据然后运行就可以看到效果了。
四、占比饼状图
除了上面说明的两种，还有一种最常见的饼状图，就是这种看一组中的各个数据的占比情况的： 
（一）准备工作
依旧创建一个空物体PercentageStatistic作为父级便于管理，然后创建一个子级的图片ItemPrefab，用于当作预制体生成。子级图片的Image Type记得修改 最终的效果图如下： 
（二）原理
为了更加直观，这里直接放一张图片： 
明白了显示的原理之后可以之间创建PercentageStatistic.cs脚本键入代码：
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class PercentageStatistic : MonoBehaviour
{
public List<float> numList = new List<float>();
private GameObject itemPrefab;
private void Awake()
{
itemPrefab = transform.Find("ItemPrefab").gameObject;
itemPrefab.SetActive(false);
}
void Start()
{
Refresh();
}
private void Refresh()
{
float sumNum = 0;
float currentNum = 0;
for (int i = 0; i < numList.Count; i++)
{
sumNum += numList[i];
}
for (int i = 0; i < numList.Count; i++)
{
currentNum += numList[i];
GameObject item = Instantiate(itemPrefab, transform);
item.GetComponent<Image>().color = GetRandomColor();
item.GetComponent<Image>().fillAmount = currentNum / sumNum;
item.SetActive(true);
item.transform.SetAsFirstSibling();
}
}
private Color GetRandomColor()
{
return Random.ColorHSV();
}
}
运行之后就可以看到效果了。 
