Axure教程—動態多散點圖(中繼器)

0 評論 3185 瀏覽 6 收藏 5 分鐘

動態多散點圖是一種廣泛應用于數據分析的工具,可以有效地呈現數據。如果你想了解如何使用AXURE中的中繼器來創建這種圖形,建議你可以仔細閱讀本文。

本文將教大家如何用AXURE制作動態多散點圖。

一、效果介紹

如圖:

預覽及下載地址:https://w8j93u.axshare.com

二、功能介紹

  • 簡單填寫中繼器內容即可生成動態多散點圖
  • 樣式顏色等可以自由變換
  • 鼠標移入時散點變大并顯示相應的數據

三、制作方法

1)中繼器

中繼器里有四列,d、y1、y2和y3,d為橫坐標,y1、y2、和y3為具體數值如下圖所示:

2)中繼器內材料組合

拖入三個矩形,其形狀分別設置為圓,大小設置為10*10,分別命名為藍、黃、綠,顏色為#0000FF、#FEA213、,#54CD72,三個散點制作完畢,在每個散點上拖入一個熱區,其大小為24*24,散點和熱區組合一起,三個散點疊放一起,如圖:

拖入一個矩形,其大小為8030,顯示橫坐標數據。

如下圖所示放置即可:

3)中繼器外文本

在中繼器外建一個矩形,大小設置為100*50,顏色設置為#333333,透明度為60,設置隱藏狀態,只用于顯示其具體數值,如圖:

4)制作圖表

制作豎坐標刻度以及圖例,如圖:

最終制作結果,如圖:

四、交互設置

1)中繼器

中繼器每項加載時:

2)散點設置

藍散點:

鼠標移入時和鼠標移出時:

黃散點:

鼠標移入時和鼠標移出時:

綠散點:

鼠標移入時和鼠標移出時:

3)中繼器外文本

鼠標移出時:

這樣我們就完成原型制作了。

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

題圖來自 unsplash,基于 CC0 協議。

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!