当前位置: 首页 > news >正文

Unity中画2D图表(2)——用XChart包绘制散点分布图 + 一条直线方程

散点图用于显示关系。 对于 【相关性】 ,散点图有助于显示两个变量之间线性关系的强度。 对于 【回归】 ,散点图常常会添加拟合线。

举例1:你可以展示【年降雨量】与【玉米亩产量】的关系
举例2:你也可以分析各个【节假日】与【大盘波动】的关系

一、要画的图

图片来自官方demo

二、画图的过程展示

请添加图片描述

三、画图的要点

  • 添加一个scatter散点图表

  • 设置图表的大小:SetSize(x,y)

  • 设置标题:chart.Title.text|subText = “”

  • 设置提示框【Tooltip】和图例【Legend】是否显示

  • 设置坐标轴的数据刻度信息
    ——X轴的刻度数量,每个刻度对应的标签
    ——Y轴设置

  • 清空默认数据,添加Scatter类型的Serie用于接收数据

  • 添加数据:X轴的刻度数据,Y轴的数据

  • 数据添加到图表上
    ——X轴的刻度标签
    ——Y1,第一组数据
    ——Y2,第二组数据

  • x轴刻度标签旋转(倾斜)设置

  • 设置散点的颜色

  • 设置散点的大小

  • 画拟合的直线
    ——增加两个端点
    ——设置直线的【方程式text】
    ——设置直线的形状

  • 刷新所有的组件

