当前位置: 首页 > 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 # 清华…...

CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型

CVPR 2025 | MIMO&#xff1a;支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题&#xff1a;MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者&#xff1a;Yanyuan Chen, Dexuan Xu, Yu Hu…...

html-<abbr> 缩写或首字母缩略词

定义与作用 <abbr> 标签用于表示缩写或首字母缩略词&#xff0c;它可以帮助用户更好地理解缩写的含义&#xff0c;尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时&#xff0c;会显示一个提示框。 示例&#x…...

wpf在image控件上快速显示内存图像

wpf在image控件上快速显示内存图像https://www.cnblogs.com/haodafeng/p/10431387.html 如果你在寻找能够快速在image控件刷新大图像&#xff08;比如分辨率3000*3000的图像&#xff09;的办法&#xff0c;尤其是想把内存中的裸数据&#xff08;只有图像的数据&#xff0c;不包…...

系统掌握PyTorch:图解张量、Autograd、DataLoader、nn.Module与实战模型

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文通过代码驱动的方式&#xff0c;系统讲解PyTorch核心概念和实战技巧&#xff0c;涵盖张量操作、自动微分、数据加载、模型构建和训练全流程&#…...

redis和redission的区别

Redis 和 Redisson 是两个密切相关但又本质不同的技术&#xff0c;它们扮演着完全不同的角色&#xff1a; Redis: 内存数据库/数据结构存储 本质&#xff1a; 它是一个开源的、高性能的、基于内存的 键值存储数据库。它也可以将数据持久化到磁盘。 核心功能&#xff1a; 提供丰…...

Java后端检查空条件查询

通过抛出运行异常&#xff1a;throw new RuntimeException("请输入查询条件&#xff01;");BranchWarehouseServiceImpl.java // 查询试剂交易&#xff08;入库/出库&#xff09;记录Overridepublic List<BranchWarehouseTransactions> queryForReagent(Branch…...

统计学(第8版)——统计抽样学习笔记(考试用)

一、统计抽样的核心内容与问题 研究内容 从总体中科学抽取样本的方法利用样本数据推断总体特征&#xff08;均值、比率、总量&#xff09;控制抽样误差与非抽样误差 解决的核心问题 在成本约束下&#xff0c;用少量样本准确推断总体特征量化估计结果的可靠性&#xff08;置…...

深入浅出JavaScript中的ArrayBuffer:二进制数据的“瑞士军刀”

深入浅出JavaScript中的ArrayBuffer&#xff1a;二进制数据的“瑞士军刀” 在JavaScript中&#xff0c;我们经常需要处理文本、数组、对象等数据类型。但当我们需要处理文件上传、图像处理、网络通信等场景时&#xff0c;单纯依赖字符串或数组就显得力不从心了。这时&#xff…...

如何让非 TCP/IP 协议驱动屏蔽 IPv4/IPv6 和 ARP 报文?

——从硬件过滤到协议栈隔离的完整指南 引言 在现代网络开发中,许多场景需要定制化网络协议(如工业控制、高性能计算),此时需确保驱动仅处理特定协议,避免被标准协议(如 IPv4/IPv6/ARP)干扰。本文基于 Linux 内核驱动的实现,探讨如何通过硬件过滤、驱动层拦截和协议栈…...

2025年上海市“星光计划”第十一届职业院校技能大赛 网络安全赛项技能操作模块样题

2025年上海市“星光计划”第十一届职业院校技能大赛 网络安全赛项技能操作模块样题 &#xff08;二&#xff09;模块 A&#xff1a;安全事件响应、网络安全数据取证、应用安全、系统安全任务一&#xff1a;漏洞扫描与利用:任务二&#xff1a;Windows 操作系统渗透测试 :任务三&…...