图表联动

更新时间：2025-08-22

图表联动是指在点击本图表的某一部分时，旁边的图表数据联动刷新，例如一个饼图展示了各个「地区」销售利润，点击饼图中的每一个地区，旁边的柱状图联动展示该地区下所有「省份」的销售利润。

在编辑报表时，某些图表的控制面板里可以看到「联动」选项卡，如下饼图的联动：

联动的触发

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

总体来说，可以触发联动的图表分为两大类：

单一种类联动：这种类型的图表只能触发一种类型的联动。比如饼图，点击每个扇区会触发同一批下级图表的联动，只不过根据点击扇区的不同，触发时传递给下级图表的联动参数有所不同。这类图表的联动配置只需要选择需要触发哪些下级图表的联动即可：

多种类联动：这种类型的图表可以触发多种类型的联动。比如表格，可以设置点击某行触发一批下级图表联动，点击某行中的某一列触发另一批下级图表联动。此时表格需要填写具体是那一列要触发联动：

联动的取消

某个图表可以触发联动时，将鼠标浮动在这个图表上，在图表的右上角会有一个红色的图标提示（报表中才有效果，大屏中不显示这个标示）。

如果用户点击了某个数据项触发了联动，相应的数据项会高亮，如下图中点击了PC区域。

此时如果点击图表右上角的「取消下级联动」按钮（报表中才有效果，大屏中不显示这个标示），或再次点击高亮的数据项PC部分都可以使本图表和下级图表恢复初始状态，这相当于取消联动操作。

饼图的联动示例

我们继续使用本文开头说到的饼图联动一个柱状图的示例。如下图，我们分别配置了饼图和柱状图的各自的数据模型绑定：

然后，我们开启饼图的「联动」设置，并且鼠标点击饼图中的「华东」部分，注意：开启图表的联动之后，一定需要点击图表的某区块来触发联动，才能进行后续的联动关联配置

如上图中，Sugar BI 自动添加了一个「联动参数关联配置」，我们点击这个联动参数关联配置，即可看到如下的弹框：

联动参数字段

列出了饼图传递给柱状图的所有可使用的联动参数，您可以选择，一般也会默认选中一个，您可以根据情况进行修改
数据模型字段

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

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

首次进入页面或是没有触发联动时的默认联动参数。可以把当前触发联动的联动参数作为默认联动参数，也可以在这里清除当前设置的值。

最后我们刷新柱状图的数据，即可看到柱状图已经正确的显示了「华东」地区下所有「省份」的利润数据，并且，如果我们点击饼图中的其它地区，如「华南」，柱图也会联动展示「华南」地区的各「省份」利润数据，如下：

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

轮播同步图表联动

很多图表都可以设置轮播，如色彩地图、柱图、折线图、饼图都支持提示信息的轮播，表格支持行信息的轮播。在设置了图表联动、轮播的同时设置「轮播同步图表联动」，可以在轮播时自动触发联动。例如对上面的饼图设置了轮播并开启「轮播同步图表联动」（如下图中右下角部分），即可实现如下效果：

在大屏中，轮播同步图表联动的功能会非常有用，不需要手动的交互，大屏中的图表即可实现自动的数据轮流更改，类似上面的配置方式，我们也可以实现一个地图轮播联动一个表格的效果：

表格也可设置轮播联动效果，设置表格轮播联动后，表格行信息可逐行轮播，设置前端分页时，还可自动翻页，并可与其他图表同步联动。

联动的参数

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

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

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

Plain Text

1"dependence": {
2    "item": {
3        "subsys": "北京总部",
4        "module": "市场部",
5        "business": "第一小分队",
6        "name": "张三",
7        "value": 6672389,
8        "_sugar_dd_default_": "张三"
9    },
10    "fireKey": "name"
11}

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

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

设置默认联动参数

如果想要在初次进入页面，或是没有触发联动的时候，被联动的图表也可以有默认联动参数。默认联动参数可以在联动参数关联配置中设置。

首先在图表上点击想要设置的联动默认值，比如中南地区，然后在图表的联动参数关联配置中点击使用当前联动参数作为联动默认参数按钮，可以将当前联动参数设置为联动默认参数。

设置默认联动参数后会在按钮下面的编辑框中显示出来，您也可以直接在这个编辑框中直接进行修改。点击清除联动默认参数可以清除当前设置的默认联动参数。

SQL 建模和 API 方式中使用联动参数

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

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

数据自动补全

单个图表的过滤条件

百度数据可视化 SUGAR