如何在Axure中绘制雷达图

0 评论 76 浏览 0 收藏 7 分钟

本方法实现了雷达图效果,使用的都是Axure中常用的组件,难点是如何根据辅助图形绘制标准多边形。本文仅适用于具有一定Axure使用经验的用户阅读。

Axure版本:11.0

制作步骤为:

绘制六边形->绘制雷达图坐标系->绘制雷达图值域

01 绘制六边形

在页面中添加一个圆形,设置宽度和高度均为100。

再画三条水平线(此处以画六边形雷达图为例),分别设置任意两条的角度为30度、-30度,并将圆形和三条直线按中心点对齐,此时效果如下图:

从顶部工具栏选择钢笔工具,如下图:

在左上角线段与圆形的交点A点击并拖动鼠标,分别在圆形与线段的交点点击鼠标,最后返回到A点再次点击鼠标,让图形闭环,绘制完成后效果如下图:

注意:绘制时会有辅助线提示,请注意参考,辅助线效果如下图:

删除圆形及三条线段,将六边形填充为灰色,边框颜色为深灰色,顺时针旋转90度,效果如下:

02 绘制雷达图坐标系

复制一个六边形,选中新复制的六边形,点击宽度和高度中间的锁形图标锁定宽高比,设置该六边形的宽度为200,如下图所示:

按上述方法再复制3个六边形,分别设置宽度为300、400、500。

将这5个六边形统一垂直居中、水平居中对齐,并设置图层顺序依次排列,最小的在最前,最大的在最后,设置完成后效果图如下:

将第二个、第四个六边形填充为白色。

绘制一条垂直对角线作为雷达图的坐标轴,再复制两条,分别设置这两条对角线的旋转角度为60度、-60度,并将对角线与六边形水平居中、垂直居中对齐,完成后效果如下:

注意:因为绘制六边形的时候可能会有误差,所有坐标轴不一定完全能与各顶点重合,此时需手工微调。

为每一条坐标轴添加标签,完成后效果如下:

03 绘制雷达图值域

从工具栏中选中钢笔工具,分别在每一条坐标轴上不同的位置点击鼠标,绘制值域,直到最终闭环,完成后效果如下图:

设置值域的填充色为蓝色并调整透明度,边框色为相同的颜色。

至此,完整的雷达图就绘制完成啦,最终效果如下:

04 进阶内容

上述方法用来绘制六边形雷达图,有时候可能需要绘制五边形的雷达图,那么五边形的雷达图又该怎么画呢?难点在于如何画出一个标准的五边形,详细的操作方法如下:

在页面中添加一个圆形,设置宽度和高度均为100。

画一条垂直线,高度设置为100,将该直线再复制4条。分别设置另外4条线的旋转角度为72度、-72度、144度、-144度。

手工拖动直线,直至将5条直线的端点全部与圆心对齐。效果图如下:

选择钢笔工具,连接圆形与线段的相交点,直至图形闭环,绘制时注意参考红色辅助线,完成后效果如下:

这样,一个标准的五边形就画好了,其他步骤与绘制六边形雷达图是类似,此次不再赘述,最终实现的五边形雷达图效果如下:

本文由 @互联科技 原创发布于人人都是产品经理。未经作者许可,禁止转载

题图来自Unsplash,基于CC0协议

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 目前还没评论,等你发挥!