雙坐標(biāo)柱狀折線圖的使用有助于我們比較數(shù)據(jù)之前的趨勢(shì)和關(guān)系，那么，怎么在Axure中用中繼器制作出雙坐標(biāo)柱狀折線圖呢？這篇文章里，作者就進(jìn)行了解讀和分析，一起來(lái)看一下。

雙坐標(biāo)柱狀折線圖常用于同時(shí)展示兩組數(shù)據(jù)的圖表類型，每組數(shù)據(jù)都有自己的縱坐標(biāo)軸（Y軸）。一組數(shù)據(jù)通常用柱狀圖表示，而另一組數(shù)據(jù)則用折線圖表示。這種圖表類型有助于比較兩組數(shù)據(jù)之間的關(guān)系和趨勢(shì)。

那今天作者就教大家，如何在Axure中用中繼器制作雙坐標(biāo)柱狀折線圖的原型末班，制作完成后可以實(shí)現(xiàn)一下效果：

一、效果展示

1）自動(dòng)生成圖表效果：在中繼器表格中填寫(xiě)維護(hù)項(xiàng)目數(shù)據(jù)，自動(dòng)生成對(duì)應(yīng)的圖表。

2）標(biāo)簽返回?cái)?shù)值效果：鼠標(biāo)移動(dòng)對(duì)應(yīng)的區(qū)域，會(huì)在標(biāo)簽里顯示該區(qū)域柱狀和折線圖對(duì)應(yīng)的數(shù)據(jù)。

二、制作教程

1. 圖表外框基礎(chǔ)元件的制作

坐標(biāo)軸——我們用幾條水平線制作即可，最上方和最下方的用實(shí)線，最上方用虛線。

縱坐標(biāo)——我們用文本標(biāo)簽來(lái)制作，另外需要兩個(gè)文本標(biāo)簽，記錄兩個(gè)縱坐標(biāo)的最大值，后續(xù)需要用來(lái)制作交互，各個(gè)縱坐標(biāo)可以手動(dòng)填寫(xiě)，也可以通過(guò)設(shè)置文本的交互，根據(jù)最大值文本標(biāo)簽來(lái)設(shè)置，例如，最大值是5000，那么最上方的文本標(biāo)簽就是5000，第二個(gè)就是5000*4/5=4000，依次類推，我們?cè)谠d入時(shí)，用設(shè)置文本的交互，把最大值看作變色，根據(jù)變量乘比值，就可以自動(dòng)設(shè)置y坐標(biāo)值。

提示——我們用對(duì)應(yīng)顏色的矩形制作方塊，文本標(biāo)簽填寫(xiě)對(duì)應(yīng)的提示文字，就是該顏色代表的項(xiàng)目名。

按下圖所示擺放即可，具體位置可以自行調(diào)整。

2. 中繼器內(nèi)所需元件及表格制作

圖表我們用中繼器來(lái)制作，中繼器里面我們需要的元件包括：

• 矩形——用于制作柱狀圖；
• 圓點(diǎn)和水平線——用于制作折線圖；
• 文本標(biāo)簽——對(duì)應(yīng)的x橫坐標(biāo)的值；
• 背景矩形——用于鼠標(biāo)移入時(shí)高亮回顯，默認(rèn)透明即可，選中樣式為淺色填充。

將所有元件組合在一起，如下圖所示擺放即可，布局選擇水平。

鼠標(biāo)移入組合時(shí)，用選中的交互，設(shè)置背景矩形選中為真，鼠標(biāo)移出時(shí)，設(shè)置選中狀態(tài)為假。這里拓展一下，如果沒(méi)有其他效果，其實(shí)也可以用懸停的樣式，勾選組合允許鼠標(biāo)觸發(fā)內(nèi)容交互樣式，那就不用寫(xiě)效果可以移入變色。不過(guò)作者考慮后期移入選中后可以在選中時(shí)寫(xiě)交互，所以就用選中樣式來(lái)坐坐高亮效果。

中繼器表格我們需要新建三列。

text列：對(duì)應(yīng)x坐標(biāo)顯示的文本值，在中繼器每項(xiàng)加載時(shí)，我們用設(shè)置文本的交互，就可以把該列的值設(shè)置到對(duì)應(yīng)的文本標(biāo)簽里。

count列：對(duì)應(yīng)折線圖的數(shù)字（因?yàn)檫@個(gè)是在折線圖基礎(chǔ)上增加的柱狀圖，所以命名比較隨意，大家也可以自行命名）。

zhuzhuangtu列：對(duì)應(yīng)柱狀圖的數(shù)據(jù)。

3. 柱狀圖的制作

