上一期教會大家如何用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）先做出堆疊柱形圖原件，具體制作方法參考我上一篇文章——Axure教程：散點圖

（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。

具體交互如下：

最后，制作完成后，以后使用方便，僅需簡單填寫中繼器的內容，即可擁有完美的效果，謝謝閱讀

本文由 @梓賢Vigo 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議