AXURE折线图绘制操作实例

Axure是做产品设计时必备的技能之一，被广大的产品经理所认可。在原型设计的过程中，经常会用到一些炫酷的图表，今天教大家如何用AXURE做折线图，一起来看一看吧：

效果如下：

视频演示：http://ije8g9.axshare.cn/#g=1&p=%E6%8A%98%E7%BA%BF%E5%9B%BE%E2%80%945%E7%BA%BF

一、功能介绍

1. 所有图表不需要联外网，数据也不是写死的，只需在中继器或表格中填写数据即可自动生成图表，操作简单。
2. 大小、颜色、样式、交互可以自由变换。
3. 鼠标移入时能显示具体数据。

二、制作方法

（1）先做出堆叠柱形图原件。

（2）用散点和横线制作折线，如下图所示：

（3）制作原理

中继器加载时，我们记录每一个散点的圆心的坐标。从而计算出第一个坐标和第二个坐标距离和角度。

1）记录坐标值

中继器加载的时候，如果是第一个，隐藏折线，并把记录该散点的坐标为x1，y1。

如果不是第一个值的时候，记录记录该散点的坐标为x2，y2。

2）计算距离，设置折线的长度

那么根据两点间距离公式，可以得到折线的长度，axure的函数为[[Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2))-6]]

2）计算角度，旋转折线

根据正切值可以计算到折线以散点为中心旋转的角度。axure的函数为[[(Math.atan2((y2-y1),(x2-x1))/3.1415926535898*180)]]，以折线的右端为圆心旋转。

4）完成旋转和设置尺寸后，重新设置x1为第二个散点的横坐标，y1为第二和散点的纵坐标，即x1=x2，y1=y2。

具体交互如下：

最后，制作完成后，以后使用方便，仅需简单填写中继器的内容，即可拥有完美的效果。

以上就是AXURE折线图绘制操作实例的全部内容介绍了，关于更多Axure教程信息，欢迎关注北极熊素材库，给你带来最丰富的素材图片和最有用的教程，更多最新资讯。