Axure9.0让条形图实现动态交互(鼠标悬停高亮 + 显示详情卡片)

核心需求:鼠标悬停在条形上时,条形颜色加深、轻微放大,并显示「功能名称 + 进度」详情,提升数据可读性。

静态展示操作链接

Axure 9.0 条形图绘制超详细教程:静态展示-CSDN博客

操作步骤:

制作高亮条形:

  • 复制对应条形(如核心功能 A),设置「缩放」→「105%」(轻微放大),填充色改为加深版(#1735A2),添加阴影(模糊 5px、颜色 #00000010),命名为 "条形 1 - 高亮",默认隐藏(右侧「样式」→「隐藏」);

绘制详情卡片:

  • 拖出「矩形」(圆角 8px),尺寸 120×50px,填充色 #fff,边框 #eee,阴影(模糊 5px、颜色 #00000010);
  • 卡片内添加 2 个文本元件,分别对应「功能名称」「进度」,字体 11px、颜色 #FFFFFF,默认隐藏;

绑定交互事件:

  • 添加热区,覆盖住原始条形 "理论课完成程度",点击右侧「交互」→「添加事件」→「鼠标悬停时」;
  • 动作 1:「显示」"条形 1 - 高亮",动画「淡入」「300 毫秒」;
  • 动作 2:「显示」详情卡片,动画「淡入」「300 毫秒」;
  • 添加「鼠标离开时」事件:「隐藏」高亮条形和详情卡片,动画「淡出」「300 毫秒」;
  • 重复上述步骤,为其余 4 个条形绑定相同逻辑。

效果图

相关推荐
进度猫16 小时前
5个甘特图高阶用法,不止简单排工期
大数据·人工智能·产品经理·甘特图·项目管理软件
mqiqe16 小时前
AgentScope Java 2.0 协议集成全景解析:A2A、AG-UI、Agent Protocol 三大开放协议实战指南
java·开发语言·ui
qq_4260039617 小时前
【UI自动化测试】UI自动化报错解决方案
运维·ui·自动化
Oll Correct18 小时前
Adobe illustrator 案例九:百宝箱图标绘制
笔记·ui·adobe·illustrator
xy34531 天前
Axure 9.0 条形图绘制超详细教程:静态展示
ui·产品经理·axure·条形图
LabVIEW开发1 天前
LabVIEW图标编辑器文字模糊现象
ui·编辑器·labview·labview知识·labview功能·labview程序
2601_967338712 天前
起点课堂 AI 产品经理转岗特训营传统产品经理
人工智能·产品经理
兰亭妙微UI设计公司2 天前
兰亭妙微B端界面设计分享:Vantary海事无人系统任务平台UI/UX设计解析
ui·ux
伊玛目的门徒2 天前
deepseek harness DSH 安装皮肤脚手架(dsh‑client‑ui‑skin‑center)踩坑完整记录
ui·插件·皮肤·harness·dsh