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 个条形绑定相同逻辑。

效果图

相关推荐
Tim00717 小时前
火星来信:把华晨宇的音乐、舞台和我的现场记忆,装进一个会生长的知识库
产品经理
rolt18 小时前
[存档]Alistair Cockburn-2003年11月UMLChina交流会
软件工程·产品经理·uml·敏捷开发·用例·cockburn
产品人卫朋18 小时前
MTL如何把市场机会转化为有效销售线索?
人工智能·华为·产品经理·ipd流程·流程架构·mtl流程
wanghao6664552 天前
看 AI 怎样处理三份表格,理解 Harness
产品经理
且随疾风前行.2 天前
Paint Cavans高级绘制:[一]Paint画笔高级应用
android·ui
唯鹿2 天前
AI生成UI代码实践(二)—— Figba 更新月记
ui·ai·figma·1024程序员节·蓝湖
fqbqrr2 天前
2610C++,UI复合技术在窗口中绘画字体图标
c++·ui
xy34533 天前
Axure 9.0 列表框 介绍
ui·axure·原型·产品设计
xy34533 天前
Axure 9.0 内联框架加载方式
前端·ui·html·axure·原型·产品设计
特立独行的猫a3 天前
仓颉语言cj-tauri 跨端开发框架实战:给鸿蒙侧加一个「读设备电量」的原生能力
ui·harmonyos·tauri·1024程序员节·仓颉·鸿蒙pc