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

效果图