欢迎光临
我们一直在努力

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

如何画基础饼图,可以参考前一篇文章:https://blog.csdn.net/xy345382605/article/details/157873131?fromshare=blogdetail&sharetype=blogdetail&sharerId=157873131&sharerefer=PC&sharesource=xy345382605&sharefrom=from_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 饼图的「静态绘制 + 动态交互 」全流程,核心要点在于:① 扇形转换(角度跳转);② 分区对齐与层级控制;③ 交互逻辑简洁清晰。

后续可进一步探索:

  • 结合「中继器」实现数据动态加载);
  • 添加「点击分区跳转详情页」交互;

如果在实操中遇到具体问题,欢迎在评论区留言,我会逐一解答!

赞(0)
未经允许不得转载:171主机测评 » Axure 9.0 原生组件:让饼图实现动态交互
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址