【每日教程】用中继器做堆叠柱状图

简介: 【每日教程】用中继器做堆叠柱状图

效果如下:

640.gif


一、功能介绍

  1. 所有图表不需要联外网,数据也不是写死的,只需在中继器或表格中填写数据即可自动生成图表,操作简单。
  2. 大小、颜色、样式、交互可以自由变换。
  3. 鼠标移入时能显示具体数据。


二、制作方法

(1)先做出普通的柱形图原件,具体制作方法参考我上一篇文章——Axure 教程:怎么做超漂亮的柱状图

(2)中继器内材料:矩形1,复制多个柱形图里面的矩形,填充自己喜欢的颜色,放置于原来矩形一致的地方。

640.png


(3)中继器内表格设定

640.png


x是横坐标的值,no是各种产品的值

(4)在中继器外建一个文本框(命名为最大值)并隐藏,只用于逻辑处理。文本框的值填写no里面最大的总值,该案例为980。逻辑是找到最高的总值,让比它底的值调低高度。具体公式[[LVAR2.height*(Item.no/LVAR1)]]。

LVAR2.height指矩形的高度,LVAR1指no的最大值,Item.no指no的当前值。

(5)具体交互思路

中继器加载时,我们设置每个颜色柱状的尺寸,具体设计方法请看上一遍文章。然后我们让矩形2放在矩形1的上面,矩形3放在矩形2上面,以此类推。

640.png


(6)做一个标签,如下图所示,默认隐藏。

640.png


思路,鼠标移入矩形的时候,显示标签,标签跟随鼠标移动,让Item.no的值=文本标签2,Item.x的值=文本标签1,以此类推。

鼠标移出的时候,隐藏标签即可。

640.png


最后,制作完成后,以后使用方便,仅需简单填写中继器的内容,即可拥有完美的效果,所以强烈推荐给各位使用。
作者:梓贤vigo;

微信公众号:Axure高保真原型,分享一系列产品经理常用的原型模板、教程、视频、文档等原创内容

本文由微信公众号:Axure高保真原型 授权发布,未经许可,禁止转载

相关文章
|
Python
Python实现简易天气查询系统
Python实现简易天气查询系统
527 4
|
9月前
|
存储 数据库连接 开发者
《鸿蒙原生应用开发:掌控Ability生命周期的艺术》
在鸿蒙原生应用开发中,Ability作为核心组件,其生命周期管理至关重要。从创建、启动到销毁,每个阶段的回调函数(如onCreate、onStart、onActive等)都为开发者提供了优化性能和用户体验的机会。合理加载与释放资源、保存与恢复状态、管理多线程及应对设备配置变化,是高效管理生命周期的关键策略。通过案例实践,如图片浏览应用,展示了细致管理Ability生命周期如何确保应用在复杂场景下的稳定运行,为用户带来流畅体验。掌握这些技巧,是开发者在鸿蒙生态中打造优质应用的必备技能。
323 1
|
8月前
|
人工智能 监控 JavaScript
MCP 正当时:FunctionAI MCP 开发平台来了!
Function AI 是基于函数计算构建的 Serverless AI 应用开发平台,基于函数计算的运行时能力上线了完整的 MCP 开发能力,您可以进入 FunctionAI 控制台,快速体验 MCP 服务的能力。
1609 12
|
6月前
|
API 开发者
鸿蒙NEXT上传图片功能PhotoViewPicker核心功能解析
`PhotoViewPicker` 是鸿蒙系统中用于媒体资源选择的核心组件,通过它可以便捷地实现图片、视频等媒体文件的选择功能。下面从基本用法、参数配置到高级应用进行全面解析:
185 1
|
8月前
|
人工智能 搜索推荐 Java
【重磅】JeecgBoot 里程碑 v3.8.0 发布,支持 AI 大模型、应用、AI 流程编排和知识库
JeecgBoot 最新推出了一整套 AI 大模型功能,包括 AI 模型管理、AI 应用、知识库、AI 流程编排和 AI 对话助手。这标志着其转型为 “AI 低代码平台”,旨在帮助开发者快速构建和部署个性化 AI 应用,降低开发门槛,提升效率。
378 12
|
Unix Linux
Linux中的Crontab:定时任务管理器
`crontab`是Linux下的定时任务管理器,用于设置周期性执行的任务。用户可以通过`crontab -l`查看任务,`crontab -e`编辑,`crontab -r`删除任务。任务格式为:`* * * * * command`,分别代表分钟、小时、日期、月份、星期,例如`30 10 * * * /path/to/script.sh`。注意确保命令有执行权限,处理环境变量,并关注日志文件 `/var/log/syslog` 或 `/var/log/cron`。学会使用`crontab`能有效自动化Linux系统的日常任务。
|
机器学习/深度学习 达摩院
阿里达摩院MindOpt优化求解器-月刊(2024年4月)
【摘要】2024.04.30,阿里云发布了MindOpt优化求解器的新商品和功能。MindOpt现在已上架,提供超低价零售求解器,支持按需购买,可在阿里云平台上直接购买联网或不联网License。新版本V1.2发布,提升MILP性能,并增加PostScaling参数。此外,MindOpt Studio推出租户定制版,正处于邀测阶段。同时分享了使用MindOpt解决二分类SVM问题的案例。更多内容,可访问相关链接。
457 0
|
JavaScript
element-ui表格数据样式及格式化案例
element-ui表格数据样式及格式化案例
684 0
|
关系型数据库 MySQL Java
天天使用MySQL,你知道MySQL数据库能抗多少压力吗?附(真实案例)
天天使用MySQL,你知道MySQL数据库能抗多少压力吗?附(真实案例)
2533 0
|
前端开发 Java 应用服务中间件
【超详细】RuoYi 前后端分离版部署流程
部署前端(前端访问域名,跳转域名修改)、后端配置(配置文件),Nginx 配置文件详解,上传后部署需要的脚本。
5476 1