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

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

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

一、效果展示

1）自動生成圖表效果：在中繼器表格中填寫維護項目數據，自動生成對應的圖表。

2）標簽返回數值效果：鼠標移動對應的區(qū)域，會在標簽里顯示該區(qū)域柱狀和折線圖對應的數據。

二、制作教程

1. 圖表外框基礎元件的制作

坐標軸——我們用幾條水平線制作即可，最上方和最下方的用實線，最上方用虛線。

縱坐標——我們用文本標簽來制作，另外需要兩個文本標簽，記錄兩個縱坐標的最大值，后續(xù)需要用來制作交互，各個縱坐標可以手動填寫，也可以通過設置文本的交互，根據最大值文本標簽來設置，例如，最大值是5000，那么最上方的文本標簽就是5000，第二個就是5000*4/5=4000，依次類推，我們在元件載入時，用設置文本的交互，把最大值看作變色，根據變量乘比值，就可以自動設置y坐標值。

提示——我們用對應顏色的矩形制作方塊，文本標簽填寫對應的提示文字，就是該顏色代表的項目名。

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

2. 中繼器內所需元件及表格制作

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

• 矩形——用于制作柱狀圖；
• 圓點和水平線——用于制作折線圖；
• 文本標簽——對應的x橫坐標的值；
• 背景矩形——用于鼠標移入時高亮回顯，默認透明即可，選中樣式為淺色填充。

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

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

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

text列：對應x坐標顯示的文本值，在中繼器每項加載時，我們用設置文本的交互，就可以把該列的值設置到對應的文本標簽里。

count列：對應折線圖的數字（因為這個是在折線圖基礎上增加的柱狀圖，所以命名比較隨意，大家也可以自行命名）。

zhuzhuangtu列：對應柱狀圖的數據。

3. 柱狀圖的制作

那接下來我們寫柱狀圖的交互，其實原理很簡單，我們前面用文本記錄了y坐標的最大值，然后我們用中繼器表格里zhuangzhuangtu列的值除以y坐標的最大值，就可以得到一個比例，然后用這比例來乘以柱狀圖最高的高度，就可以求出當前柱狀圖的尺寸，我們在中繼器每項加載時，用設置尺寸的交互，就可以將每行的柱狀圖設置為對應的尺寸。

4. 折線圖的制作

折線圖開始的原理和柱狀圖很像，柱狀圖是根據表格的數據值和y坐標最大值比例設置元件的高度，那折線圖就是根據表格的數據值和y坐標最大值比例將元件和折線移動到對應的位置。

然后我們知道兩點確認一條直線，所以如果是第一個點，是不需要有直線的，因為第一個第二個點結合才會出現直線。所以在第一行加載時，我們用隱藏的交互，將第一根折線隱藏起來。我們還要將第一個元件的y坐標值記錄下來，我們要在中繼器外面增加一個文本標簽，默認隱藏，只用于記錄前面一行圓點y的坐標值，我們成為y1。

然后我們在加載第二行數據是，我們也是在中繼器外面增加一個文本標簽，用于記錄當前行圓點y的坐標值。

然后我們根據兩點間坐標公式d=√[(x1-x2)2+(y1-y2)2]，這樣就可以求出直線的距離，y1，y2我們都知道了。x1-x2，其實就是每個圖形之間的寬度，我們可以看作背景矩形的寬度，這樣我們用設置尺寸就交互，就可以設置出對應長度的線段。

求完長度，我們還要求角度，可以用Math.atan2(y2-y1,x2-x1)*180/π來計算出兩個點之間的交互，然后用旋轉的交互，將線段設置到對應的角度，這兩兩點就連城線了。

最后，我們用設置文本的交互，將當前行圓點的y坐標值設置到記錄y1的文本標簽里，那加載下一行的時候，就也能知道上一行的y1值了。

5. 標簽的制作

主要材料包括：是矩形和文本標簽。

矩形用于制作背景矩形（增加隱藏效果），以及提示標點。

文本標簽用于返回項目值和具體數字。

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

在鼠標移入中繼器內組合時，我們用顯示的交互，將他顯示出來，然后用設置文本的交互，將中繼器表格里折線圖和柱狀圖的值分別設置到對應的文本標簽里。

鼠標移出時，我們將標簽組合隱藏即可。

這樣標簽就可以顯示和隱藏了，最后，我們還要增加一個標簽跟隨鼠標移動的交互，我們在鼠標移動時，用移動的交互，移動標簽組合，我們可以用cursor函數獲取鼠標的x值和y值，然后移動到鼠標的右下方。

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

那以上就是本期教程的全部內容，感興趣的同學們可以動手試試哦，感謝您的閱讀，我們下期見。