图表下钻

更新时间：2021-07-23

下钻是指在点击本图表的某一部分时，可以打开一个新的图表或超链接，进而查看与图表此部分相关的详细信息。Sugar BI支持无限层级的下钻，只要下钻的弹出展示的图表也是支持下钻的，就可以继续配置进一步的下钻。

在编辑报表时，某些图表的控制面板里可以看到「交互」选项卡中的「下钻」配置项：

图片

每种图表触发下钻的方式不同，例如：折线图的触发方式是点击折线上的某一点，地图是点击某个区域，表格是点击某行或某列。

Sugar BI提供「自由下钻」和「层级下钻」两种下钻方式：

  • 自由下钻是您可以自由的配置下钻图表的任意配置项
  • 层级下钻是在您的数据配置项中使用了具有层级关系的维度时，自动为您生成所有下钻配置

下面首先介绍层级下钻。

层级下钻

层级下钻是指如果图表的维度轴使用了具有层级关系的维度，那么可以通过开启层级下钻，零配置直接生成所有下钻图表的配置项。目前支持的图表如下：

  • 折线图（双 Y 轴折线、区域堆积图、标点折线、线柱混搭、叙事折线图）
  • 柱状图（横向柱图、多系列柱图、堆积柱图、正负柱图、双向对比柱图、渐变色柱图、胶囊柱图、叙事柱图、3D 柱状图、山峰柱状图、象形柱状图、圆形柱状图）
  • 饼图（环形饼图、玫瑰饼图、轮播饼图、圆角饼图、圆角环图、嵌套饼图）
  • 地图类（区域色彩地图、3D 区域色彩地图）只有中国和省份级别地图支持
  • 表格类（普通表格、轮播表格，排行榜）
  • 瀑布图

其中，表格类与其他图表的配置稍有不同。

设置层级字段

层级下钻是根据层级字段生成配置的，层级字段是指具有层级关系的一组字段，如国家（中国）、地区（西北、东北）、城市（西安），所以首先我们要了解一下如何设置层级字段。

我们以国家、地区、城市这三个维度为例，讲解如何创建层级字段。

首先在空间中点击左侧「数据管理」中的「数据模型」，在右侧的页面中找到您想要编辑的数据模型，点击「编辑」按钮，进入到数据模型编辑页面，操作如下图所示：

图片

接着，在编辑页面中，在您想要设置成层级关系的维度上右击，弹出菜单，选择「新建层级」

图片

然后在弹出的对话框中填写层级关系维度的名称。

图片

再将地区和城市维度拖入地理区域层级中，或是右击，在弹出菜单中选择加入层级。

图片

需要注意的是，地理区域层级下的三个维度的顺序，表示了他们之间的层级关系，如下图所示，表示的是国家->地区->城市三层层级关系。

图片

下面首先讲解非表格类图表的层级下钻。

柱状图、折线图、饼图、区域色彩地图的层级下钻设置

以柱状图为例，数据控制面板中，「X 轴/类别轴」使用了地理区域层级中的「国家」维度，就可以在下钻控制面板中选择「国家」层级维度，除了表格外，其余图表只支持维度轴设置单一层级关系维度时，开启层级下钻，柱状图的「数据」具体配置如下图所示：

图片

「下钻」面板配置如下图所示，选择在 X 轴中使用的层级维度「国家」。

图片

配置完成后，就会自动生成地理区域层级中，国家下面的地区、城市两层的下钻配置。点击中国的柱子，就会弹出中国下面各地区的下钻图表「柱状图-中国」，效果如下图所示：

图片

点击西北的柱子，就会弹出西北地区下面 城市级别的下钻图表「柱状图-中国-西北」，如下图所示：

图片

层级下钻的下钻图表还支持自身样式的配置：

图片

表格类图表

表格类图表的层级下钻与其他图表的区别在于可以配置多个具有层级维度的列，如下图所示：

图片

同时配置了类别和区域维度列，需要在层级下钻的配置汇总选择你要下钻的是哪一列，选中的列会出现相应的下钻样式：

图片

配置完成后，点击类别列，会弹出类别列下面的所有子类别信息列表，效果如下图所示：

图片

自由下钻

