Axure设计之动态条形图教程(中继器)

在Axure RP中,中继器是一个非常强大的工具,它允许我们动态地展示数据,并且可以轻松实现复杂的交互效果。本文将详细介绍如何使用中继器来制作一个动态条形图,并展示其在实际项目中的应用。

一、效果预览

预览地址:https://1zvcwx.axshare.com

在这个动态条形图中,我们可以自由变换样式和颜色,并且当鼠标移入时,能够显示具体的数据值。

二、中继器的基本使用方法

1. 创建中继器

首先,在Axure的画布中拖入一个中继器元件。双击打开中继器后,我们会发现里面默认包含一个矩形,但实际上,我们可以通过设置“每项加载时”的事件来动态生成多个矩形(即条形图的柱子)。

2. 设置中继器数据

中继器的数据是通过“数据集”(Dataset)来管理的。我们可以在中继器的样式面板中找到数据集部分,并添加所需的列(例如,d为中坐标,y1y2y3等为具体数值)。这些列名即为我们后续引用的变量名。

3. 布局与样式设置

中继器默认是垂直布局的,但根据项目需要,我们也可以设置为水平布局。在样式面板中,我们可以设置矩形(即条形图柱子)的尺寸、颜色等样式。例如,我们可以设置三个矩形,分别代表不同的数据系列,每个矩形的尺寸和颜色可以根据需要进行调整。

三、动态条形图的制作方法

1. 放置矩形

在中继器内部,我们需要放置多个矩形来代表条形图的柱子。根据前面的数据设置,我们可以放置三个矩形,并分别设置它们的尺寸和颜色。

2. 设置交互

为了实现鼠标移入时显示具体数据的效果,我们需要为中继器内的矩形设置交互动作。具体来说,我们可以在“每项加载时”的事件中,为每个矩形设置“鼠标移入”时显示文本(即数据值)的交互。这通常涉及到使用“动态面板”或“文本”元件来显示数据,并通过设置“显示/隐藏”的交互动作来实现。

3. 引用数据变量

为了让条形图根据数据动态变化,我们需要在中继器的矩形中引用数据变量。这可以通过在矩形的尺寸或文本属性中使用[[Item.varName]]的语法来实现,其中varName是我们在数据集中定义的变量名。

四、案例分享

中继器在Axure中的应用非常广泛,不仅可以用来制作动态条形图,还可以实现表格合集(增、删、查、分页)、带图列表展示、双向列选择、二级菜单、列表操作(拖动、编辑)、标签分类筛选等多种复杂的交互效果。

例如,我们可以使用中继器来制作一个动态添加和删除“标签”的交互效果,或者实现一个投票系统的原型设计。这些案例都充分展示了中继器在Axure设计中的强大功能。

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

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

相关文章

存储与传输/大小端字节序的概念、决定因素、给编程带来的困扰

文章目录 概述大小端分歧的类比为什么要关注字节序NET网络字节序什么时候必须转换字节序大小端字节序哪个优秀判断系统字节序类型字节序类型转换大小端内存监视和调试 谁决定了大小端模式CPU架构决定大小端操作系统影响大小端?编译器也影响大小端?可配置…

如何完美备份自己的微博,即使是封号之后

感谢 https://github.com/Chilfish/Weibo-archiver 工具和环境 可以用chrome插件的浏览器, 比如opera安装篡改猴插件安装nodejsvscode 第一步,安装浏览器插件 安装Tampermonkey 然后打开https://raw.githubusercontent.com/Chilfish/Weibo-archiver/m…

MS2232/MS2232T——±20kV ESD 保护、3V-5.5V 供电、真 RS-232 收发器

MS2232/MS2232T 芯片是集成电荷泵、具有 20kV ESD 保护的 RS-232 收发器,包括两路接收器、两路发送器。芯 片满足 TIA/EIA-232 标准,为异步通信控制器和串口连接器 提供通信接口。 芯片采用 3V-5.5V 供电,电荷泵仅用 4 个 0.1-0.47μF 小…

c++ 谷歌的招聘 题解

题目描述 2004 年 7 月,谷歌在硅谷的 101 号公路边竖立了一块巨大的广告牌(如下图)用于招聘 内容超级简单,就是一个以 .com 结尾的网址,而前面的网址是一个 10 位素数,这个素数是自然常数 e 中最早出现的 10 位连续数字 能找出这个素数的人,就可以通过访问谷歌的这个网站进入…

Final Cut Pro Mac(fcpx专业视频剪辑软件) 10.8 中文版安装

Final Cut Pro 是苹果公司为专业视频编辑人士量身打造的非线性编辑软件,以其卓越的性能和深度定制的工具集,在影视制作、电视广播、广告创意等多个领域占据了重要地位。凭借其对高分辨率视频的无缝支持和实时剪辑的流畅体验,Final Cut Pro 成…

【Linux】简易日志工具项目

