一期教会大家如何用axure做散点图,本文将教大家如何用AXURE做折线图。
效果如下:
演示地址:http://ije8g9.axshare.cn/
下载地址:https://www.axureshop.com/a/1114192.html
(1)先做出堆叠柱形图原件,具体制作方法参考我上一篇文章——Axure教程:散点图
(2)用散点和横线制作折线,如下图所示:
(3)记录坐标值,中继器加载的时候,如果是第一个,隐藏折线,并把记录该散点的坐标为x1,y1。
第二个散点的坐标为x2,y2。
那么根据两点间距离公式,可以得到折线的长度,axure的函数为[[Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2))-6]]
根据正切值可以计算到折线以散点为中心旋转的角度。axure的函数为[[(Math.atan2((y2-y1),(x2-x1))/3.1415926535898*180)]]
完整旋转和设置尺寸后,重新设置x1为第二个散点的横坐标,y1为第二和散点的纵坐标。
具体交互如下:
最后,制作完成后,以后使用方便,仅需简单填写中继器的内容,即可拥有完美的效果,谢谢阅读