自由下钻总体来说，可以下钻的图表分为两大类：

  • 单一种类下钻：这种类型的图表只能触发一种类型的下钻。比如饼图，点击饼图和每个区域下钻弹出一个柱状图，并且根据点击区域的不同让柱状图中的数据而不同，触发下钻时，饼图传递给下钻柱状图的下钻参数会自动根据您点击位置的不同而不同。这类图表的下钻配置只需要选择触发的下钻图表类型即可：

    图片

  • 多种类下钻：这种类型的图表可以触发多个下钻操作。比如表格，可以设置点击每行触发下钻，点击某行中的某一列触发下钻，这样对表格就设置了两个下钻，当用户点击表格的不同区域时触发不同的下钻行为。

    图片

无论是单一种类的下钻，还是多种类下钻（只是可以触发多个下钻行为而已），在他们下钻弹出的图表中需要进行的配置都是类似的。 下面就对一个柱状图下钻弹出饼图中的配置做详细介绍：

柱状图的下钻示例

如下面的柱图展示了各个地区的销售价格汇总值，开启了下钻，并且配置下钻展现一个饼图，如下图点击柱图中的某一根柱体（如：华东）

图片

在弹出的饼图中，自动使用了和柱状图同一个数据模型，并且可以看到已经自动设置了「下钻参数关联配置」部分（默认只添加了一个关联设置，您可以根据实际情况进行增加和删减）：

图片

您可以点击上图中的「下钻参数关联配置」部分，看到详细的下钻参数配置：

图片

  • 下钻参数所属图表层级

    因为Sugar BI中支持无限层级的下钻，例如一个第四层的下钻图表，它可以绑定它前面的 3 层级下钻参数。这里默认的是该图表的上一级图表

  • 下钻参数字段

    列出了所选那一层图表的所有可使用的下钻，您可以选择，一般也会默认选中一个，您可以根据情况进行修改

  • 数据模型字段

    选择该下钻图表的数据模型中使用哪个字段来和上面选中的下钻参数进行关联，一般也会默认选中，您可根据情况进行修改

  • 关联方式

    数据模型字段和下钻参数的关联方式，有等于、大于、模糊匹配等等方式

最后，给饼图绑定「省份」维度和「价格」度量，并刷新图表，即可看到饼图展示了「华东」地区的各个省份的「价格」汇总的占比：

图片

为了验证数据的正确性，您可以点击上图中饼图控制面板中的「调试」按钮，即可以看到执行的 SQL 语句中 where 部分：

图片

最后您可以关闭下钻图表，点击柱图的其它柱体，可以看到下钻弹出的饼图都会正确的展示相应「地区」下所有省份的饼图分布数据。

如果您想详细了解「下钻参数」部分，可以查看本文档后面的「下钻的参数」章节。

下钻图表展示方式

下钻图表展示方式有三种：弹框展示、弹框全屏展示、原图表区域展示。

图片

每个下钻编辑的 控制面板-基础-展示方式 也可再单独修改，自由下钻和层级下钻都可使用，下钻图表类型为打开新页面时不生效。

原图表区域展示效果如下：

图片

左侧为自由下钻，右侧为层级下钻，点击底部导航上的名称可以跳转到对应的层级，点击【返回】则回到原图表。

建议在默认展示方式中选择【原图表区域展示】后，在下钻编辑中不要再修改展示方式，不建议与其他两种方式混用。

下钻打开新页面

图表在触发下钻行为时，也可以打开新的页面。如下的柱图，我们需要开启自由下钻，并且选择下钻打开的图表类型为「下钻打开新页面」：

图片

然后使用「手动输入」方式并输入打开的新页面地址 URL 为百度的首页，最后点击柱图的任意柱体都可打开百度的首页。

图片

当然很多情况下，我们点击柱图不同的柱体，打开的新页面地址 URL 中期望能够附加上和下钻行为相关的一些参数。下面介绍Sugar BI中支持的一些嵌入参数的方式：

URL 中嵌入下钻参数

图片

如果您的 URL 中已有以 ? 分割的参数，如 https://www.baidu.com?query=aaa, 那么使用 & 继续添加下钻等参数：https://www.baidu.com?query=aaa&wd={drillDowns}

URL 中嵌入联动参数的语法是：

  • {drillDowns}
  • {drillDowns.key}
  • {drillDowns(0).key}
  • {drillDowns(first).key}

大部分情况下使用{drillDowns}即可。其中0和first是下钻的层级，多层下钻时可以拿到每层下钻的参数，如果不写则默认取上一级。key是每层下钻参数 item 中某字段名称。这块的语法类似SQL 中硬嵌入下钻参数。

如上图在 URL 中嵌入下钻参数，点击「华为」柱体，即可打开百度中搜索华为的页面：

图片

URL 中嵌入过滤条件

