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

【Axure教程】用中继器制作双坐标柱状折线图

双坐标柱状折线图常用于同时展示两组数据的图表类型,每组数据都有自己的纵坐标轴(Y轴)。一组数据通常用柱状图表示,而另一组数据则用折线图表示。这种图表类型有助于比较两组数据之间的关系和趋势。

那今天作者就教大家,如何在Axure中用中继器制作双坐标柱状折线图的原型模板,制作完成后可以实现一下效果:

一、效果展示

1、自动生成图表效果:在中继器表格中填写维护项目数据,自动生成对应的图表

2、标签返回数值效果:鼠标移动对应的区域,会在标签里显示该区域柱状和折线图对应的数据

【原型预览含下载地址】

https://axhub.im/ax9/9a27399d9b2d17a5/#g=1&p=柱状折线图(双坐标)

二、制作教程

1、图表外框基础元件的制作

坐标轴——我们用几条水平线制作即可,最上方和最下方的用实线,最上方用虚线

纵坐标——我们用文本标签来制作,另外需要两个文本标签,记录两个纵坐标的最大值,后续需要用来制作交互,各个纵坐标可以手动填写,也可以通过设置文本的交互,根据最大值文本标签来设置,例如,最大值是5000,那么最上方的文本标签就是5000,第二个就是5000*4/5=4000,依次类推,我们在元件载入时,用设置文本的交互,把最大值看作变色,根据变量乘比值,就可以自动设置y坐标值

提示——我们用对应颜色的矩形制作方块,文本标签填写对应的提示文字,就是该颜色代表的项目名。

按下图所示摆放即可,具体位置可以自行调整

2、中继器内所需元件及表格制作

图表我们用中继器来制作,中继器里面我们需要的元件包括

矩形——用于制作柱状图

圆点和水平线——用于制作折线图

文本标签——对应的x横坐标的值

背景矩形——用于鼠标移入时高亮回显,默认透明即可,选中样式为浅色填充

将所有元件组合在一起,如下图所示摆放即可,布局选择水平

鼠标移入组合时,用选中的交互,设置背景矩形选中为真,鼠标移出时,设置选中状态为假。这里拓展一下,如果没有其他效果,其实也可以用悬停的样式,勾选组合允许鼠标触发内容交互样式,那就不用写效果可以移入变色。不过作者考虑后期移入选中后可以在选中时写交互,所以就用选中样式来坐坐高亮效果

中继器表格我们需要新建三列

text列:对应x坐标显示的文本值,在中继器每项加载时,我们用设置文本的交互,就可以把该列的值设置到对应的文本标签里

count列:对应折线图的数字(因为这个是在折线图基础上增加的柱状图,所以命名比较随意,大家也可以自行命名)

zhuzhuangtu列:对应柱状图的数据

3、柱状图的制作

那接下来我们写柱状图的交互,其实原理很简单,我们前面用文本记录了y坐标的最大值,然后我们用中继器表格里zhuangzhuangtu列的值除以y坐标的最大值,就可以得到一个比例,然后用这比例来乘以柱状图最高的高度,就可以求出当前柱状图的尺寸,我们在中继器每项加载时,用设置尺寸的交互,就可以将每行的柱状图设置为对应的尺寸

4、折线图的制作

折线图开始的原理和柱状图很像,柱状图是根据表格的数据值和y坐标最大值比例设置元件的高度,那折线图就是根据表格的数据值和y坐标最大值比例将元件和折线移动到对应的位置。

然后我们知道两点确认一条直线,所以如果是第一个点,是不需要有直线的,因为第一个第二个点结合才会出现直线。所以在第一行加载时,我们用隐藏的交互,将第一根折线隐藏起来。我们还要将第一个元件的y坐标值记录下来,我们要在中继器外面增加一个文本标签,默认隐藏,只用于记录前面一行圆点y的坐标值,我们成为y1

然后我们在加载第二行数据是,我们也是在中继器外面增加一个文本标签,用于记录当前行圆点y的坐标值。

