用Axure制作直方圖教程:
1.填寫復讀機表格的直方圖。我們需要用中繼器來完成它。中繼器的內部表是存儲特定數據的位置。我們需要添加幾列數據:文本:直方圖對應的橫坐標文本。
Year2017~2021:分別對應以上五個標簽年份的數據。
朱富:默認為空，只用於後續的邏輯交互。
我們可以在excel中填寫或復制相應的數據。2.直放站內部組件的直方圖由直放站制作。中繼器的內部組件包括藍色條(矩形)、透明背景(矩形)和水平文本(文本標簽)。透明的背景矩形主要是用來做高亮效果的，也就是當鼠標移動到對應的列時，會有變色提示。所以我們先將壹個選中的樣式設置為淺藍色，然後將該列和背景矩形合並。當鼠標移入組合時，將背景矩形設置為選中，當鼠標移出組合時，將背景矩形設置為未選中。橫坐標上的文本對應的是repeater表中文本中的值，所以在加載repeater的每壹項時，我們使用設置文本的交互，將文本列的值設置為橫坐標上的數據文本。3.設置坐標軸的最大值和列的高度。我們在repeater外部添加壹個文本標簽，並填入坐標軸的最大值。此處的值應大於或等於中繼器表中的最大數據量。在這種情況下，我們填寫5000。此文本僅用於計算，因此默認情況下可以隱藏。當我們返回到中繼器的每個加載時，我們使用根據中繼器表中的數據設置大小的交互。寬度不變還是原來的寬度，高度實際上是欄的原來高度(或者背景的原來高度)*對應的數據值除以最大值的文本，設置大小時記錄的錨點設置在底部位置。簡單來說，我當前的數據值，比如2500，除以最大值5000得到直方圖開始處的高度0.5(這裏可以看作是背景矩形的高度)。這是設定大小的原則。了解了原理之後，我們還需要根據標簽選擇來確定使用哪些數據。例如，在2021中選擇標簽時，我們將使用year2021列中的數據。如果選擇2020年的標簽，我們將使用2020年的數據。4.坐標和邊緣，以便可以自動生成直方圖。然後我們將回到中繼器的外面。添加邊線和Y坐標值:Y坐標值由幾個文本標簽組成，可以手工輸入，也可以通過交互自動設置。我們可以自動計算前面文本的最大值，比如底部值為0，然後頂部值實際上是最大值的五分之壹倍5000 = 1000；上面那個是五分之二*最大值是5000=2000，等等都是數學關系，看妳分成多少份了。我們可以通過設置加載時文本的交互來設置，預覽時數值會自動變化。這裏註意，如果輸入的最大值不是整數，或者可能取之不盡，我們將使用tofixed函數將其四舍五入:5。顯示彈出窗口的標簽，我們要。當鼠標移入時，我們增加了顯示數據標簽的交互；當鼠標移出時，我們增加隱藏數據標簽的交互；當鼠標移動時，我們添加壹個移動事件。我們想讓標簽隨著鼠標移動，所以在這裏用cursor的函數來獲取鼠標的x或y值，移動時選擇到達，然後獲取鼠標的x值(Cursor.x)和y值(Cursor.y)。我們需要增加壹點距離。最後，當鼠標移入時，我們需要通過設置文本的交互來設置標簽上的數據。這裏大小和上面設置的壹樣，具體數據需要根據選擇的標簽來設置。如果選擇了標簽2021，我們將在值重復表中設置列year2021的值。如果選擇了2020年標簽，我們將在值repeater表中設置列year2020的值，這樣我們就可以完成動態切換直方圖原型模板的制作。以上是關於“如何用Axure制作直方圖？”分享所有的內容怎麽樣？妳學會了嗎？Axure在學習中註重方法和技巧。如果妳覺得自己有很強的理解和學習能力，不妨繼續瀏覽更多關於Axure的相關文章~當然，如果妳需要更系統更準確的學習Axure，那麽我建議妳選擇我們的Axure自學視頻課~最後，喜歡的話，留言+收藏，下次學習會更方便~