有些鸟儿是不应该被关在笼子里的, 因为他们的羽毛太丰润了。 当他们飞走,你会由衷地庆贺他获得自由。 --- 肖申克的救赎》--- 从零开始构建简易日志系统 1 日志1.1 什么是日志1.2 日志的意义1.3 为什么要构建自己的日志工具 2 构建自己的日志工具2.1…

gin快速入门

gin 项目地址晓智科技晓智科技晓智文档晓智文档文档源码文档源码 快速体验 func HandlerPong(c *gin.Context) {c.JSON(http.StatusOK, gin.H{"message": "pong",}) }func main() {r : gin.Default()r.GET("/ping", HandlerPong)_ r.Run(&qu…

Windows电脑自建我的世界MC服务器并与好友远程联机游戏教程

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

美股收涨,半导体板块领涨;苹果iPhone出货预测上调

市场概况 在昨夜的交易中,美股三大股指全线收涨。道琼斯工业平均指数上涨1.39%,纳斯达克综合指数上涨2.34%,标准普尔500指数上涨1.61%。值得注意的是,英伟达股票涨幅近4%,推动了科技股的整体表现。美国十年期国债收益…

vue3使用i18n实现国际化

安装vue-i18n npm install vue-i18n创建一个ts文件用于存储各种翻译 globalLang.ts的内容如下: export default {"cn": {},"en": {},"de": {},"es": {},"fr": {},"id": {},"it": {},&quo…

【Linux操作系统】进程间通信(1)

目录 一、认识进程间通信二、匿名管道三、命名管道 一、认识进程间通信 进程间不能直接传递数据,因为进程具有独立性,直接传递会破坏进程的独立性。 进程间通信是什么? 一个进程把自己的数据交给另一个进程。 为什么要有进程间通信&#xf…

DAG计算框架:实现业务编排

文章目录 DAG如何实现DAG计算框架Node的实现Engine的实现Graph的实现具体某个节点如何使用 在工作几年之后,大部分人如果还在继续做着 CRUD的简单重复工作,即使领导不提出对你更高的期望,自身也会感到焦虑吧。学如逆水行舟不进则退&#xff…

怎么整合spring security和JWT

什么是spring security spring security是一个安全框架,它里面有过滤器链,可以多次过滤,其实他可以给前端的cookie传入一个jsessionid,都可以不使用jwt也能完成校验 第一步:导入依赖 <!-- springboot security --> <dependency><groupId>org.springframew…

git错误fatal: Unpack error, check server log

git错误fatal: Unpack error, check server log fatal: Unpack error, check server log error: remote unpack failed: error Missing tree xxxxxxxxxxxxxxxxxx 先执行 git fetch 命令&#xff0c;再push。 git拉取远程所有分支/添加远程仓库_git pull所有分支代码-CSDN博客…

OpenGL-ES 学习(8) ---- FBO

目录 FBO OverViewFBO 优点使用FBO的步骤 FBO OverView FBO(FrameBuffer Object) 指的是帧缓冲对象&#xff0c;实际上是一个可以添加缓冲区容器&#xff0c;可以为其添加纹理或者渲染缓冲区对象(RBO) FBO(FrameBuffer Object) 本身不能用于渲染&#xff0c;只有添加了纹理或者…

【C++ Primer Plus习题】3.6

问题: 解答: #include <iostream> using namespace std;int main() {float miles 0;float gallons 0;float gallon 0;cout << "请输入驱车里程(单位为英里):";cin >> miles;cout << "请输入使用的汽油量(单位为加仑):";cin &g…

【Three.js基础学习】19.Custom models with Blender

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 前言 blender模型资源:【blender】一个汉堡包-CSDN博客 一、代码 import ./style.css import * as THREE from three import { OrbitControls } from three/examples/jsm/co…

CentOS服务器三级等保加固

1.密码周期: vim /etc/login.defs max_days:90 mindays:2 minlen:8 warnage:72.密码复杂度: vim /etc/pam.d/system-auth &#xff1a; password requisite pam_cracklib.so retry3 difok3 minlen8 lcredit-1 dcredit-1 ucredit-1 ocredit-1 【Ubuntu系统->vim /etc/pam.d/c…

【STM32】C语言基础补充

学习过程中发现自己好些需要用到的C语言语法、特征都不太熟练了&#xff0c;特意记录一下&#xff0c;免得忘记了&#xff0c;以后遇到了新的也会继续更新 目录 1 全局变量 2 结构体 3 静态变量 4 memset()函数 5 使用8位的存储器存16位的数 1 全局变量…

C++学习笔记----4、用C++进行程序设计(四)---- 复合关系与继承关系之间的细线

在现实世界只是很容易区分对象之间是复合关系还是继承关系。没有人会说桔子有一个水果--而只能是桔子是一种水果。但是&#xff0c;在代码中&#xff0c;有时候就不是那么清晰了。 设想有一个代表关联数组的假想类&#xff0c;将一个键影射到一个值的数据结构。例如&#xff0c…