四、代码清单

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using Cysharp.Threading.Tasks;
using XCharts.Runtime;
using System;
using System.Linq;
using UnityEngine.UI;public class ExampleScatterChart : MonoBehaviour
{/// <summary>/// 测试按钮——画线/// </summary>public Button StartBtn;/// <summary>/// 刷新图表/// </summary>public Button RefreshBtn;private void Start(){#region    ==============代码绑定==============begin   //开始画图StartBtn.onClick.AddListener(() =>{DrawScatterFlow();});//刷新组件RefreshBtn.onClick.AddListener(()=> {var chart = gameObject.GetComponent<ScatterChart>();chart.RefreshAllComponent();});#endregion ==============代码绑定==============end}/// <summary>/// 绘制散点图的流程/// </summary>/// <returns></returns>private async UniTask DrawScatterFlow(){//【1】添加一个scatter散点图表Debug.Log("添加一个scatter散点图表");var chart = gameObject.GetComponent<ScatterChart>();if (chart == null){chart = gameObject.AddComponent<ScatterChart>();chart.Init();}//【2】设置图表的大小:SetSize(x,y)Debug.Log("设置图表的大小(580, 300) ");chart.SetSize(580, 300);//代码动态设置尺寸Debug.Log("2秒后重新设置大小(1102, 519) ");await UniTask.Delay(TimeSpan.FromSeconds(2.0f));chart.SetSize(1102, 519);//【3】设置标题:chart.Title.text|subText = ""Debug.Log("2秒后:设置标题 ");await UniTask.Delay(TimeSpan.FromSeconds(2.0f));var title = chart.GetOrAddChartComponent<Title>();title.text = "森林小气候与碳通量的关系";            //主标题title.subText = "温度湿度数据";                     //副标题//【4】设置提示框【Tooltip】和图例【Legend】是否显示//Tooltip - 鼠标悬停在曲线节点上的时候,显示数据信息 //Legend  - 图上数据系列的类别信息【例如[red-白天温度]、[black-晚上温度]】Debug.Log("2秒后:设置提示框和图例是否显示");await UniTask.Delay(TimeSpan.FromSeconds(2.0f));var tooltip = chart.GetOrAddChartComponent<Tooltip>();tooltip.show = true;                                //在数据节点上,鼠标悬停时显示的信息框var legend = chart.GetOrAddChartComponent<Legend>();legend.show = true;//【5】设置坐标轴的数据刻度信息Debug.Log("2秒后:设置坐标轴");await UniTask.Delay(TimeSpan.FromSeconds(2.0f));//——x轴设置var xAxis = chart.GetOrAddChartComponent<XAxis>();xAxis.splitNumber = 24;                            //数据的个数-参数硬编码xAxis.boundaryGap = true;xAxis.type = Axis.AxisType.Category;//——y轴设置var yAxis = chart.GetOrAddChartComponent<YAxis>();yAxis.type = Axis.AxisType.Value;//【6】清空默认数据,添加Scatter类型的Serie用于接收数据Debug.Log("2秒后:清空默认数据,添加Scatter类型的Serie用于接收数据");await UniTask.Delay(TimeSpan.FromSeconds(2.0f));chart.RemoveData();//【7】添加数据:X轴的刻度数据,Y轴的数据chart.AddSerie<Scatter>("林内温度");chart.AddSerie<Scatter>("林外温度");Debug.Log("2秒后:添加数据");await UniTask.Delay(TimeSpan.FromSeconds(2.0f));var series1_24 = Enumerable.Range(1, 24).ToList();var xTicks = series1_24.Select(x => $"{x}:00").ToList();var yTicks = series1_24.Select(x => UnityEngine.Random.Range(10, 20)).ToList();  //[min,max) 前开后闭var yTicks2 = series1_24.Select(x => UnityEngine.Random.Range(10, 20)).ToList();//数据添加到图表上series1_24.ForEach(idx =>{chart.AddXAxisData(xTicks[idx - 1]);     //X轴的刻度标签chart.AddData(0, yTicks[idx - 1]);       //Y1,第一组数据chart.AddData(1, yTicks2[idx - 1]);      //Y2,第二组数据            });       //【8】x轴刻度标签旋转(倾斜)设置Debug.Log("2秒后:x轴刻度标签旋转设置");await UniTask.Delay(TimeSpan.FromSeconds(2.0f));xAxis.axisLabel.rotate = 45;//【9】设置散点的颜色Debug.Log("0.4秒后:线条的颜色设置");await UniTask.Delay(TimeSpan.FromSeconds(0.4f));chart.series[0].itemStyle.color = Color.red;     //第一组散点的颜色 chart.series[1].itemStyle.color = Color.green;   //第二组散点的颜色//【10】Scatter大小设置:await UniTask.Delay(TimeSpan.FromSeconds(2.0f));Debug.Log("2秒后:设置散点标记的大小");        chart.series[0].symbol.size = 9;chart.series[1].symbol.size = 9;//【11】画拟合的直线await UniTask.Delay(TimeSpan.FromSeconds(2.0f));var line1 = chart.AddChartComponent<MarkLine>(); //添加一根直线line1.data.Clear();//清空默认值,添加组的时候,会默认包含一个item//增加一个端点数据var p1 = new MarkLineData();p1.type = MarkLineType.None;p1.group = 1;p1.xPosition = 0;p1.yPosition = 0;p1.xValue = 0;p1.yValue = 15;       p1.zeroPosition = false;//标注【直线方程式】p1.name = "y = 0 * x + 15";p1.label.formatter = "{b}";//直线的形状设置p1.lineStyle.type = LineStyle.Type.Solid;p1.startSymbol.type = SymbolType.None;p1.endSymbol.type = SymbolType.None;//添加第二个端点数据var p2 = new MarkLineData();p2.type = MarkLineType.None;p2.group = 1;p2.xPosition = 0;p2.yPosition = 0;p2.xValue = 23;p2.yValue = 15;p2.zeroPosition = false;p2.name = "y = 0 * x + 15";p2.label.formatter = "{b}";//直线的形状设置p2.lineStyle.type = LineStyle.Type.Solid;p2.startSymbol.type = SymbolType.None;p2.endSymbol.type = SymbolType.None;//端点数据加入直线中line1.data.Add(p1);line1.data.Add(p2);//刷新所有的组件【不刷新的话,发现不能画直线】chart.RefreshAllComponent();}#if UNITY_EDITOR[ContextMenu("测试")]
#endifvoid Test(){DrawScatterFlow();}
}

相关文章:

Unity中画2D图表(2)——用XChart包绘制散点分布图 + 一条直线方程

