在UnityUI中绘制线状统计图

Python微信订餐小程序课程视频

https://blog.csdn.net/m0_56069948/article/details/122285951

Python实战量化交易理财系统

https://blog.csdn.net/m0_56069948/article/details/122285941

先来个效果图


觉得不好看可以自己调整

1.绘制数据点

线状图一般由数据点和连线组成
在绘制连线之前,我们先标出数据点
这里我选择用Image图片来绘制数据点

新建Canvas,添加空物体Graph
在Graph上添加空物体 GraphContainer 和 Image BackGround
在 GraphContainer 上添加 Image BackGround

修改两个BackGround的大小和颜色制作背景

注意:这里GraphContainer 锚点为左下角
左下角默认为原点(0,0),之后所有的图形绘制都会在GraphContainer之内

在Graph上新建脚本MyGraph

public class MyGraph : MonoBehaviour
{[SerializeField]private Sprite circleSprite;	//需要画的图像,这里赋值为了一个Unity自带的圆形,也可改为其它图形private RectTransform graphContainer;	//声明一个 RectTransform,用于修改图片的大小private void Awake(){//获取graphContainer的RectTransform并赋值,为内侧的小矩形,会作为我们的画板graphContainer = transform.Find("GraphContainer").GetComponent();CreateCircle(new Vector2(200, 200)); //在(200,200)的地方创建圆,用于测试}private void CreateCircle(Vector2 anchoredPosition){GameObject gameObject = new GameObject("circle", typeof(Image)); //生成新物体,该物体包含一个图片组件gameObject.transform.SetParent(graphContainer, false); //将图片设为graphContainer的子物体gameObject.GetComponent().sprite = circleSprite; //将图片赋值为Inspector中设置的图片//获取新建图片物体的RectTransform并赋值RectTransform rectTransform = gameObject.GetComponent();rectTransform.anchoredPosition = anchoredPosition; //设置图片位置rectTransform.sizeDelta = new Vector2(20, 20); //设置图片大小,可设为公共变量来修改//下面两句将生成图片的锚点设为了父物体左下角(原点)rectTransform.anchorMin = new Vector2(0, 0);rectTransform.anchorMax = new Vector2(0, 0);}
}

运行后便会出现一个点

2.根据List列表输入绘制出多个圆点

继续修改MyGraph

  public class MyGraph : MonoBehaviour
{//[SerializeField]//private Sprite circleSprite;//private RectTransform graphContainer;private void Awake(){//graphContainer = transform.Find("GraphContainer").GetComponent();//声明一个列表用于测试List<int> valueList = new List<int>() { 1, 2, 4, 9, 16, 25, 36, 49, 64, 81, 100, 80, 50, 20, 10 };ShowGraph(valueList);}private void CreateCircle(Vector2 anchoredPosition){......}private void ShowGraph(List<int> valueList){int maxValue = 0;foreach (int value in valueList)	//找出列表中的最大值{if (maxValue <= value){maxValue = value;}}float graphWidth = graphContainer.sizeDelta.x;	    //获取画布graphContainer的宽度float graphHeight = graphContainer.sizeDelta.y;	    //获取画布graphContainer的高度float xSpace = graphWidth / (valueList.Count - 1);  //数据点x坐标的间距float ySpace = graphHeight / maxValue;		    //数据的y坐标的比例for (int i = 0; i < valueList.Count; i++){float xPos = i * xSpace;			    //x坐标为线性固定增长float yPos = ySpace * valueList[i];		    //y坐标是以列表中最大值为画布高度,按值的大小与最大值的比例取高度CreateCircle(new Vector2(xPos, yPos));	    //画出点}}
}

运行显示结果

为了好看点,可以将内侧灰色的背景放大点

所有点都在 GraphContainer 之内,点在x坐标平均分布,最高点为列表中的最大值

3.绘制点之间的连线

这里点之间的连线我仍然使用Image,只要Image足够细就能够看作线条
之后我会尝试能否使用LineRenderer
这里画线的想法是在两点中点创建一个线条状的Image,然后旋转一定角度

继续修改MyGraph

