高级可视化 | Banber图表弹窗联动交互

在利用数据简报/大屏进行图表演示时，操作者有可能要与图表进行交互联动。上一期（Banber图表联动交互）我们讲解了，如何设置下图所示，通过单击左边条形图区域，就可以交互联动右侧图表，查看事业部下属的部门具体销售情况。

这一期，我们用下面这个案例了解下，如何用Banber实现图表弹窗联动交互。

这是一个有2158条数据的销售表，我们现在需要按照地区分类，来查看每个地区城市的销售额，如华东区下上海、南京、南昌等销售额，此外，我们还想要查看，每个城市产品类别的销售额情况，如上海的海鲜、饮料、调味品、日用品分别的销售情况，如下图所示。

这里涉及到2个交互逻辑：导航切换及图表联动。导航切换，在之前的推送中，有单独讲解过（Banber筛选交互功能详解），虽然是以下拉组件为例，但是导航组件实现方式完全相同，这里就不在赘述。于是我们得到一个如下的图表！

下面我们重点来学习下，如何实现图表弹窗联动交互！

1

逻辑说明

首先我们一起来复习下Banber实现图表联动的逻辑。

实现筛选联动，首先要从数据中摘出我们所需要的图表数据，如何摘出所需要的图表数据，就需要设置条件参数，按条件参数筛选数据，而筛选组件用来控制筛选的切换展现，最终生成所需要的图表。

在了解实现逻辑后，就让我们一起来看看实际操作。

2

设置参数条件

进入编辑页面，点击图表-->自定义参数条件-->新建参数。

在弹出框中，分别填写：参数名（用来进行筛选的参数，如地区、姓名、部门等），参数类型（可选择文本、数值、日期），默认值（图表初始要展示的条件，如华南-对应地区、张三-对应姓名、销售1部-对应部门等）。

以销售报表为例，这里我们需要按城市筛选每个产品类别的销售情况，参数名填写“城市”，参数类型选择“文本”，默认值可填可不填。

说明：

【参数类型】必须要与数据表中作为条件的字段类型匹配，如数据表中的地区是文本类型，那么参数类型必须选择参数类型为：文本

【默认值】为图表初始要展示的条件，如果默认值为空，则图表显示的为所有数据，如设置默认值为华南，则图表显示的是华南地区的数据，若默认值为空，则图表显示的是所有地区的数据

3

制作弹窗图表

点击“添加页面”，新添加一个页面，并进行重命名，这里我们设置为“产品类别”。

在新页面的编辑区域，拖拽一个合适的图表，这里以多数据圆环图为例。数据绑定这里不在赘述。

注：请保持所有交互联动图表的数据源一致！

将相关字段拖至分类、数据。这里我们需要按产品类别筛选销售情况，将“类别名称”拖拽到分类（X轴），将“销售额”拖拽到数据，将“城市”拖拽到条件筛选。

点击城市下拉箭头-->筛选条件-->参数条件：T[城市]重庆，绑定参数条件。

4

设置图表联动

回到之前的页面，选中城市图表，点击右侧-->动作-->添加事件。

依次选择单击-->链接跳转(本简报)-->2 产品类别-->弹窗。

点击添加参数，绑定设置的参数。

点击“请选择”下拉按钮，选择“分类轴”。

说明：

设置关键表【动作】中的事件时，添加参数后选择分类轴或系列名，当选择[分类轴]，在点击想要查看商品类型对应的分类轴时，可变动的表数据会随之体现出选择商品类型的具体数值；当选择[系列名]，在点击想要查看商品类型对应的系列名称时，可变动的表数据会随之体现出选择商品类型的具体数值。

5

优化细节

回到“产品类别”页面，我们在圆环图上面，加上一个城市显示标签，将单数字矩形图拖拽到编辑区域。

连接数据后，这里我们需要展示城市名称，将“城市”拖拽到分类（X轴），将“城市”拖拽到条件筛选，并绑定城市参数。

选中单数字矩形图，点击右侧格式，关闭数值及数值单位。

点击左侧形状，可以拖拽一个合适的图标至单数字矩形图左侧，并调整颜色大小。

选中圆环图，点击右侧格式，可开启图例，并对圆环图进行美化调整。

最后点击分享按钮，预览效果。

温馨提示：

在编辑页面是无法查看效果的！