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

編輯導語：在進行項目管理以及BI可視化案例中，我們經常會用到的一種分析圖——區間條形圖，也就是甘特圖。但是Axure自帶的元件庫里并沒有我們想要的高保真甘特圖，這時我們該如何解決呢？

區間條形圖（甘特圖）是項目管理中常用的工具，也是BI可視化案例中常用的分析圖。

由于Axure自帶的元件庫里并沒有高保真甘特圖，所以本期教程主要介紹如果制作高保真甘特圖，方便我們日后的使用。

一、制作完成后的評甘特圖控件應具備以下效果：

• 填寫坐標軸最大值后，生成坐標。
• 在中繼器表格內填寫開始值、結束值，系統自動生成條形圖，并移動到對應位置。
• 鼠標移入時可以查看每一項的具體數據。

二、制作材料

制作材料全部都是用Axure原生的的材料，具體包括以下材料：

1. 中繼器

用中繼器制作可以實現修改數值就能自動生成交互，中繼器表格內容如下：

• text：填寫圖標的中坐標名稱
• start：初始值
• end：結束值

中繼器內原型：

• 縱坐標文本：圖表的縱坐標，對應text列。
• 藍色條形：后面根據start和end的差值設置尺寸和位置的交互，案例中默認設置寬400，高6。
• 透明背景矩形：用于鼠標移入時顯示數據的交互，案例中默認設置為寬400，高40，元件選中樣式為淺藍色。

將藍色條形和透明矩形組合，中繼器內部3元件如下圖所示擺放：

2. 外框線

用垂直線制作外框線，外面最左側和最右側為實線，中間的為虛線，根據條形擺放

3. 橫坐標文本

有多少根垂線就增加多少個橫坐標，第一個默認填寫0，其余的可以不用填寫，后續根據交互自動計算坐標值。制作完成后如下圖所示：

4. 最大值邏輯文本

新建一個文本，填寫end列的最大值，后續會用于自動計算，默認隱藏。

5. 數據標簽矩形

顯示具體數值，增加外部隱藏，默認隱藏元件。

三、制作交互

1. 中繼器每項載入時事件

• 設置文本：將中繼器item.text列的值設置到縱坐標文本。
• 移動事件：將藍色條形移動到對應位置，具體問start列的值乘以條形的寬度（案例中為400），再除以最大值邏輯文本，得出藍色條初始的位置。
• 設置尺寸：設置藍色條形的尺寸，寬度為end列-start列數值之差，乘以條形的寬度（案例中為400），再除以最大值邏輯文本；高度不變，保持原來的高度。

2. 鼠標移入條形組合時

• 選中：設置透明背景矩形為真，選中后矩形會變成藍色。
• 顯示：顯示數據標簽，將隱藏了的數據標簽顯示出來。
• 設置文本：設置數據標簽的文本值為中繼器表格start列~end列。

3. 鼠標移出條形組合時

這里和鼠標移入時的操作剛好相反。

• 取消選中：將透明背景取消選中，這樣就可以從藍色變回透明的。
• 隱藏：隱藏數據標簽，將數據標簽隱藏。

4. 鼠標在條形組合內移動時

• 移動：將數據標簽移動到鼠標所在的位置，cursor.x函數是獲取鼠標的x坐標值，cursor.y是獲取鼠標的縱坐標值；加10是為了不會剛好擋住鼠標，導致觸發鼠標移出時隱藏標簽的時間。

5. 橫坐標載入時事件

案例中默認有6個橫坐標，出去第一個橫坐標為0外，剩下5個橫坐標平分最大值邏輯文本。

• 第一個橫坐標：默認填寫0，不需要交互事件；
• 第二個橫坐標：最大值邏輯文本/5；
• 第三個橫坐標：最大值邏輯文本/5*2；
• 第四個橫坐標：最大值邏輯文本/5*3；
• 第五個橫坐標：最大值邏輯文本/5*4；
• 第六個橫坐標：最大值邏輯文本/5*5。

需要注意如果最大值除不盡的情況，如果除不盡，需要用fixed函數行四舍五入。

以上就是高保真區間條形圖的制作方法了，感興趣的同學們可以動手試試，謝謝您的閱讀。

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

題圖來自 Unsplash，基于CC0協議