散点图用于显示关系。 对于 【相关性】 &#xff0c;散点图有助于显示两个变量之间线性关系的强度。 对于 【回归】 &#xff0c;散点图常常会添加拟合线。 举例1&#xff1a;你可以展示【年降雨量】与【玉米亩产量】的关系 举例2&#xff1a;你也可以分析各个【节假日】与【大…...

Go 排序包 sort

写在前面的使用总结&#xff1a; 排序结构体 实现Len&#xff0c;Less&#xff0c;Swap三个函数 package main import ( "fmt" "sort") type StuScore struct { name string score int } type StuScores []StuScore func (s StuScores) Len(…...

Java Email 发HTML邮件工具 采用 freemarker模板引擎渲染

Java Email 发HTML邮件工具 采用 freemarker模板引擎 1.常用方式对比 Java发送邮件有很多的实现方式 第一种&#xff1a;Java 原生发邮件mail.jar和activation.jar <!-- https://mvnrepository.com/artifact/javax.mail/mail --> <dependency><groupId>jav…...

CNI 网络流量分析(六)Calico 介绍与原理(二)

文章目录CNI 网络流量分析&#xff08;六&#xff09;Calico 介绍与原理&#xff08;二&#xff09;CNIIPAM指定 IP指定非 IPAM IPCNI 网络流量分析&#xff08;六&#xff09;Calico 介绍与原理&#xff08;二&#xff09; CNI 支持多种 datapath&#xff0c;默认是 linuxDa…...

短视频标题的几种类型和闭坑注意事项

目录 短视频标题的几种类型 1、悬念式 2、蹭热门式 3、干货式 4、对比式方法 5、总分/分总式方法 6、挑战式方式 7、启发激励式 8、讲故事式 02注意事项 1、避免使用冷门、生僻词汇 标题是点睛之笔&#xff0c;核心是视频内容 短视频标题的几种类型 1、悬念式 通过…...

操作系统——1.操作系统的概念、定义和目标

目录 1.概念 1.1 操作系统的种类 1.2电脑的组成 1.3电脑组成的介绍 1.4操作系统的概念&#xff08;定义&#xff09; 2.操作系统的功能和目标 2.1概述 2.2 操作系统作为系统资源的管理者 2.3 操作系统作为用户和计算机硬件间的接口 2.3.1用户接口的解释 2.3.2 GUI 2.3.3接…...

【html弹框拖拽和div拖拽功能】原生html页面引入vue语法后通过自定义指令简单实现div和弹框拖拽功能

前言 这是html版本的。只是引用了vue的语法。 这是很多公司会出现的一种情况&#xff0c;就是原生的页面&#xff0c;引入vue的语法开发 这就导致有些vue上很简单的功能。放到这里需要转换一下 以前写过一个vue版本的帖子&#xff0c;现在再加一个html版本的。 另一个vue版本…...

2023新华为OD机试题 - 计算网络信号(JavaScript) | 刷完必过

计算网络信号 题目 网络信号经过传递会逐层衰减,且遇到阻隔物无法直接穿透,在此情况下需要计算某个位置的网络信号值。 注意:网络信号可以绕过阻隔物 array[m][n] 的二维数组代表网格地图,array[i][j] = 0代表 i 行 j 列是空旷位置;array[i][j] = x(x 为正整数)代表 i 行 …...

27.边缘系统的架构

文章目录27 Architecures for the Edge 边缘系统的架构27.1 The Ecosystem of Edge-Dominant Systems 边缘主导系统的生态系统27.2 Changes to the Software Development Life Cycle 软件开发生命周期的变化27.3 Implications for Architecture 对架构的影响27.4 Implications …...

机器学习强基计划8-1:图解主成分分析PCA算法(附Python实现)

目录0 写在前面1 为什么要降维&#xff1f;2 主成分分析原理3 PCA与SVD的联系4 Python实现0 写在前面 机器学习强基计划聚焦深度和广度&#xff0c;加深对机器学习模型的理解与应用。“深”在详细推导算法模型背后的数学原理&#xff1b;“广”在分析多个机器学习模型&#xf…...

Hudi-集成Spark之spark-shell 方式

