Axure教程:折線圖

9 評論 20329 瀏覽 27 收藏 4 分鐘

上一期教會大家如何用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)計算距離,設置折線的長度

那么根據兩點間距離公式formula,可以得到折線的長度,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協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 沒想到還可以這樣做 牛蛙牛蛙

    來自江蘇 回復
  2. hi 樓主,圖片有部分的值設置不明確,是否告知?比如:Else if True 中的 設置 x2 = [[(LVAR2.x+LVAR2.width)+(it..” 這部分不全,還請指導下?

    來自廣東 回復
  3. 好奇作者是怎么在case1 和case2都用到if的?而不是用if … else if….求大神們賜教,謝謝??

    來自江蘇 回復
    1. 右鍵切換IF/else if

      來自重慶 回復
  4. 原型預覽及下載地址:
    https://axhub.im/pro/1882d0a30c3301c9

    來自廣東 回復
    1. 可以預覽 然后怎么下載?

      來自江蘇 回復
  5. 請教一下中繼器是什么獲取第二個點(x2,y2)的坐標呢?

    來自廣東 回復
  6. 請問您用的是axure rp的哪個版本?8還是9?

    來自浙江 回復
    1. 源文件是8,9打開也沒問題

      來自廣東 回復