表格

更新时间:2020-02-10

表格的数据绑定

只需要拖拽要展示的字段到「列」中即可:

图片

对于绑定的每个字段,无论是维度还是度量,都可以做一些特殊配置,在相应的字段上「右键」即可看到如下:

图片

点击上图中的「度量列设置」:

图片

可以对绑定的列做:表头更改、列宽度、背景色等设置。还可以在展示时隐藏本列,但是导出 Excel 数据时包含本列,在下钻和联动其它图表时,隐藏列的数据依然可以作为参数来使用,一个典型的场景是表格展示时隐藏一个 ID 字段,然后下钻图表时使用这个 ID 字段作为下钻参数来获取对应的下钻图表的数据。

表格条件格式

表格条件格式支持:背景颜色变化、数字颜色变化、条形图、突出显示单元格四种条件格式设置:

图片

条件格式配置过程:

下面以“突出显示单元格”为例说明如何设置条件格式。

第一步:右键选中需要设置条件格式的「字段」,在弹出的菜单中选择「条件格式」(支持度量和维度字段)

图片

第二步:选择需要配置的格式,并添加规则

图片

第三步:确定后规则作用于表格并生效(按照我们设置的规则,数量大于 10 小于 15 的数据所在单元格显示红色)

图片

注:当选择背景颜色较深时,可以开启突出字体颜色来清晰显示字体

表格的高级设置

表格分页

图片

表格排序

图片

表格合计和均值

Sugar支持在表格的最后加上合计、均值,Sugar会自动判断报表各列的数据类型,只对数字类型的列做累加或均值计算:

图片

上图我们看到,对「成本」和「利润」列都采取累加的方式来计算合计是没问题的,但是对于「利润率」也采用了累加的方式,这个算出来就有问题了。这种情况下,Sugar支持让用户输入一个计算的表达式来进行自定义的计算:

图片

我们对「利润率」设置了一个计算表达式:{利润} / {成本} * 100,可以看到上图中对「利润率」的合计计算就正确了。Sugar的表达式中支持加减乘除计算,如果想要引用某列,就使用大括号即可:{列名}

表格冻结列

Sugar支持表格列的冻结,在「高级」->「冻结列设置」中设置:

注:

第一列到第几列,如:2 代表固定第一列到第二列的列单元格

从后往前到第几列,如:2 代表固定从最后一列开始往前 2 列单元格

图片

支持从首列向后冻结任意几列,或者从尾列向前冻结任意几列,当内容过多出现滚动时可以将需要固定展示的列进行固定。

图片

Sugar支持默认表头冻结,当上下滚动时,表头会固定在表格顶部,当表格滚动到页面顶部时表头会固定在页面顶部位置。

图片

当表格在大屏中使用时,由于背景色不同,可以设置固定列的背景色适应不同大屏背景颜色,当背景色较深时可以通过打开突出字体颜色突出字体显示。

图片

上一篇组件模板

本页内容