那接下來(lái)我們寫(xiě)柱狀圖的交互，其實(shí)原理很簡(jiǎn)單，我們前面用文本記錄了y坐標(biāo)的最大值，然后我們用中繼器表格里zhuangzhuangtu列的值除以y坐標(biāo)的最大值，就可以得到一個(gè)比例，然后用這比例來(lái)乘以柱狀圖最高的高度，就可以求出當(dāng)前柱狀圖的尺寸，我們?cè)谥欣^器每項(xiàng)加載時(shí)，用設(shè)置尺寸的交互，就可以將每行的柱狀圖設(shè)置為對(duì)應(yīng)的尺寸。

4. 折線圖的制作

折線圖開(kāi)始的原理和柱狀圖很像，柱狀圖是根據(jù)表格的數(shù)據(jù)值和y坐標(biāo)最大值比例設(shè)置元件的高度，那折線圖就是根據(jù)表格的數(shù)據(jù)值和y坐標(biāo)最大值比例將元件和折線移動(dòng)到對(duì)應(yīng)的位置。

然后我們知道兩點(diǎn)確認(rèn)一條直線，所以如果是第一個(gè)點(diǎn)，是不需要有直線的，因?yàn)榈谝粋€(gè)第二個(gè)點(diǎn)結(jié)合才會(huì)出現(xiàn)直線。所以在第一行加載時(shí)，我們用隱藏的交互，將第一根折線隱藏起來(lái)。我們還要將第一個(gè)元件的y坐標(biāo)值記錄下來(lái)，我們要在中繼器外面增加一個(gè)文本標(biāo)簽，默認(rèn)隱藏，只用于記錄前面一行圓點(diǎn)y的坐標(biāo)值，我們成為y1。

然后我們?cè)诩虞d第二行數(shù)據(jù)是，我們也是在中繼器外面增加一個(gè)文本標(biāo)簽，用于記錄當(dāng)前行圓點(diǎn)y的坐標(biāo)值。

然后我們根據(jù)兩點(diǎn)間坐標(biāo)公式d=√[(x1-x2)2+(y1-y2)2]，這樣就可以求出直線的距離，y1，y2我們都知道了。x1-x2，其實(shí)就是每個(gè)圖形之間的寬度，我們可以看作背景矩形的寬度，這樣我們用設(shè)置尺寸就交互，就可以設(shè)置出對(duì)應(yīng)長(zhǎng)度的線段。

求完長(zhǎng)度，我們還要求角度，可以用Math.atan2(y2-y1,x2-x1)*180/π來(lái)計(jì)算出兩個(gè)點(diǎn)之間的交互，然后用旋轉(zhuǎn)的交互，將線段設(shè)置到對(duì)應(yīng)的角度，這兩兩點(diǎn)就連城線了。

最后，我們用設(shè)置文本的交互，將當(dāng)前行圓點(diǎn)的y坐標(biāo)值設(shè)置到記錄y1的文本標(biāo)簽里，那加載下一行的時(shí)候，就也能知道上一行的y1值了。

5. 標(biāo)簽的制作

主要材料包括：是矩形和文本標(biāo)簽。

矩形用于制作背景矩形（增加隱藏效果），以及提示標(biāo)點(diǎn)。

文本標(biāo)簽用于返回項(xiàng)目值和具體數(shù)字。

將上方元件組合在一起，如下圖所示擺放，默認(rèn)隱藏。

在鼠標(biāo)移入中繼器內(nèi)組合時(shí)，我們用顯示的交互，將他顯示出來(lái)，然后用設(shè)置文本的交互，將中繼器表格里折線圖和柱狀圖的值分別設(shè)置到對(duì)應(yīng)的文本標(biāo)簽里。

鼠標(biāo)移出時(shí)，我們將標(biāo)簽組合隱藏即可。

這樣標(biāo)簽就可以顯示和隱藏了，最后，我們還要增加一個(gè)標(biāo)簽跟隨鼠標(biāo)移動(dòng)的交互，我們?cè)谑髽?biāo)移動(dòng)時(shí)，用移動(dòng)的交互，移動(dòng)標(biāo)簽組合，我們可以用cursor函數(shù)獲取鼠標(biāo)的x值和y值，然后移動(dòng)到鼠標(biāo)的右下方。

這樣我們就完成了中繼器制作雙坐標(biāo)柱狀折線圖的原型模板，后續(xù)使用也很方便，只需要在中繼器表格里維護(hù)項(xiàng)目、數(shù)據(jù)以及坐標(biāo)軸最大值，即可自動(dòng)生成對(duì)應(yīng)的柱狀折線圖。

那以上就是本期教程的全部?jī)?nèi)容，感興趣的同學(xué)們可以動(dòng)手試試哦，感謝您的閱讀，我們下期見(jiàn)。