然后我们根据两点间坐标公式d=√[(x1-x2)²+(y1-y2)²],,这样就可以求出直线的距离,y1,y2我们都知道了。x1-x2,其实就是每个图形之间的宽度,我们可以看作背景矩形的宽度,这样我们用设置尺寸就交互,就可以设置出对应长度的线段。

求完长度,我们还要求角度,可以用Math.atan2(y2-y1,x2-x1)*180/π来计算出两个点之间的交互,然后用旋转的交互,将线段设置到对应的角度,这两两点就连城线了

最后,我们用设置文本的交互,将当前行圆点的y坐标值设置到记录y1的文本标签里,那加载下一行的时候,就也能知道上一行的y1值了

5、标签的制作

主要材料包括:是矩形和文本标签

矩形用于制作背景矩形(增加隐藏效果),以及提示标点

文本标签用于返回项目值和具体数字

将上方元件组合在一起,如下图所示摆放,默认隐藏

在鼠标移入中继器内组合时,我们用显示的交互,将他显示出来,然后用设置文本的交互,将中继器表格里折线图和柱状图的值分别设置到对应的文本标签里

鼠标移出时,我们将标签组合隐藏即可。

这样标签就可以显示和隐藏了,最后,我们还要增加一个标签跟随鼠标移动的交互,我们在鼠标移动时,用移动的交互,移动标签组合,我们可以用cursor函数获取鼠标的x值和y值,然后移动到鼠标的右下方

这样我们就完成了中继器制作双坐标柱状折线图的原型模板,后续使用也很方便,只需要在中继器表格里维护项目、数据以及坐标轴最大值,即可自动生成对应的柱状折线图。

那以上就是本期教程的全部内容,感兴趣的同学们可以动手试试哦,感谢您的阅读,我们下期见。

相关文章:

【Axure教程】用中继器制作双坐标柱状折线图

双坐标柱状折线图常用于同时展示两组数据的图表类型,每组数据都有自己的纵坐标轴(Y轴)。一组数据通常用柱状图表示,而另一组数据则用折线图表示。这种图表类型有助于比较两组数据之间的关系和趋势。 那今天作者就教大家&#xff…...

C 风格文件输入/输出---错误处理---(std::clearerr,std::feof,std::ferror,std::perror)

C 标准库的 C I/O 子集实现 C 风格流输入/输出操作。 <cstdio> 头文件提供通用文件支持并提供有窄和多字节字符输入/输出能力的函数&#xff0c;而 <cwchar>头文件提供有宽字符输入/输出能力的函数。 错误处理 清除错误 std::clearerr void clearerr( std::FILE…...

mysql 主从复制 mysql版本5.7.35

文章目录 1.注意要点2.环境3.MySQL 主从配置的步骤&#xff1a;主从库新增DB主服务配置my.cnf从服务配置my.cnf主服务器创建复制用户从服务器执行复制 外传 MySQL 主从复制&#xff08;Master-Slave Replication&#xff09;是一个常用的高可用性和可扩展性解决方案。通过主从复…...

iOS“超级签名”绕过App Store作弊解决方案

一直以来&#xff0c;iOS端游戏作弊问题都是游戏行业的一大痛点。在当下游戏多端互通的潮流下&#xff0c;游戏作为一个整体&#xff0c;无论哪一端出现安全问题&#xff0c;都会造成更加严重的影响。因此&#xff0c;iOS端游戏安全保护也同样十分重要。 iOS独特的闭源生态&am…...

I2C子系统、读取温湿度的逻辑及代码

一、IIC子系统 两根线&#xff1a; scl:时钟线 sda:数据线 iic有4种信号&#xff1a; 起始信号&#xff08;start&#xff09;:scl是高电平&#xff0c;sda下降沿 终止信号&#xff08;stop&#xff09;:scl高电平&#xff0c;sda上升沿 应答信号&#xf…...

数据结构——排序

排序算法 前言一、认识排序排序的概念常见的排序算法排序实现的接口 二、常见排序算法的实现插入排序直接插入排序希尔排序 选择排序直接选择排序堆排序 交换排序冒泡排序 三、各个排序的效率比较四、完整代码演示&#xff1a;shell_insert.hshell_insert.ctest.c 总结 前言 来…...

资深java面试题及答案整理

