中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導(dǎo)語：熱力圖這一形式十分常見，那么我們要如何利用中繼器來實(shí)現(xiàn)熱力圖制作呢？本文作者就總結(jié)了Axure制作熱力圖的過程，一起來看看吧。

熱力圖是可視化界面里常用的統(tǒng)計(jì)圖表，那今天我們就學(xué)習(xí)在Axure里面如何制作熱力圖吧。

我們會(huì)用中繼器來制作，因?yàn)橹欣^器制作的復(fù)用性高，再次使用時(shí)，僅需要在表格里填入數(shù)據(jù)既可以自動(dòng)生成交互效果，包括根據(jù)數(shù)據(jù)自動(dòng)顯示對(duì)應(yīng)顏色，以及移入時(shí)標(biāo)題顯示完整信息。具體效果如下圖所示：

原型地址：https://zuqj6l.axshare.com/#g=1

那下面我們一起開始制作吧。

一、材料準(zhǔn)備

1. 表格內(nèi)容

表格內(nèi)容，我們用中繼器來制作，中繼器里面我們需要放置一下元件：

1）y軸坐標(biāo)的文字：我們用文本標(biāo)簽即可。

2）每列的文本文字：這里我們也是用文本標(biāo)簽，需要幾列就增加幾個(gè)，分別命名為文本1、2、3、4、5、6、7，這樣后續(xù)我們也容易做交互。

3）動(dòng)態(tài)面板：動(dòng)態(tài)面板是用來做顏色背景的，動(dòng)態(tài)面板內(nèi)需要多個(gè)狀態(tài)（state），案例中是5種顏色，所以就用了5個(gè)state，每個(gè)state里面放置對(duì)應(yīng)顏色的矩形。將動(dòng)態(tài)面板復(fù)制后分別放到文本1、2、3、4、5、6、7的下方。

中繼器表格填寫：

Column0對(duì)應(yīng)的是y周坐標(biāo)文字。

Column1~7對(duì)應(yīng)的是文本1~7里面的具體數(shù)據(jù)。

2. x坐標(biāo)軸

x坐標(biāo)軸我們我們簡(jiǎn)單的用文本標(biāo)簽來制作即可，里面填寫好對(duì)應(yīng)的數(shù)據(jù)，案例中文門店1、2、3、4、5、6、7，然后和中繼器內(nèi)對(duì)應(yīng)的文本一一對(duì)齊。

3. 標(biāo)簽

標(biāo)簽我們簡(jiǎn)單用文字+矩形來制作，矩形是用填充顏色填充，后面的文本標(biāo)簽是每個(gè)顏色對(duì)應(yīng)的數(shù)值范圍，完成后如下圖所示。

然后我們還需要給每個(gè)顏色的矩形命名，這里比較重要，因?yàn)楹罄m(xù)我們通過name函數(shù)，可以獲取到名字，我們?cè)诿Q里填寫該區(qū)間的最大數(shù)值，后續(xù)通過交互就可以自動(dòng)根據(jù)命名的名稱來計(jì)算，實(shí)現(xiàn)自動(dòng)變色的效果。例如，黃色矩形的范圍是2000一下，就命名為2000；橙色是2000到4000，就命名為4000。

4. 提示彈窗

提示彈窗由矩形和兩個(gè)文本標(biāo)簽組成，底部背景矩形添加陰影效果，上面是標(biāo)題文本，對(duì)應(yīng)x坐標(biāo)軸，下面是數(shù)據(jù)文本，對(duì)應(yīng)y軸和具體數(shù)據(jù)。這個(gè)組合默認(rèn)隱藏。

這樣我們的材料就準(zhǔn)備好了，接下里我們開始制作交互。

二、交互制作

中繼器每項(xiàng)加載時(shí)，我們需要執(zhí)行一下操作：

1. 設(shè)置文本

我們要用設(shè)置文本的交互，將中繼器表格內(nèi)的值傳遞到中繼器里對(duì)應(yīng)的元件，這樣才能顯示數(shù)據(jù)。

首先將中繼器表格的Column0的數(shù)據(jù)設(shè)置到y(tǒng)軸坐標(biāo)文字的元件；然后將Column1~7的數(shù)據(jù)設(shè)置到文本1~7里面的元件，具體交互如下圖所示：

2. 設(shè)置面板狀態(tài)

設(shè)置面板狀態(tài)其實(shí)就是設(shè)置具體的顏色，因?yàn)榍懊嬖趧?dòng)態(tài)面板里面不同的state設(shè)置了不同的顏色。所以我們用設(shè)置面板狀態(tài)的交互來顯示對(duì)應(yīng)的顏色。下面以第一個(gè)動(dòng)態(tài)面板，即文本1元件下方的動(dòng)態(tài)面板為例，我們需要執(zhí)行一下交互：

