axure商城

AXURE绘制饼状图教程

在产品设计过程中,会做一些图表分析的功能,这时候会经常使用饼状图,今天我来教下饼状图的绘制方式~

1、从元件库中拖入一个圆形,设置圆形大小“160*160”,选中圆形后,右键单击

AXURE绘制饼状图教程

2、单击【选择形状】后,在形状库中选择“扇形”

 

AXURE绘制饼状图教程

3、拖动黄色小圆点,将扇形夹角度数设置小一点

AXURE绘制饼状图教程

4、接下去复制1个扇形,圆心与第一个对准,拖动第二个扇形的小圆点

AXURE绘制饼状图教程

 

5、在这边我们确认一下饼状图需要表示几个指标,即要分为几块;然后复制对应的扇形,例五块。则复制5个扇形,根据需要调整各个扇形的夹角度数(拖动小圆点即可),最后在概要里面可以看到5个饼形

AXURE绘制饼状图教程

6、最后设置每个饼形的颜色即可:由于饼状图的大小都是一个圆形,尺寸一样,直接单击形状时只能选择最上层的形状,这个时候我们可以在【概要】中选择形状,在右侧【样式】-【填充】中调整颜色

AXURE绘制饼状图教程

 

7、设置好五个饼形的颜色后,基础的饼状图就绘制好啦~

AXURE绘制饼状图教程

8、如果需要设置查看指标数值的效果,可以接下去看哦~

9、拖入一个矩形框,在【样式】中设置矩形框名称为“数值”,然后设置填充色和半径等(根据需要设置)

AXURE绘制饼状图教程

10、在右侧【样式】,点击隐藏icon,隐藏矩形框

AXURE绘制饼状图教程

AXURE绘制饼状图教程

11、设置鼠标移入效果-显示/隐藏-默认显示—选择矩形框(数值)

AXURE绘制饼状图教程

5、最后预览效果

https://www.wulihub.com.cn/go/qGg1K2/index.html

源文件下载  密码: 8d4l

给TA打赏
共{{data.count}}人
人已打赏
高级教程

Axure屏蔽浏览器默认右键菜单的方法

2021-8-3 17:57:50

高级教程

如何利用中继器和动态面板制作一个可以自动化菜单?

2021-10-25 21:29:56

axure商城
6 条回复 A文章作者 M管理员
  1. 凯凯拉克

    这个还是要搭配中继器做出来才更好玩吧,随时调整数值

  2. wowlingx

    可以在交互查看数值方面,新增移出鼠标动作,将数值隐藏,保真度更高一点。

  3. clover129684

    直接用动态图表不香么

  4. 114274

    应该漏了一部,生成扇形后,并且圆心合并成饼状图之后,分别选择扇形右键-变换形状-合并。这样选中框就会紧贴扇形,这样我们鼠标才会移入到其他扇形的范围。

  5. 114274

    你后面的交互有瑕疵,这样生成的扇形的选中区域还是一个矩形,圆心都是一个点,就相当于几个矩形重叠在一起了,移入鼠标的时候只能和最外层的扇形交互

    • 小笨鸡

      如何修改呢?大佬

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索