编写 Java 程序时, 如何在 Java 中创建死锁并修复它&#xff1f; 经典但核心Java面试问题之一。 如果你没有参与过多线程并发 Java 应用程序的编码&#xff0c;你可能会失败。 如何避免 Java 线程死锁&#xff1f; 如何避免 Java 中的死锁&#xff1f;是 Java 面试的热门问题之…...

buuctf-[网鼎杯 2020 朱雀组]phpweb

1.打开网站&#xff0c;吓我一跳 2.查看源代码&#xff0c;主要看到timezone&#xff0c;然后这个页面是五秒就会刷新一次 一开始去搜了这个&#xff0c;但是没什么用 3.使用bp抓包 会发现有两个参数&#xff0c;应该是用func来执行p 4.修改func和p file_get_contents&#…...

SpringBoot实战(二十四)集成 LoadBalancer

目录 一、简介1.定义2.取代 Ribbon3.主要特点与功能4.LoadBalancer 和 OpenFeign 的关系 二、使用场景一&#xff1a;Eureka LoadBalancer服务A&#xff1a;loadbalancer-consumer 消费者1.Maven依赖2.application.yml配置3.RestTemplateConfig.java4.DemoController.java 服务…...

文件挂载nas挂载

准备资源 nas服务器&#xff1a; 192.168.1.2 分配的nas卷名&#xff1a; mynasvolumename 在本地机器挂载nas卷 mkdir -p /mnt/localmountdir 执行挂载 mount -t nfs 192.168.1.2:mynasvolumename/ /mnt/localmountdir 本地进入nas目录 cd /mnt/localmountdir 可以…...

电影格式怎么转换mp4?电影格式转换教程

电影格式怎么转换mp4&#xff1f;平时喜欢看电影的小伙伴都知道&#xff0c;平时我们下载到的电影文件格式可谓是五花八门&#xff0c;如Mp4、Flv、AVI、WMV、MKV、MOV等。然而&#xff0c;相较于其他常用格式&#xff0c;MP4是一种使用最为广泛的视频格式&#xff0c;并且文件…...

HarmonyOS之 组件的使用

一 容器 1.1 容器分类 Column表示沿垂直方向布局的容器。Row表示沿水平方向布局的容器。 1.2 主轴和交叉轴 主轴&#xff1a;在Column容器中的子组件是按照从上到下的垂直方向布局的&#xff0c;其主轴的方向是垂直方向&#xff1b;在Row容器中的组件是按照从左到右的水平方向…...

IAM:身份验证与授权

身份验证和授权可能听起来相似&#xff0c;但在核心功能方面它们是不同的。身份验证和授权是在用户尝试访问其资源时执行的安全过程。身份验证和授权在防止网络安全漏洞和加强组织的安全系统方面发挥着至关重要的作用。 验证&#xff1a;验证用户的身份 - 用户是谁&#xff1f…...

Linux——vi编辑器

目录 一、基本简介 二、命令模式下的常用按键 1、光标跳转按键 2、复制、粘贴、删除 三、编辑模式 四、末行模式 1、查找关键字并替换 2、保存退出 3、其他操作 五、模式切换 一、基本简介 1、最早可追随到1991年&#xff0c;全称为“Vi IMproved” 2、模式 ——命…...

【Linux学习笔记】权限

1. 普通用户和root用户权限之间的切换2. 权限的三个w2.1. 什么是权限&#xff08;what&#xff09;2.1.1. 用户角色2.1.2. 文件属性 2.2. 怎么操作权限呢&#xff1f;&#xff08;how&#xff09;2.2.1. ugo-rwx方案2.2.2. 八进制方案2.2.3. 文件权限的初始模样2.2.4. 进入一个…...

Aspose转pdf乱码问题

一、问题描述 ​ 在centos服务器使用aspose.word转换word文件为pdf的时候显示中文乱码(如图)&#xff0c;但是在win服务器上使用可以正常转换 二、问题原因 由于linux服务器缺少对应的字库导致文件转换出现乱码的 三、解决方式 1.将window中字体(c:\windows\fonts)放到linux…...

table中的td内部的元素不能与td等高的问题