條件1：如果Item.Column1<LVAR1.name，Item.Column1就是只中繼器里第一列的數(shù)據(jù)，LVAR1.name就是變量LVAR1的元件名字，這里L(fēng)VAR1對(duì)應(yīng)的就是第一個(gè)標(biāo)簽（黃色標(biāo)簽0~2000），因?yàn)榍懊嫖覀儗⑺麨?000，這里的意思其實(shí)就是如果第一列的數(shù)據(jù)小于2000的行。我們就將動(dòng)態(tài)面板設(shè)置到state1（黃色頁(yè)面）。

條件2：如果Item.Column1<LVAR1.name，這里和條件1基本一致，只是LVAR1的變量不同，這里L(fēng)VAR1代表第二個(gè)標(biāo)簽（橙色標(biāo)簽），前面我們將橙色標(biāo)簽命名為4000，所以我們通用用設(shè)置面板狀態(tài)的交互將動(dòng)態(tài)面板設(shè)置到state2（橙色頁(yè)面），即只要低于4000就顯示橙色。

這里我們注意，不要用if的條件，要用else if的條件。if的意思是不管上面成立不，我們都執(zhí)行該交互，那么低于兩千的數(shù)據(jù)也會(huì)顯示橙色，這明顯是不對(duì)的。else if就是上面條件不成立的情況，才會(huì)執(zhí)行一下交互，所以實(shí)際的條件就是2000到4000。

后面的也是一樣，就是從低到高設(shè)置條件，根據(jù)對(duì)應(yīng)的條件設(shè)置動(dòng)態(tài)面板的顏色。設(shè)置完文本1對(duì)應(yīng)的動(dòng)態(tài)面板1之后，就可以將交互復(fù)制到后面動(dòng)態(tài)面板2-7，然后需要交互里里面的Item.Column1需要改成2~7對(duì)應(yīng)，并且動(dòng)態(tài)面板要重新選擇對(duì)應(yīng)的動(dòng)態(tài)面版。

如果這里覺得麻煩的話，其實(shí)我們也可以只用一個(gè)文本和面板，通過中繼器網(wǎng)格布局的方式實(shí)現(xiàn)，這樣的好處就是省去很多功夫，缺點(diǎn)的話就是中繼器表格只有一列，和顯示的不一致，沒有那么直觀，總體來說各有利弊，你們根據(jù)你們實(shí)際的情況來選擇吧。

3. 鼠標(biāo)移到數(shù)據(jù)的交互

這里要分三種情況：鼠標(biāo)移入時(shí)，鼠標(biāo)移動(dòng)時(shí)，鼠標(biāo)移出時(shí)，我們以中繼器內(nèi)文本1元件為例。

1）鼠標(biāo)移入時(shí)

首先，我們要用顯示的交互事件，將默認(rèn)提示彈窗顯示。

其次，用設(shè)置文本的交互，將具體的數(shù)據(jù)設(shè)置到標(biāo)簽里，標(biāo)題文字設(shè)置為對(duì)應(yīng)橫坐標(biāo)的文字，這里也是用到變量LVAR1，選擇對(duì)應(yīng)的橫坐標(biāo)，移入文本1對(duì)應(yīng)就是第一個(gè)x坐標(biāo)元件的文字。

具體數(shù)據(jù)內(nèi)容設(shè)置為[[Item.Column0]]：[[Item.Column1]]，即鼠標(biāo)對(duì)應(yīng)位置的縱坐標(biāo)和具體數(shù)據(jù)。

2）鼠標(biāo)移動(dòng)時(shí)

我們要做的效果就是彈窗跟隨鼠標(biāo)移動(dòng)來移動(dòng)，我們用移動(dòng)的交互來實(shí)現(xiàn)，移動(dòng)到鼠標(biāo)對(duì)應(yīng)的位置，這里需要用Cursor函數(shù)來獲取鼠標(biāo)的坐標(biāo)，Cursor.x代表鼠標(biāo)的x坐標(biāo)，Cursor.y代表鼠標(biāo)的縱坐標(biāo)，我們?cè)谑髽?biāo)坐標(biāo)的基礎(chǔ)上+10，這樣就可以做出跟隨鼠標(biāo)移動(dòng)的效果。

3）鼠標(biāo)移出時(shí)

鼠標(biāo)移出文本標(biāo)簽時(shí)，我們用隱藏事件將彈窗隱藏。

然后我們可以將上述交互復(fù)制到文本2~7里，移動(dòng)和移出都不需要改變，我們修改鼠標(biāo)移入時(shí)設(shè)置文本的值即可，變量LVAR1選擇對(duì)應(yīng)的橫坐標(biāo)，Item.Column1修改為對(duì)應(yīng)的Item.Column2~7。這樣我們就制作完成了。

以后我們需要使用的話，只需要填寫在中繼器的表格里填寫數(shù)據(jù)即可，自動(dòng)生成交互效果，是不是很方便呢？

以上就是本期的全部?jī)?nèi)容了，感謝您的閱讀，我們下期見~88

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

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