public class MyGraph : MonoBehaviour
{......private void ShowGraph(List<int> valueList){......float xSpace = graphWidth / (valueList.Count - 1);float ySpace = graphHeight / maxValue;GameObject lastPoint = null;	//用于保存上一个点,画出上一个点到现在点的连线,这样就不用管最后一个点for (int i = 0; i < valueList.Count; i++){//float xPos = i * xSpace;//float yPos = ySpace * valueList[i];GameObject circleGameobject = CreateCircle(new Vector2(xPos, yPos));//获取创建的点if (lastPoint != null){//画线,参数为上一个点的位置,和当前点的位置DrawLine(lastPoint.GetComponent().anchoredPosition, circleGameobject.GetComponent().anchoredPosition);}lastPoint = circleGameobject; //画完连线之后,变为上一个点}}private void DrawLine(Vector2 pointA, Vector2 pointB) //画线方法{GameObject gameObject = new GameObject("line", typeof(Image));//新建一个物体包含一个Image组件gameObject.transform.SetParent(graphContainer, false); //将该图片设为graphContainer的子物体//就是在画板内画线RectTransform rectTransform = gameObject.GetComponent(); //获取 RectTransform 组件Vector2 dir = pointB - pointA; //两点间的向量//同样将线段锚点设为画板左下角(原点)rectTransform.anchorMin = new Vector2(0, 0);rectTransform.anchorMax = new Vector2(0, 0);rectTransform.sizeDelta = new Vector2(dir.magnitude, 3f); //线段的长宽,长为两点间向量的长度,就是两点间距离rectTransform.anchoredPosition = pointA + dir / 2; //线段的中心点,为两点间的中心点float angle = RotateAngle(dir.x, dir.y); //线段的旋转角度rectTransform.localEulerAngles = new Vector3(0, 0, angle); //旋转线段}private float RotateAngle(float x, float y) //旋转方法{float angle = Mathf.Atan2(y, x) * 180 / 3.14f;//Atan2返回的是弧度,需要乘以180/PI得到角度,这里PI直接用了3.14return angle;}
}

RotateAngle()方法中Mathf.Atan2会返回角θ的弧度

图片所示情况会返回正数,如果右边的点更矮则是负数,可以直接用于旋转

运行后显示效果:

实际自己需要输入的数据列表建议自己进行修改
线状图2.0会加上坐标轴

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/401127.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HTTP 错误 404.3 - Not Found 由于扩展配置问题而无法提供您请求的页面

错误原因为 IIS 扩展信息中午此扩展 标签&#xff1a; 今天&#xff0c;在vs2013中新建了一个placard.json文件&#xff0c;当我用jq读取它的时候&#xff0c;去提示404&#xff0c;直接在浏览器访问这个文件&#xff0c;提示&#xff1a; HTTP 错误 404.3 – Not Found 由于扩…

国企开会特点

1、领导讲话只有目标性没有整体逻辑性&#xff1a;想哪说哪 2、有些讨论会什么基本上都是领导一个人在开会&#xff0c;其他人都是听着&#xff1b;领导讲到差不多&#xff0c;如果想起来会问大家还有什么问题吗&#xff1f;如果没想起来就这么地 一个领导讲来讲去也就那么点干…

一行代码,让 VS Code 内置 PDF 阅读器变成深色模式

Python微信订餐小程序课程视频 https://blog.csdn.net/m0_56069948/article/details/122285951 Python实战量化交易理财系统 https://blog.csdn.net/m0_56069948/article/details/122285941 许多人会用 VSCode 写 LaTeX&#xff0c;等等&#xff0c;都会用到 PDF 预览。VSCo…

雷军:互联网思维本质上就是群众路线

第一、小米的极其强调真才实料做好产品。应该来说小米发布这产品&#xff0c;在发布之初就具备了非常高的品质。第二、小米很愿意倾听用户的意见&#xff0c;和用户做朋友&#xff0c;把用户全部拉进来&#xff0c;一起把产品做好。第三、小米用了互联网的技术&#xff0c;电商…

NSURL中fileURLWithPath和URLWithString

NSString *str"http://t3.qpic.cn/mblogpic/d05a8de7423b76095d7c/460"; NSURL *url1[NSURL fileURLWithPath:str]; NSURL *url2[NSURL URLWithString:str]; NSLog("url1%",url1); NSLog("url2%",url2);输出结果为&#xff1a;url1h…

魏晋风度与世说新语

建安七子&#xff1a;是汉建安年间&#xff08;196—220年&#xff09;七位文学家的合称&#xff0c;包括孔融、陈琳、王粲、徐干、阮瑀、应玚、刘桢。竹林七贤&#xff1a;&#xff08;三国魏&#xff09;成名较“建安七子”晚一些&#xff0c;魏正始年间(240-249)嵇康、阮籍、…

CesiumJS 2022^ 原理[2] 渲染架构之三维物体 - 创建并执行指令

Python微信订餐小程序课程视频 https://blog.csdn.net/m0_56069948/article/details/122285951 Python实战量化交易理财系统 https://blog.csdn.net/m0_56069948/article/details/122285941 目录* 回顾 预备知识&#xff1a;指令 预备知识&#xff1a;通道 1. 生成并执行…

Selenium2Library+ride学习笔记

一、环境部署 1.安装python2.7编译环境、ride环境以及Selenium2Library环境&#xff0c;环境部署可参见前面几节。 2.启动RIDE编译环境&#xff0c;导入Selenium2Library库。     3. 执行F5,可查看Selenium2Library自带的关键字(Keyword)。 二、常用关鍵字解释 1. open b…

Android——线程通讯 Handler、Looper、Message;

线程通讯问题 &#xff08;主要用到了Handler类&#xff0c;Looper类和Message类以及MessageQueue&#xff09; 在Android中主线程如何向子线程中发送消息的问题。让我们来想想&#xff0c;这其中的过程&#xff0c;无非就是创建一个Handler对象&#xff0c;然后一个线程发消息…

关于flash网页播放中wmode和direct

网页中播放带有stage3d内容的时候&#xff0c;必须加上 <param name"wmode" value"direct" /> 不然就不能正常显示&#xff0c;比如下面这段代码&#xff1a; <object width"400" height"300" data"http://files.cnblo…

Abp 实现通过手机号注册用户

Python微信订餐小程序课程视频 https://blog.csdn.net/m0_56069948/article/details/122285951 Python实战量化交易理财系统 https://blog.csdn.net/m0_56069948/article/details/122285941 前言 Abp 的 Identity 模块&#xff0c;实现了用户的管理&#xff0c;但是对于国…

android 开发不能创建目录

原来代码&#xff1a; File tempDir new File(path); //path 是一个参数if (!tempDir.exists()) {try {tempDir.mkdir(); //mkdirs 可创建多级目录&#xff0c;mkdir只能创建以及目录} catch (Exception ex) {Log.e("mkdir", "创建文件目录失败" ex.toS…

NumericUpDown使用备注

NumericUpDown使用 常用属性 DecimalPlaces 指示要显示的小数位数 Increment 每单击一下按钮时增减的数量 Maximum 最大值 Minimum 最小值转载于:https://www.cnblogs.com/blackice/archive/2012/11/12/2766417.html

关于Electron框架应用的安全测试

Python微信订餐小程序课程视频 https://blog.csdn.net/m0_56069948/article/details/122285951 Python实战量化交易理财系统 https://blog.csdn.net/m0_56069948/article/details/122285941 Electron框架应用的安全测试 0.Electron相关简介 electron.js是一个运行时框架&…

Exchange 2010 创建设备室邮箱

其实创建设备邮箱和创建会议室邮箱都差不多&#xff0c;只是在新建邮箱的时候&#xff0c;邮箱的类型选择的不一样&#xff1b;1、打开Exchange管理控制台&#xff0c;展开“收件人配置”选择“邮箱”节点&#xff1b;在中间空白的地方右击选择“新建邮箱”&#xff1b;或者在操…

AC日记——3的幂的和 51nod 1013

3的幂的和 思路&#xff1b; 矩阵快速幂&#xff1b; sn-1 3 1 sn * 1  0 1    1 来&#xff0c;上代码&#xff1a; #include <cstdio> #include <cstring> #include <iostream> #include <algorithm>using namespace…

简单的Excel导出(两种方式)

最近项目里面有个周报Excel导出的功能&#xff0c;为了解决这个问题&#xff0c;我显示调研Excel内核的方式实现了&#xff0c;但是被告知该方法有诸多弊端&#xff08;1、服务器需要装相应版本的Excel&#xff1b;2、如果程序中途出错服务器会有很多Excel进程&#xff09;&…

一款开源的文件搜索神器,终于不用记 find 命令了

Python微信订餐小程序课程视频 https://blog.csdn.net/m0_56069948/article/details/122285951 Python实战量化交易理财系统 https://blog.csdn.net/m0_56069948/article/details/122285941 这是 HelloGitHub 推出的《讲解开源项目》系列&#xff0c;用一篇文章带你快速上…

C2审核模式(c2 audit mode)

C2审核模式&#xff08;c2 audit mode&#xff09;SQL Server C2 Audit 是为了满足美国国防部针对计算机的安全访问的安全评级要求而引入的。 SQL C2Audit 可以记录shutdown,restart,成功和失败的Login,成功或者失败访问数据库对象&#xff0c;所欲数据定义的执行&#xff0c;数…

project开发的程序设计与逻辑设计

非常多时候我们要做庞大project, 就像一棵大树, 方方面面都有自己的细枝末节&#xff0c;而作为开发员的我们&#xff0c;无法时时刻刻去保持对程序的全面认知&#xff0c;所以我们要把程序设计与逻辑设计区分开来。 那么什么是程序设计和逻辑设计&#xff0c;举个样例来说&…