axure画扇形_如何利用axure制作一个动态的饼状图

话不多少，先放图！

饼状图

首先，我们来分析一下动态效果

1.鼠标悬浮饼状块颜色发生了改变，且尺寸发生了变化

2.鼠标移入不同的块内，提示框随着鼠标的移动而移动，且提示框内的文字发生了变化。​

​然后，我们根据这个思路一步一步去实现这个效果

先拖入一个圆，点击右上角的小点转换为自定义形状，选择第四个形状，操作如图一所示

图一

​然后拖动这个形状两头的小点，拖成一个扇形样子，如图二所示。

图二

再拖入一个圆，使其跟这个扇形大小位置完全重合，然后同时选中圆和扇形，鼠标右击点击改变形状-相交，这时候就会发现，只剩扇形的轮廓了，点击去除边框，这样就完成一个扇形的绘制了！然后填充合适的颜色和阴影。同样，用此方法完成剩下的两个互补的扇形~

为什么不直接用刚开始自定义的扇形，而要通过跟一个圆通过改变形状得出的扇形呢？

因为刚开始自定义的扇形他的范围是一个正方形，如图二所示，而改变形状后的扇形的范围则自定义扇形范围的一半。这样就避免了鼠标悬浮在种类一上面的扇形时，会很容易触发其他种类扇形的动效！

​饼状图绘制好了，在加上用水平线、文本标签制作的指示文字，元件部分就准备就绪了，那我们就开始设计交互吧！

​首先是鼠标悬浮饼状块颜色发生了改变，且尺寸发生了变化，交互设置入图三所示

图三

​其他的扇形交互设置基本上也是这样的，值得注意的是，设置尺寸的时候这三个扇形的锚点不一致，左侧的扇形锚点在右侧，右侧的扇形锚点在左侧，下面的扇形的锚点在顶部！

然后我们就开始设计鼠标移入，提示框随着鼠标的移动而移动​，且提示框内的文字发生变化的交互了。

首先我们利用矩形工具制作下面三个提示框，从左到右，我这里分别取名为1,2,3​

图四

​选中这三个提示框，右击设为隐藏。

分别选中种类1、种类2、种类3对应的扇形，设置交互，如图五、六、七所示

图5

图6

图7

​

​设置完成后，点击预览就可以看到完整的饼状图效果啦~~~

戳下面下载源文件哟~~~

​链接：https://pan.baidu.com/s/18mrFc3jnEtkUSZRgf7FleA

密码：mwfp

​再告诉大家一个好方法哟~

下载的源文件也就是rp文件，将其后缀名改为rplib后，此文件就可以作为元件素材导出axure的元件库哟~以后想要用，就直接从axure的元件库中拖入工作区即可呢~~~