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

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

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

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

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

一、材料準(zhǔn)備

1. 表格內(nèi)容

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

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

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

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

中繼器表格填寫：

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

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

2. x坐標(biāo)軸

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

3. 標(biāo)簽

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

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

4. 提示彈窗

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

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

二、交互制作

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

1. 設(shè)置文本

我們要用設(shè)置文本的交互，將中繼器表格內(nèi)的值傳遞到中繼器里對應(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è)置具體的顏色，因為前面在動態(tài)面板里面不同的state設(shè)置了不同的顏色。所以我們用設(shè)置面板狀態(tài)的交互來顯示對應(yīng)的顏色。下面以第一個動態(tài)面板，即文本1元件下方的動態(tài)面板為例，我們需要執(zhí)行一下交互：

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

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

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

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

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

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

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

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

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

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

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

2）鼠標(biāo)移動時

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

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

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

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

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

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

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

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