Axure教程—動態(tài)單散點(diǎn)圖(中繼器)

0 評論 3152 瀏覽 1 收藏 4 分鐘

動態(tài)單散點(diǎn)圖能夠直觀地展示數(shù)據(jù)的情況,是一種常用的數(shù)據(jù)分析方式。本文分享了如何用AXURE中的中繼器制作動態(tài)單散點(diǎn)圖,一起來看看吧。

本文將教大家如何用AXURE制作單散點(diǎn)圖。

一、效果介紹

如圖:

預(yù)覽及下載地址:https://q79has.axshare.com

二、功能介紹

簡單填寫中繼器內(nèi)容即可生成動態(tài)單散點(diǎn)圖。

樣式顏色等可以自由變換。

鼠標(biāo)移入時散點(diǎn)變大并顯示相應(yīng)的數(shù)據(jù)。

三、制作方法

1)中繼器

中繼器里有四列,d、和y1,d為橫坐標(biāo),y1為具體數(shù)值如下圖所示:

2)中繼器內(nèi)材料組合

拖入一個矩形,其形狀設(shè)置為圓,大小設(shè)置為10*10,顏色為#FEA213,散點(diǎn)制作完畢,在散點(diǎn)上拖入一個熱區(qū),其大小為24*24,散點(diǎn)和熱區(qū)組合一起。

拖入一個矩形,其大小為80*30,顯示橫坐標(biāo)數(shù)據(jù)。

如下圖所示放置即可:

3)中繼器外文本

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

4)制作圖表

制作豎坐標(biāo)和刻度,如圖:

最終的設(shè)計,如圖:

四、交互設(shè)置

1)中繼器

中繼器每項(xiàng)加載時:

2)散點(diǎn)和熱區(qū)組合

鼠標(biāo)移入時和鼠標(biāo)移出時:

3)中繼器外文本

鼠標(biāo)移出時:

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

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

題圖來自 unsplash,基于 CC0 協(xié)議。

該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!