Axure高级实例-《跟随光标移动的图表指示线》知识点

1、原理

跟随光标移动，原理就是在光标移动时重新设置元件的位置参数（X轴、Y轴），参考数值就是光标当前的位置参数。需要用到元件的“鼠标移动时”交互事件作为触发条件，光标当前的（x, y）坐标作为元件新的位置参数。

2、设计过程

1、折线图

折线图是通过垂直线、水平线、钢笔工具等做出来的，目的是让大家看到图表的效果，在本次实例中不是重点，就简单讲一下：先通过垂直线、水平线做出X轴、Y轴以及轴上的刻度（小短线均匀排列），然后用钢笔工具做一条折线（工具栏选择钢笔工具，单击生成锚点，移动鼠标拉出线条，双击结束），最后用一条垂直线作为指示线（最好给它设置个名称，方便后续操作时识别）。

2、热区

热区用来圈定指示线的移动范围，让指示线只有在图表内移动，所以热区大小位置只需要覆盖图表内即可，同时需要用到热区的“鼠标移动时”事件（在“更多事件>>>”里面）。

3、随机函数

除了指示线外，还一个同样跟随光标移动的数字标签，为了展示出光标移动时显示当前折线点数值的效果，使用了随机函数生成随机数给标签进行赋值，做出了光标移动时标签不继有数字跳动的效果。

3、知识点

1. 热区需要设置事件

1. 随机函数用法

Axure的函数都要用两对英文中括号（即：[[]]）括起来，中括号以外的内容会当作文本处理，记得要对生成的随机数进行取整，因为默认生成的随机数是浮点型（即带小数的）。

函数名称不用死记硬背，点击“插入变量或函数”就有下拉列表可以选择。