Axure高保真教程:用中繼器制作雙坐標柱狀折線圖

0 評論 3536 瀏覽 0 收藏 11 分鐘

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

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

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

一、效果展示

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

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

二、制作教程

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

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

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

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

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

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

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

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

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

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

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

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值,然后移動到鼠標的右下方。

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

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

本文由 @AI產品人 原創發布于人人都是產品經理,未經許可,禁止轉載

題圖來自 Unsplash,基于 CC0 協議

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!