解决该问题的办法: td标签内部的元素使用table布局&#xff0c;但是需要注意的是td必须设置高度&#xff0c;高度为任意值都可以&#xff0c;虽然设置了高度&#xff0c;但是td依然会被内部内容的高度撑开 <template><table><tr><td><div class&q…...

Layui + Flask | 实现数据表格修改(案例篇)(09)

此案例内容比较多,建议滑到最后点击阅读原文,阅读体验更佳。后续也会录制案例视频,将在本周内上传到同名的 b 站账号。 接下来演示用 flask + layui 搭建一个学员信息管理的案例 这个案例将会利用 flask 做后端,layui table 组件做前端,基于 restful api 完成一个学员信息…...

BCC源码编译和安装

接前一篇文章&#xff1a;BCC源码下载 1. 进入源码根目录 进入到BCC源码根目录。命令及结果如下&#xff1a; $ cd bcc ~/eBPF/BCC/bcc$ ls cmake CONTRIBUTING-SCRIPTS.md docs images libbpf-tools man scripts src CMakeLists.txt …...

linux上gitlab备份与还原

三 Gitlab备份 1.gitlab安装 1.1 添加镜像地址 添加镜像地址的目的是为了提高国内用户软件下载的速度&#xff0c;编辑(新建)文件gitlab-ce.repo&#xff0c;指令&#xff1a; vi /etc/yum.repos.d/gitlab-ce.repo复制 输入&#xff1a; [gitlab-ce] namegitlab-ce # 清华…...

后进先出(LIFO)详解

LIFO 是 Last In, First Out 的缩写&#xff0c;中文译为后进先出。这是一种数据结构的工作原则&#xff0c;类似于一摞盘子或一叠书本&#xff1a; 最后放进去的元素最先出来 -想象往筒状容器里放盘子&#xff1a; &#xff08;1&#xff09;你放进的最后一个盘子&#xff08…...

接口测试中缓存处理策略

在接口测试中&#xff0c;缓存处理策略是一个关键环节&#xff0c;直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性&#xff0c;避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明&#xff1a; 一、缓存处理的核…...

现代密码学 | 椭圆曲线密码学—附py代码

Elliptic Curve Cryptography 椭圆曲线密码学&#xff08;ECC&#xff09;是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础&#xff0c;例如椭圆曲线数字签…...

【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控,故障处理工具

第2章 虚拟机性能监控&#xff0c;故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令&#xff1a;jps [options] [hostid] 功能&#xff1a;本地虚拟机进程显示进程ID&#xff08;与ps相同&#xff09;&#xff0c;可同时显示主类&#x…...

网络编程(UDP编程)

思维导图 UDP基础编程&#xff08;单播&#xff09; 1.流程图 服务器&#xff1a;短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...

selenium学习实战【Python爬虫】

selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...

重启Eureka集群中的节点,对已经注册的服务有什么影响

先看答案&#xff0c;如果正确地操作&#xff0c;重启Eureka集群中的节点&#xff0c;对已经注册的服务影响非常小&#xff0c;甚至可以做到无感知。 但如果操作不当&#xff0c;可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...

服务器--宝塔命令

一、宝塔面板安装命令 ⚠️ 必须使用 root 用户 或 sudo 权限执行&#xff01; sudo su - 1. CentOS 系统&#xff1a; yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...

中医有效性探讨

文章目录 西医是如何发展到以生物化学为药理基础的现代医学&#xff1f;传统医学奠基期&#xff08;远古 - 17 世纪&#xff09;近代医学转型期&#xff08;17 世纪 - 19 世纪末&#xff09;​现代医学成熟期&#xff08;20世纪至今&#xff09; 中医的源远流长和一脉相承远古至…...

基于IDIG-GAN的小样本电机轴承故障诊断

目录 🔍 核心问题 一、IDIG-GAN模型原理 1. 整体架构 2. 核心创新点 (1) ​梯度归一化(Gradient Normalization)​​ (2) ​判别器梯度间隙正则化(Discriminator Gradient Gap Regularization)​​ (3) ​自注意力机制(Self-Attention)​​ 3. 完整损失函数 二…...