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

編輯導語：一般的柱狀圖，只能看到某年份各月的數(shù)據(jù)，而組合柱狀圖或者堆疊柱狀圖又會顯得繚亂，這時便可以用動態(tài)切換的柱狀圖。本文作者分享如何用中繼器做一個可以動態(tài)切換的柱狀圖，一起來學習一下吧。

柱狀圖是數(shù)據(jù)可視化常用的組件，一般的柱狀圖只能看到某年份各月的數(shù)據(jù)，如果用組合柱狀圖或者堆疊柱狀圖，太多分類看起來也會很繚亂，這時就可以用動態(tài)切換的柱狀圖。

今天作者就教大家在Axure里面如何用中繼器做一個可以動態(tài)切換的柱狀圖。

制作完成之應具備以下交互效果：

1. 在中繼器表格中填寫具體數(shù)據(jù)和坐標軸最大值后，自動生成對應的柱狀圖
2. 鼠標移入對應柱狀體時，顯示該柱狀體對應的具體數(shù)據(jù)的數(shù)值
3. 可以點擊切換不同標簽查看對應選項的柱狀圖

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

一、標簽的制作

我們用幾個矩形制作標簽，表現(xiàn)需要設(shè)置選中樣式， 案例中選中樣式為填充顏色為灰色，文字顏色為白色，如下圖2021年標簽所示。所有標簽設(shè)置為同一個單選組，第一個標簽默認勾選選中。

鼠標單擊標簽時我們用選中的交互，設(shè)置當前元件選中為真。

二、柱狀圖的制作

1. 中繼器表格的填寫

柱狀圖我們需要用中繼器制作，中繼器內(nèi)部表格是存放具體數(shù)據(jù)的位置。我們需要增加一下幾列數(shù)據(jù)：

• text：對應柱狀圖的橫坐標文字
• year2017~2021：分別和上面的5個標簽年份的數(shù)據(jù)對應
• fuzhu：默認為空即可，只用于后續(xù)邏輯交互

我們填寫或者在excel復制對應數(shù)據(jù)過來即可。

2. 中繼器內(nèi)部元件

柱狀圖我們用中繼器來制作，中繼器內(nèi)部元件包括、藍色條形（矩形）、透明背景(矩形)、橫坐標文字（文本標簽），如下圖所示擺放：

透明背景矩形主要是用來制作高亮效果，即鼠標移入對應柱狀體時，會有一個變色的提示。所以我們先設(shè)置一個選中的樣式為淺藍色，然后將柱狀體和背景矩形組合，鼠標移入該組合時，設(shè)置背景矩形為選中，鼠標移出組合時，設(shè)置背景矩形為取消選中。

橫坐標的文本對應的是中繼器表格里text里的值，所以在中繼器每項加載時，我們用設(shè)置文本的交互將text列的值設(shè)置到橫坐標的數(shù)據(jù)文本里。

3. 坐標軸最大值和設(shè)置柱狀的高度

我們在中繼器外面增加一個文本標簽，在里面填寫坐標軸的最大值，這里的值應該要大于或等于中繼器表格里最大的數(shù)據(jù)，案例中我們填寫5000。這個文本只用于計算，所以默認隱藏即可。

回到中繼器每項加載時，我們根據(jù)中繼器表格里的數(shù)據(jù)，用設(shè)置尺寸的交互，寬不變還是原來的寬度，高度其實就是柱狀原來的高度（或者背景原來的高度）*對應的數(shù)據(jù)值在除以最大值的文本，設(shè)置尺寸的時候記的錨點設(shè)置在底部位置。

簡單來書就是我當前數(shù)據(jù)值例如2500除以最大值5000，得到0.5，0.5在乘柱狀圖最開始的高度（這里可以看做背景矩形的高度）。

這就是設(shè)置尺寸的原理了，明白了原理之后我們還需要根據(jù)那個標簽選中來確定用哪一個數(shù)據(jù)，例如2021年的標簽選中我們就用year2021列的數(shù)據(jù)，如果是2020年的標簽選中，我們就用year2020的數(shù)據(jù)……

4. 坐標和邊線

這樣柱狀圖就可以自動生成了，接下來我們回到中繼器外面，增加邊線和y坐標值，如下圖所示擺放：

y坐標值用幾個文本標簽制作，可以手動輸入文字，也可以通過交互來自動設(shè)置，前面我們填寫了最大值的文本，我們可以通過該文本自動計算，例如最下面是0，然后上面一個其實就是五分之一乘最大值5000=1000；在上面一個就是五分之二*最大值5000=2000，以此類推……

都是數(shù)學關(guān)系，具體也要看你分成幾份，我們在載入時用設(shè)置文本的交互來設(shè)置即可，預覽時數(shù)值就會自動變化，這里注意，如果輸入的最大值不是整數(shù)，或者有可能除不盡的話，我們還要用tofixed函數(shù)將他四舍五入：

5. 顯示彈窗的標簽

我們想做移入對應柱狀體顯示對應的數(shù)據(jù)的標簽，所以我們用矩形制作，調(diào)整大小和樣式后默認隱藏，在中繼器里的柱狀組合里寫添加交互。

鼠標移入時，我們增加顯示數(shù)據(jù)標簽的交互，鼠標移出時，增加數(shù)據(jù)標簽隱藏的交互，鼠標移動時，我們增加一個移動事件，我們想標簽跟隨鼠標移動，所以這里用到cursor的函數(shù)，可以獲取鼠標的x或y值，移動時選擇到達，然后獲取鼠標的x值（Cursor.x）和y值（Cursor.y），我們還要加一點距離，不然就會被彈窗擋住，相當于鼠標移出了柱狀組合。

最后，我們還要在鼠標移入時，用設(shè)置文本的交互將數(shù)據(jù)設(shè)置到標簽上即可，這里和上面設(shè)置尺寸一樣，需要分條件，就是根據(jù)選中的標簽來設(shè)置具體的數(shù)據(jù)

如果2021年的標簽被選中，我們就設(shè)置值中繼器表格里year2021列的值；如果2020年的標簽被選中，我們就設(shè)置值中繼器表格里year2020列的值……

這樣我們就完成動態(tài)切換柱狀圖原型模板的制作了，以后使用時只需要在中繼器表格里填寫內(nèi)容，就可自動生成能切換查看不同數(shù)據(jù)的柱狀圖，是不是很方便呢。

那以上就是用中繼器制作樹形表格原型模板的全部內(nèi)容了，感謝您的閱讀，我們下期見。

本文由 @Axure高保真原型 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

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