上一期教會大家如何用axure做散點(diǎn)圖，本文將教大家如何用AXURE做折線圖。

效果如下：

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

一、功能介紹

1. 所有圖表不需要聯(lián)外網(wǎng)，數(shù)據(jù)也不是寫死的，只需在中繼器或表格中填寫數(shù)據(jù)即可自動生成圖表，操作簡單。
2. 大小、顏色、樣式、交互可以自由變換。
3. 鼠標(biāo)移入時能顯示具體數(shù)據(jù)。

二、制作方法

（1）先做出堆疊柱形圖原件，具體制作方法參考我上一篇文章——Axure教程：散點(diǎn)圖

（2）用散點(diǎn)和橫線制作折線，如下圖所示：

（3）制作原理

中繼器加載時，我們記錄每一個散點(diǎn)的圓心的坐標(biāo)。從而計算出第一個坐標(biāo)和第二個坐標(biāo)距離和角度。

1）記錄坐標(biāo)值

中繼器加載的時候，如果是第一個，隱藏折線，并把記錄該散點(diǎn)的坐標(biāo)為x1，y1。

如果不是第一個值的時候，記錄記錄該散點(diǎn)的坐標(biāo)為x2，y2。

2）計算距離，設(shè)置折線的長度

那么根據(jù)兩點(diǎn)間距離公式，可以得到折線的長度，axure的函數(shù)為[[Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2))-6]]

2）計算角度，旋轉(zhuǎn)折線

根據(jù)正切值可以計算到折線以散點(diǎn)為中心旋轉(zhuǎn)的角度。axure的函數(shù)為[[(Math.atan2((y2-y1),(x2-x1))/3.1415926535898*180)]]，以折線的右端為圓心旋轉(zhuǎn)。

4）完成旋轉(zhuǎn)和設(shè)置尺寸后，重新設(shè)置x1為第二個散點(diǎn)的橫坐標(biāo)，y1為第二和散點(diǎn)的縱坐標(biāo)，即x1=x2，y1=y2。

具體交互如下：

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

本文由 @梓賢Vigo 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議