Quick BI支援通過頁面柵格設定功能布局和組織儀表板中的元素(例如:圖表、控制項),協助使用者更加精確且靈活地安排各個組件的位置和大小,使得儀表板整體更加美觀。
功能概述
頁面柵格設定功能是一項布局控制功能。它並非針對單個圖表的內部樣式,而是作用於整個儀表板頁面的基礎網格系統。通過調整這個網格的參數,您可以更靈活、更精確地定義儀表板上每個組件的寬度、高度和間距。
優勢簡介
精細布局: 允許使用者對組件的位置和尺寸進行更細緻的控制,輕鬆實現像素級的對齊和排布。
多組件同行: 特別適用於需要在同一行內放置多個組件(例如,並排展示銷售額、利潤率、成本三個KPI指標卡)並確保它們整齊排列的情境。
提升效率: 通過預設柵格規則,簡化了手動拖拽對齊的複雜性,提高了布局搭建的效率。
應用情境
您希望在一個儀表板的頂部地區,水平展示三個關鍵效能指標的組件,讓它們寬度一致、間距均勻。通過調整頁面柵格設定(如增加柵格列數),可以更容易地實現這種布局。
您需要在一個有限的空間內緊湊地排列多個小型圖表,通過減小工具單位高度和列間距,可以實現更密集的布局。
使用限制
為確保更好地使用頁面柵格設定,請注意以下應用限制:
全域性設定: 頁面柵格設定是針對整個儀表板頁面的。一旦調整,其定義的柵格列數、單位高度和間距將應用於該儀表板上的所有組件的布局網格,無法支援對頁面不同地區應用不同的柵格配置。
影響布局基礎: 它改變的是組件可調整大小和位置的最小單位,而不是直接設定每個組件的具體尺寸。最終的組件尺寸仍需通過拖拽組件邊緣來調整,但調整的精度受柵格設定影響。
操作步驟
您可以在儀表板編輯介面的工具列中找到並配置頁面柵格設定。
功能入口:在儀表板編輯模式下,找到頂部的工具列配置區,點擊頁面柵格設定表徵圖(
)以開啟配置面板。
配置操作:在彈出的頁面柵格設定工具列中,您可以調整以下參數。

柵格列數
作用: 決定了儀表板頁面在水平方向上被劃分成多少等份(列)。
效果: 設定的列數越多,每一列的寬度就越小,這意味著您在拖動調整組件寬度時,可控制的顆粒度就越細。這使得在一行內精確放置多個組件成為可能。
列間距
作用: 設定相鄰柵格列之間的空白距離。
效果: 調整此值可以控制並排組件之間的水平間隙大小。
組件單位高度
作用: 定義了在柵格布局下,組件高度調整的最小單位(步長),通常以像素(px)為單位。
效果: 設定的單位高度越小,您在垂直方向上拖動調整組件高度時的顆粒度就越細,可以實現更精確的高度控制。
行間距
作用: 定義儀表板布局中,垂直方向上相鄰組件(或組件所在行)之間、組件與儀表板邊框之間的固定空白距離。
效果: 調整此值可以控制上下排列組件之間的垂直間隙大小,影響頁面的整體縱向疏密度。
儲存配置:點擊完成儲存相關配置後,您就可以在儀表板畫布上通過拖動組件的邊緣來按照新的柵格精度調整其寬度和高度了。
常見問題
1. 我想讓組件的高度調整得更精確一點,應該改哪個設定?
答: 您應該調整組件單位高度。將這個值設定得更小(例如從預設的 10px 改為 5px),那麼您每次拖動組件下邊緣時,高度變化的幅度就會更小,從而實現更精細的高度控制。
2. 頁面柵格設定是只對新添加的組件生效,還是對整個儀表板都生效?
答: 頁面柵格設定是全域性的,它會影響整個儀表板頁面的布局網格。一旦修改,它將應用於當前儀表板上所有現有和未來添加的組件的布局調整方式(寬度和高度的調整精度及間距)。
3. 調整“柵格列數”有什麼用?是不是越多越好?
答: 柵格列數決定了組件寬度的調整精度。列數越多,您可以把組件調得更窄,也更容易在一行裡放下更多組件並精確控制它們的相對寬度。但並非絕對越多越好,過多的列數可能會讓拖拽調整變得過於細碎。根據您實際的布局需求選擇合適的列數即可。