Axure教程:如何画出曲线图?

从零开始学运营,10年运营老司机带路,2天线下集训+1年在线学习,做个优秀的运营人。了解详情

在做数据可视化类型的页面时,会遇到这样的问题:我想在我的柱状图上画出一条曲线怎么办?

第一步:

在左侧的元件库中点击水平线(或者垂直线都可以),拖动到图中

第二步:

选中水平线,右键将水平线转换为自定义形状(转换为自定义形状:有两种方式,第一种选中水平线后右键选择;第二种选中水平线在右侧菜单中选择属性——形状——选择 转换为自定义形状)

转换为自定义形状1

转换为自定义形状2

第三步:

将鼠标移动到转换为自定义状态的水平线上,当出现一个小+时,可以截取水平线的任意位置点击,会出现一个小口,然后点击鼠标左键移动节点,如下图:

然后就可以将一个水平线变为一个折线,然后拖动几个节点到相应的位置,位置是由自己定的,可以随意拖动,线的长度也会随意变化;

第四步:

依次按照上面的方法,将所有的节点都截取出来

第五步:

鼠标点击折线的区域,折线变为被选中的状态,然后点击鼠标右键依次选择 改变形状——曲线连接各点,就会看到折线变为曲线了

就会得到如上图的曲线图,这样的曲线的弯曲程度,都是系统默认的,可能曲度弯曲角度太大,自己稍作调整,让曲线看起来更平滑

改进:

选中曲线,曲线变为自定义形状状态时,点击需要调节的节点,就会在节点的两侧出现两个黄点的小方点,拖动其中任意一个小黄点都能够改变的曲线的曲度。

调节完成如上图,这个可以自己自由调节,不过回导致每个节点的曲度不一致。不过关系不大。

然后就完成了。其实只要明白了原理就很容易,自定义形状就是可以自己调节线的节点,线的长短,线的曲度等等要素,就能调节出自己想要的自定义图形了。

 

本文由 @dantina 原创发布于人人都是产品经理。未经许可,禁止转载

祝给予赞赏的伙伴,2017年发大财!
3人打赏

评论( 10

写下你的想法
  1. 学过PS的都知道钢笔的好,axure一样的

    回复
  2. 可以用钢笔工具搞定,都用不到10秒钟

    回复
  3. 一只合肥产品狗

    某人你可以不用,但没必要说别人研究的是歪门邪道

    回复
  4. 欧马腾 产品经理

    不能画曲线的确是axure 7 的一大痛点,不过举得例子里好像没啥用。。

    回复
  5. 技术转产品中

    新人还是学习了

    回复
  6. 这些的也太那个啥了。几乎没有任何意义

    回复
  7. 产品菜菜子

    邪门歪道…Excel做图粘贴过去就行

    回复
    1. 回复

      正解

    2. 回复

      Yep

  8. 我都是用钢笔的,一分钟搞定 ;-)

    回复

推荐阅读