Axure 9.0 原生组件：让饼图实现动态交互

如何画基础饼图可以参考前一篇文章https://blog.csdn.net/xy345382605/article/details/157873131?fromshareblogdetailsharetypeblogdetailsharerId157873131sharereferPCsharesourcexy345382605sharefromfrom_link技巧鼠标悬停高亮分区 显示详情核心需求鼠标移入在某分区时该分区轻微高亮并显示「类别 数量 」详情卡片增强数据传递效率。操作步骤1.制作高亮分区复制对应分区如 “单位就业”设置颜色 #0467C3命名为 “单位就业 - 高亮”默认隐藏右侧「样式」→「隐藏」2.绘制详情卡片拖出「矩形」圆角 8px尺寸 64×51px填充色 #1E293B卡片内添加 2 个文本元件和1个矩形文本元件分别对应「类别」「数量」设置字体 11px、颜色 #FFFFFF「矩形」填充色为#1890FF尺寸13×14px线段颜色#FFFFFF线宽为2默认隐藏3.设置热区为每一个分区设置热区方便交互我们使用钢笔工具画出热区透明度设置为0重复上述步骤为其余 2个分区绘制热区。4.设置交互事件1选中原始热区 “热区-橘色”点击右侧「交互」→「添加事件」→「鼠标移入时」2动作 1「显示」“橘色 - 高亮”动画「逐渐」「时长 300 毫秒」3动作 2「显示」“详情卡片-橘色”动画「逐渐」「时长 300 毫秒」4添加「鼠标移出时」事件「隐藏」“橘色 - 高亮” 和“详情卡片-橘色”动画「逐渐」「时长 300 毫秒」重复上述步骤为其余 2个分区添加相同逻辑修改高亮分区和弹出框的文本内容。5.实战效果图6.总结与拓展通过两篇文章步骤您已掌握 Axure 9.0 饼图的「静态绘制 动态交互 」全流程核心要点在于① 扇形转换角度跳转② 分区对齐与层级控制③ 交互逻辑简洁清晰。后续可进一步探索结合「中继器」实现数据动态加载添加「点击分区跳转详情页」交互如果在实操中遇到具体问题欢迎在评论区留言我会逐一解答