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)先做出堆疊柱形圖原件,具體制作方法參考我上一篇文章——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協議
評論
沒想到還可以這樣做 牛蛙牛蛙
hi 樓主,圖片有部分的值設置不明確,是否告知?比如:Else if True 中的 設置 x2 = [[(LVAR2.x+LVAR2.width)+(it..” 這部分不全,還請指導下?
好奇作者是怎么在case1 和case2都用到if的?而不是用if … else if….求大神們賜教,謝謝??
右鍵切換IF/else if
原型預覽及下載地址:
https://axhub.im/pro/1882d0a30c3301c9
可以預覽 然后怎么下載?
請教一下中繼器是什么獲取第二個點(x2,y2)的坐標呢?
請問您用的是axure rp的哪個版本?8還是9?
源文件是8,9打開也沒問題