页面栅格设置

Quick BI支持通过页面栅格设置功能布局和组织仪表板中的元素(例如:图表、控件),帮助用户更加精确且灵活地安排各个组件的位置和大小,使得仪表板整体更加美观。

功能概述

页面栅格设置功能是一项布局控制功能。它并非针对单个图表的内部样式,而是作用于整个仪表板页面的基础网格系统。通过调整这个网格的参数,您可以更灵活、更精确地定义仪表板上每个组件的宽度、高度和间距。

优势简介

  • 精细布局: 允许用户对组件的位置和尺寸进行更细致的控制,轻松实现像素级的对齐和排布。

  • 多卡片同行: 特别适用于需要在同一行内放置多个卡片组件(例如,并排展示销售额、利润率、成本三个KPI指标卡)并确保它们整齐排列的场景。

  • 提升效率: 通过预设栅格规则,简化了手动拖拽对齐的复杂性,提高了布局搭建的效率。

应用场景

  • 您希望在一个仪表板的顶部区域,水平展示三个关键绩效指标的卡片组件,让它们宽度一致、间距均匀。通过调整页面栅格设置(如增加栅格列数),可以更容易地实现这种布局。

  • 您需要在一个有限的空间内紧凑地排列多个小型图表,通过减小卡片单位高度和列间距,可以实现更密集的布局。

使用限制

为确保更好地使用页面栅格设置,请注意以下应用限制:

  1. 全局性设置: 页面栅格设置是针对整个仪表板页面的。一旦调整,其定义的栅格列数、单位高度和间距将应用于该仪表板上的所有卡片组件的布局网格,无法支持对页面不同区域应用不同的栅格配置。

  2. 影响布局基础: 它改变的是卡片可调整大小和位置的最小单位,而不是直接设定每个卡片的具体尺寸。最终的卡片尺寸仍需通过拖拽卡片边缘来调整,但调整的精度受栅格设置影响。

操作步骤

您可以在仪表板编辑界面的工具栏中找到并配置页面栅格设置。

  1. 功能入口:在仪表板编辑模式下,找到顶部的工具栏配置区,点击页面栅格设置图标(image.png)以打开配置面板。image

  2. 配置操作:在弹出的页面栅格设置工具栏中,您可以调整以下参数。image

    • 栅格列数

      • 作用: 决定了仪表板页面在水平方向上被划分成多少等份(列)。

      • 效果: 设置的列数越多,每一列的宽度就越小,这意味着您在拖动调整卡片宽度时,可控制的颗粒度就越细。这使得在一行内精确放置多个卡片成为可能。

    • 列间距

      • 作用: 设置相邻栅格列之间的空白距离。

      • 效果: 调整此值可以控制并排卡片之间的水平间隙大小。

    • 卡片单位高度

      • 作用: 定义了在栅格布局下,卡片高度调整的最小单位(步长),通常以像素(px)为单位。

      • 效果: 设置的单位高度越小,您在垂直方向上拖动调整卡片高度时的颗粒度就越细,可以实现更精确的高度控制。

    • 行间距

      • 作用: 定义仪表板布局中,垂直方向上相邻卡片(或卡片所在行)之间的固定空白距离。

      • 效果: 调整此值可以控制上下排列卡片之间的垂直间隙大小,影响页面的整体纵向疏密度。

  3. 保存配置:点击完成保存相关配置后,您就可以在仪表板画布上通过拖动卡片的边缘来按照新的栅格精度调整其宽度和高度了。

常见问题

1. 我想让卡片的高度调整得更精确一点,应该改哪个设置?

: 您应该调整卡片单位高度。将这个值设置得更小(例如从默认的 10px 改为 5px),那么您每次拖动卡片下边缘时,高度变化的幅度就会更小,从而实现更精细的高度控制。

2. 页面栅格设置是只对新添加的卡片生效,还是对整个仪表板都生效?

: 页面栅格设置是全局性的,它会影响整个仪表板页面的布局网格。一旦修改,它将应用于当前仪表板上所有现有和未来添加的卡片组件的布局调整方式(宽度和高度的调整精度及间距)。

3. 调整“栅格列数”有什么用?是不是越多越好?

: 栅格列数决定了卡片宽度的调整精度。列数越多,您可以把卡片调得更窄,也更容易在一行里放下更多卡片并精确控制它们的相对宽度。但并非绝对越多越好,过多的列数可能会让拖拽调整变得过于细碎。根据您实际的布局需求选择合适的列数即可。