Axure教程——用中继器制作动态柱状图

news/2024/10/30 15:24:19/

今天作者就教大家在Axure里面如何用中继器做一个可以动态的柱状图。
制作完成之应具备以下交互效果:
1.在中继器表格中填写具体数据和坐标轴后,自动生成对应的柱状图
2.鼠标移动到每项,显示其数据

在这里插入图片描述
预览地址:https://tj4v11.axshare.com
原型下载地址:https://download.csdn.net/download/weixin_43516258/87761566

柱状图的制作

  1. 中继器表格的填写
    柱状图我们需要用中继器制作,中继器内部表格是存放具体数据的位置。我们需要增加一下几列数据:
    d:对应柱状图的横坐标文字
    y:分别数据对应在这里插入图片描述

  2. 中继器内部元件
    柱状图我们用中继器来制作,中继器内部元件包括、蓝色条形(矩形)、透明背景(矩形)、横坐标文字(文本标签),如下图所示摆放
    3.
    3.矩形
    我们用矩形来显示具体的数据,矩形背景为#333333,设置为隐藏状态
    在这里插入图片描述

  3. 坐标和边线
    这样柱状图就可以自动生成了,接下来我们回到中继器外面,增加边线和y坐标值,如下图所示摆放:
    在这里插入图片描述

交互设置
1、中继器内部
点击进入中继器,鼠标移入该组合时
在这里插入图片描述
鼠标移出该组合时
在这里插入图片描述
2、中继器
点击中继器,每项加载时
在这里插入图片描述
3、矩形
点击矩形,鼠标移出时
在这里插入图片描述
这样我们就完成动态柱状图原型模板的制作了,以后使用时只需要在中继器表格里填写内容,就可自动生成能切换查看不同数据的柱状图,是不是很方便呢。


http://www.ppmy.cn/news/61410.html

相关文章

让Python也能读取yaml配置

在 Python 中,可以使用 PyYAML 库来解析和生成 YAML 格式的配置文件,以实现环境配置。以下是一个使用 PyYAML 库读取 YAML 配置文件并将其应用到应用程序中的 Python 代码示例: 安装 PyYAML 库 pip install pyyaml创建 YAML 配置文件 # co…

射频功率放大器在S180肿瘤细胞膜研究中的应用

实验名称:聚焦超声对S180肿瘤细胞膜理化性质的影响 研究方向:生物医疗 测试目的: 细胞膜是细胞生命活动中有着复杂功能的重要结构其基本作用在于维持细胞内外环境的相对稳定而其通透性、完整性及流动性等理化性质则与胞内外信息传递、物质…

天梯赛L1-001 ~ 010

👂 White Lie - Jhameel - 单曲 - 网易云音乐 👂 丁丁猫儿 - 施鑫文月 - 单曲 - 网易云音乐 今年蓝桥 / 天梯都陪跑,希望明年,蓝桥杯省一(CA组60分),天梯赛国三(180分)…

微机作业题

答案做的,正确性不保证。 1. 微型计算机的性能主要取决( A )的性能。 A. CPU B. 显示器 C. 硬盘 D. U盘 2. 计算机的工作过程,本质是( A )的过程。 A. 进行科学计算 …

registry私有仓库搭建

目录 一、搭建本地仓库 1、首先下载registry镜像 2、在daemon.json文件中添加私有镜像仓库地址 3、运行registry容器 4、为镜像打标签 5、上传到私有仓库 6、列出私有仓库的所有镜像 7、列出私有仓库的centos 镜像有哪些tag 8、先删除原有的centos的镜像,再…

【Linux Network】网络编程套接字

目录 1. 源IP地址与目的IP地址的认识 2. 端口号的认识 3. 套接字socket 4. TCP协议和UDP协议 5. 网络字节序 6. socket编程 7. socket编程接口 8. 使用UDP协议跨网络通信程序 Linux网络编程✨ 1. 源IP地址与目的IP地址的认识 在因特网上,一台主机和一个IP地址往往是…

定积分比较大小的常用手段。

1.常用手段 ①区间对称&#xff0c;利用被积函数奇偶性 ②放缩(利用常用不等式,结论等) ③将 1 转换成定积分 ④直接算 ⑤“拆区间&#xff0c;变量代换改区间再合并” 2.常用不等式 1.基本不等式 sinx < x < tanx (0 , Π/2) (几何或者夹逼证明) ex > 1 x (-∞&a…

集群session的共享问题

基于redis实现共享session登录 1.集群session共享的问题 session共享问题&#xff1a;多台Tomcat并不共享session存储空间&#xff0c;当请求切换到不同tomcat服务时导致数据丢失问题 替代方案应该满足&#xff1a; 数据共享 内存存储 key、value结构 2.基于redis实现ses…