Hudi集成Spark之spark-shell 方式 启动 spark-shell &#xff08;1&#xff09;启动命令 #针对Spark 3.2 spark-shell \--conf spark.serializerorg.apache.spark.serializer.KryoSerializer \--conf spark.sql.catalog.spark_catalogorg.apache.spark.sql.hudi.catalog.Hoo…...

Python爬虫:从js逆向了解西瓜视频的下载链接的生成

前言 最近花费了几天时间,想获取西瓜视频这个平台上某个视频的下载链接,运用js逆向进行获取。其实,如果小编一开始就注意到这一点(就是在做js逆向时,打了断点之后,然后执行相关代码,查看相关变量的值,结果一下子就蹦出很多视频相关的数据,查看了网站下的相关api链接,也…...

Numpy-如何对数组进行切割

前言 本文是该专栏的第24篇,后面会持续分享python的数据分析知识,记得关注。 继上篇文章,详细介绍了使用numpy对数组进行叠加。本文再详细来介绍,使用numpy如何对数组进行切割。说句题外话,前面有重点介绍numpy的各个知识点。 感兴趣的同学,可查看笔者之前写的详细内容…...

Python之字符串精讲(下)

前言 今天继续讲解字符串下半部分&#xff0c;内容包括字符串的检索、大小写转换、去除字符串中空格和特殊字符。 一、检索字符串 在Python中&#xff0c;字符串对象提供了很多用于字符串查找的方法&#xff0c;主要给大家介绍以下几种方法。 1. count() 方法 count() 方法…...

Python图像卡通化animegan2-pytorch实例演示

先看下效果图&#xff1a; 左边是原图&#xff0c;右边是处理后的图片&#xff0c;使用的 face_paint_512_v2 模型。 项目获取&#xff1a; animegan2-pytorch 下载解压后 cmd 可进入项目地址的命令界面。 其中 img 是我自己建的&#xff0c;用于存放图片。 需要 torch 版本 …...

谢希仁版《计算机网络》期末总复习【完结】

文章目录说明第一章 计算机网络概述计算机网络和互联网网络边缘网络核心分组交换网的性能网络体系结构控制平面和数据平面第二章 IP地址分类编址子网划分无分类编址特殊用途的IP地址IP地址规划和分配第三章 应用层应用层协议原理万维网【URL / HTML / HTTP】域名系统DNS动态主机…...

问:React的useState和setState到底是同步还是异步呢?

先来思考一个老生常谈的问题&#xff0c;setState是同步还是异步? 再深入思考一下&#xff0c;useState是同步还是异步呢&#xff1f; 我们来写几个 demo 试验一下。 先看 useState 同步和异步情况下&#xff0c;连续执行两个 useState 示例 function Component() {const…...

深度理解机器学习16-门控循环单元

评估简单循环神经网络的缺点。 描述门控循环单元&#xff08;Gated Recurrent Unit&#xff0c;GRU&#xff09;的架构。 使用GRU进行情绪分析。 将GRU应用于文本生成。 基本RNN通常由输入层、输出层和几个互连的隐藏层组成。最简单的RNN有一个缺点&#xff0c;那就是它们不…...

Python中Generators教程

要想创建一个iterator&#xff0c;必须实现一个有__iter__()和__next__()方法的类&#xff0c;类要能够跟踪内部状态并且在没有元素返回的时候引发StopIteration异常. 这个过程很繁琐而且违反直觉.Generator能够解决这个问题. python generator是一个简单的创建iterator的途径…...

数据结构与算法基础-学习-10-线性表之栈的清理、销毁、压栈、弹栈

一、函数实现1、ClearSqStack&#xff08;1&#xff09;用途清理栈的空间。只需要栈顶指针和栈底指针相等&#xff0c;就说明栈已经清空&#xff0c;后续新入栈的数据可以直接覆盖&#xff0c;不用实际清理数据&#xff0c;提升了清理效率。&#xff08;2&#xff09;源码Statu…...

Leetcode 每日一题 1234. 替换子串得到平衡字符串

Halo&#xff0c;这里是Ppeua。平时主要更新C语言&#xff0c;C&#xff0c;数据结构算法......感兴趣就关注我吧&#xff01;你定不会失望。 &#x1f308;个人主页&#xff1a;主页链接 &#x1f308;算法专栏&#xff1a;专栏链接 我会一直往里填充内容哒&#xff01; &…...

【MYSQL中级篇】数据库数据查询学习

&#x1f341;博主简介 &#x1f3c5;云计算领域优质创作者   &#x1f3c5;华为云开发者社区专家博主   &#x1f3c5;阿里云开发者社区专家博主 &#x1f48a;交流社区&#xff1a;运维交流社区 欢迎大家的加入&#xff01; 相关文章 文章名文章地址【MYSQL初级篇】入门…...

华为OD机试真题JAVA实现【火星文计算】真题+解题思路+代码(20222023)

🔥系列专栏 华为OD机试(JAVA)真题目录汇总华为OD机试(Python)真题目录汇总华为OD机试(C++)真题目录汇总华为OD机试(JavaScript)真题目录汇总文章目录 🔥系列专栏题目输入输出描述示例一输入输出说明解题思路核心知识点Code运行结果版...

Linux基础知识

♥️作者&#xff1a;小刘在C站 ♥️个人主页&#xff1a;小刘主页 ♥️每天分享云计算网络运维课堂笔记&#xff0c;努力不一定有收获&#xff0c;但一定会有收获加油&#xff01;一起努力&#xff0c;共赴美好人生&#xff01; ♥️夕阳下&#xff0c;是最美的绽放&#xff0…...

Linux 游戏性能谁的 更优秀X.Org还是Wayland!

导读X.Org 和 Wayland 是目前 Linux 平台上的两大主流显示服务器&#xff0c;那么两者在 Linux 游戏性能上谁更优秀呢&#xff1f;国外科技媒体 Phoronix 在 Ubuntu 22.10 上对其进行了多款游戏的实测。评测在运行 GNOME 43.1 的 Ubuntu 22.10 上进行测试&#xff0c;在安装英伟…...

【数据结构】算法的复杂度分析:让你拥有未卜先知的能力

&#x1f451;专栏内容&#xff1a;数据结构⛪个人主页&#xff1a;子夜的星的主页&#x1f495;座右铭&#xff1a;日拱一卒&#xff0c;功不唐捐 文章目录一、前言二、时间复杂度1、定义2、大O的渐进表示法3、常见的时间复杂度三、空间复杂度1、定义2、常见的空间复杂度一、前…...

Linux根文件系统移植

目录 一、根文件系统 1.1根文件系统 1.2根文件系统内容 二、根文件系统移植 2.1BusyBox 2.2BusyBox的获取 2.3BusyBox的使用 2.4make menuconfig 2.5编译和安装 2.6修改根文件系统 一、根文件系统 1.1根文件系统 根文件系统是内核启动后挂载的第一个文件系统系统引…...

Three.js 无限平面快速教程【Plane】

Three.js 提供了 Plane 概念来表示在 3d 空间中无限延伸的二维表面。 这对于光标交互很有用&#xff0c;因此你可能需要了解如何设置此平面、将其可视化并根据需要进行调整。 推荐&#xff1a;使用 NSDT场景设计器 快速搭建 3D场景。 Three.js 的 Plane 文档很好而且准确&…...

在线预览PDF文件、图片,并且预览地址不显示文件或图片的真实路径。

实现在线预览PDF文件、图片&#xff0c;并且预览地址不显示文件或图片的真实路径。1、vue使用blob流在线预览PDF、图片&#xff08;包括jpg、png等格式&#xff09;。1、按钮的方法&#xff1a;2、方法详细&#xff1a;&#xff08;此方法可以在发起请求时携带token&#xff0c…...

Allegro如何设置导入Subdrawing可自由选择目录操作指导

Allegro如何设置导入Subdrawing可自由选择目录操作指导 用Allgro做PCB设计的时候,导入Subdrawing是非常常用的功能,在导入Subdrawing的时候,通常需要把Subdrawing文件放在需要导入PCB的相同目录下,不能自由选择,如下图 但是Allegro是支持自由选择目录的,只需按照下方的步…...