核心需求:鼠标悬停在条形上时,条形颜色加深、轻微放大,并显示「功能名称 + 进度」详情,提升数据可读性。
静态展示操作链接
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 个条形绑定相同逻辑。
效果图
