用Unity做仿真,这款图表插件我不允许你不知道

举报
恬静的小魔龙 发表于 2022/05/26 13:18:52 2022/05/26
【摘要】 推荐阅读CSDN主页GitHub开源地址Unity3D插件分享简书地址我的个人博客QQ群:1040082875 一、前言用Unity做虚拟仿真项目,总会遇到要画图表的需求,如果从头开发,那么工作量是很大的。有这么一款插件,就免去了我们重复造轮子的工作,那就是XCharts插件。XCharts插件是一款基于Unity3D的UGUI系统的插件,可以绘制折线图、曲线图、饼状图、雷达图、散点图、热力...

推荐阅读

一、前言

用Unity做虚拟仿真项目,总会遇到要画图表的需求,如果从头开发,那么工作量是很大的。

有这么一款插件,就免去了我们重复造轮子的工作,那就是XCharts插件。

XCharts插件是一款基于Unity3D的UGUI系统的插件,可以绘制折线图、曲线图、饼状图、雷达图、散点图、热力图等等,功能强大,但是参数超多 - -,下面就来学习一下这个插件的使用吧。

二、原文

原文链接:https://blog.csdn.net/monitor1394/article/details/102762068
大佬花费一年多的时间开发出来的插件,实在是太强了,但是最让我佩服的不是他的技术,而是他能起的比娃早睡的比娃晚,哈哈哈

三、快速入门

3-1、首先下载安装包unitypackage包下载

在这里插入图片描述
XChartsDemo 是示例Demo,推荐导入,可以查看各类图表的效果

3-2、将资源包导入到Unity中

在这里插入图片描述

3-3、Demo中有各种图表的效果,如下图所示:

在这里插入图片描述

3-4、搭建简单场景

在Hierarchy视图下,先选中Canvas,然后选择Create→XCharts->LineChart:
注意,Chart需要建在Canvas层级下面,因为这个图标是以UGUI为基础的。
在这里插入图片描述

  • LineChart:折线图
  • BarChart:柱状图
  • PieChart:饼图
  • RadarChart:雷达图
  • ScatterChart:散点图
  • HeatmapChart:热力图
  • GaugeChart:仪表盘
  • RingChart:趋势图
  • PolarChart:极区图
  • LiquidChart:液位图

5、一个简单的折线图就出来了
在这里插入图片描述
6、在Inspector视图可以查看调整各个组件的参数,Game 视图会实时反馈调整的效果。
在这里插入图片描述
*注意:不同版本之间可能界面有些区别,但是功能都差不多的

这个是新版本的界面:
在这里插入图片描述

3-5、 修改参数

将x轴和y轴的值进行修改:
修改x轴的值:
在这里插入图片描述
y轴的值修改在:Series→Serie0→Data:
在这里插入图片描述
比如:
在这里插入图片描述
如果想要都显示整数:
设置YAxis 0→Interval:
设置为1即可。
在这里插入图片描述
在这里插入图片描述
这个在Inspector面板修改属性,在Game 和Scene视图都是实时显示的,不用运行程序

四、使用代码构建图表

4-1、代码

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

public class XchartsDemo : MonoBehaviour
{
    public GameObject chart;

    void Start()
    {
        CreateChart();
    }

    //创建图表
    private void CreateChart()
    {
        List<string> xAxisValue = new List<string>();
        xAxisValue.Add("周一");
        xAxisValue.Add("周二");
        xAxisValue.Add("周三");
        xAxisValue.Add("周四");
        xAxisValue.Add("周五");
        List<float> yAxisValue = new List<float>();
        yAxisValue.Add(8);
        yAxisValue.Add(7);
        yAxisValue.Add(5);
        yAxisValue.Add(7);
        yAxisValue.Add(8);
        CreateChart(chart, "折线图", "星期数", "工作时间", SerieType.Line, LineType.Normal, xAxisValue, yAxisValue);
    }

    /// <summary>
    /// 生成图表
    /// </summary>
    /// <param name="_chart">图表组件</param>
    /// <param name="_title">图表表头</param>
    /// <param name="_boundarygap">坐标轴是否留白</param>
    /// <param name="xAxisName">x轴的轴名</param>
    /// <param name="yAxisName">y轴的轴名</param>
    /// <param name="_serietype">设置是什么类型图表</param>
    /// <param name="_linetype">什么类型线段</param>
    /// <param name="xAxisValue">x轴的值</param>
    /// <param name="yAxisValue">y轴的值</param>
    public void CreateChart(GameObject _chart, string _title, string xAxisName, string yAxisName, SerieType _serietype,
        LineType _linetype, List<string> xAxisValue, List<float> yAxisValue)
    {
        var chart = _chart.GetComponent<LineChart>();
        //表头设置
        chart.title.show = true;
        chart.title.text = _title;
        //背景图
        chart.background.gameObject.SetActive(chart.background.show);
        //提示框
        chart.tooltip.show = true;
        chart.tooltip.titleFormatter = " ";
        //图例组件
        chart.legend.show = false;
        //x轴的设置
        chart.xAxis0.show = true;
        chart.xAxis0.type = Axis.AxisType.Category;
        chart.xAxis0.splitNumber = 11;
        chart.xAxis0.boundaryGap = false;
        chart.xAxis0.axisName.show = true;
        chart.xAxis0.axisName.name = xAxisName;
        chart.xAxis1.show = false;
        //y轴的设置
        chart.yAxis0.show = true;
        chart.yAxis0.type = Axis.AxisType.Value;
        chart.yAxis0.show = true;
        chart.yAxis0.splitNumber = 10;
        chart.yAxis0.interval = 1;
        chart.yAxis0.axisLabel.show = true;
        chart.yAxis0.axisName.show = true;
        chart.yAxis0.axisName.name = yAxisName;
        chart.yAxis1.show = false;
        //标记的图形
        SerieSymbol sy = new SerieSymbol();
        sy.show = true;
        sy.type = SerieSymbolType.Circle;
        sy.gap = 2;
        sy.sizeType = SerieSymbolSizeType.Custom;
        sy.size = 7;
        //线段的样式设置
        LineStyle ls = new LineStyle();
        ls.show = true;
        ls.type = LineStyle.Type.Solid;
        ls.toColor = new Color32(18, 240, 111, 255);
        ls.toColor2 = new Color32(244, 29, 140, 255);
        ls.width = 2.5f;
        //图表上的文本标签的样式
        SerieLabel sl = new SerieLabel();
        sl.show = true;
        sl.position = SerieLabel.Position.Outside;
        sl.offset = new Vector3(0, 20, 0);
        sl.lineWidth = 25;
        //图表动画
        SerieAnimation sa = new SerieAnimation();
        sa.enable = true;
        //y轴的值的设置
        chart.series.list[0].animation = sa;
        chart.series.list[0].label = sl;
        chart.series.list[0].lineStyle = ls;
        chart.series.list[0].symbol = sy;
        chart.series.list[0].name = "";
        chart.series.list[0].lineType = _linetype;
        //清空值
        chart.RemoveData();
        chart.AddSerie(_serietype);
        //添加x轴的值
        for (int i = 0; i < xAxisValue.Count; i++)
        {
            chart.AddXAxisData(xAxisValue[i]);
        }
        //添加y轴的值
        foreach (float item in yAxisValue)
        {
            chart.AddData(0, item);
        }
    }
}

4-2、效果图

在这里插入图片描述

五、后言

还有很多参数效果可以用来尝试,作者将所有可能用到的接口参数都开放出来了,只需要获取到LineChart组件,然后就可以进行各种设置

真正的运用到项目中,还需要大家自己多摸索了。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200