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

2021-07-06 11:57:44 浏览数 (1)

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

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

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

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

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

1

逻辑说明

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

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

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

2

设置参数条件

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

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

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

说明:

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

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

3

制作弹窗图表

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

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

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

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

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

4

设置图表联动

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

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

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

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

说明:

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

5

优化细节

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

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

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

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

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

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

温馨提示:

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

0 人点赞