URL 中也支持嵌入当前页面过滤条件的取值，如下，这样点击柱体打开新页面的时，URL 中的riqi参数将会被赋值为2020-03-05:

图片

图表名称中嵌入过滤条件的语法是：{conditions.key}，其中key是指过滤条件的「查询 key 值」。

URL 中附加所有过滤条件参数

和上面的手动的在 URL 中嵌入过滤条件不同，我们还可以让您一键将页面上的多个过滤条件的取值都传递到新打开的页面中。这个功能常用于页面 A 下钻跳转到Sugar BI的页面 B，并且将页面 A 的过滤条件取值都同步带到页面 B 中。如下图页面 A 中有两个过滤条件，并且如下设置了柱图的下钻：

图片

在打开的新页面 B 中如下图，两个过滤条件的取值被带过来了。注意：要实现过滤条件能够被正确带过来，需要保证页面 A 和页面 B 的两个过滤条件的「查询 key 值」是完全相同，这一点非常重要。

图片

新页面链接通过 PostMessage 发送至父页面

如果Sugar BI的页面是通过iframe嵌入其他系统页面的，并希望通过其他系统来控制下钻新页面的打开方式，Sugar BI还支持通过PostMessage方式将下钻链接发送至父页面，打开这个开关：

图片

这个开关打开后，触发下钻的时候就会有类似这样的数据发送到父页面中：

图片

在父页面中，可以通过监听 message 事件来接收 url：

window.addEventListener('message', handleMessage);

function handleMessage(event) {
  console.log(event.data.sugar_url);
}

接收 PostMessage 页面的 Host 参数可以不填，这样会默认发给任何父级页面，如果需要指定接收的页面，可以添加页面的url，url需要包括协议+host+端口号。

下钻的参数

以下内容为进阶技巧，帮助您了解Sugar BI中下钻的更多原理，您可选择性浏览。

当图表的下钻被触发时，打开的下钻图表会收到与上层图表点击区域相关的下钻参数，下钻图表就可以利用这个信息来动态拉取数据。

下钻参数不需要用户进行配置，每种图表触发下钻时传递给下层图表的参数格式是固定的，大体格式如下：

[
    {
        "item": {
            "name": "老用户",
            "value": 11472,
            "category": "2018-09-01",
            "_sugar_dd_default_": "2018-09-01"
        },
        "fireKey": ""
    },
    {
        "item": {
            "subsys": "北京总部",
            "module": "市场部",
            "business": "第一小分队",
            "name": "李四",
            "value": 7673456.78,
            "value_level": "green",
            "url": "http://www.baidu.com",
            "_sugar_dd_default_": "李四"
        },
        "fireKey": "name"
    }
]
  • 总体来说下钻参数是一个数组，当有多层下钻时，数组里包含每一层图表传递给下层的参数，这些参数在下钻图表中都是可以使用的

  • 下钻参数的每一项由item和fireKey组成

    • item是一个对象，里面有下钻相关的具体信息，比如触发下钻的表格某行的数据。
    • fireKey是一个字符串，在某种图表可以触发多种下钻的情况下用来区分触发的是哪一种下钻，一般用不到

每种图表在下钻时，传递给下钻的下层图表的参数都是不同的，您需要在下钻图表的数据中进行调试，即可看到类似上面的下钻参数。

下钻+联动

如果点击某一条数据展示下钻图表，同时又要用该数据触发其他图表的联动，就需要先后开启联动和下钻，自由下钻或层级下钻都可以配合联动。

注意：「自由下钻」或「层级下钻」只支持原图表的「下钻+联动」。下钻后的图表不支持「下钻+联动」，即使开启了「下钻+联动」也不会生效。

第一步配置联动

图片

第二步配置下钻，下钻图表展示方式为「原图表区域展示」

图片

图片

第三步在预览页查看效果，点击图形触发「下钻+联动」后，点击左下角的「返回」即可返回原图表并且取消下级联动。

图片

SQL 建模和 API 方式中使用下钻参数

如果下钻图表是使用 API 方式拉取数据的，那么下钻参数会自动放在 API 请求的 body 中发送到用户的 API 后端，用户在 API 中利用这些参数拉取数据即可，详见「图表 API 请求中的下钻参数」

如果下钻图表是使用 SQL 建模方式拉取数据的，那么可以将下钻参数嵌入到下钻图表绑定的 SQL 模型的 SQL 语句中，具体的语法请参照「SQL 语句中嵌入下钻参数」

上一篇数据筛选

本页内容

    Sugar BI 文档
    空间广场首页