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

2021-05-27 15:36:13 浏览数 (1)

在利用数据简报/大屏进行图表演示时,操作者有可能要与图表进行交互联动,如下图所示,通过单击左边条形图区域,就可以交互联动右侧图表,查看事业部下属的部门具体销售情况,无须代码,只需要在Banber数据可视化云平台拖拽操作,就可以轻松实现下面的交互联动效果。

1

逻辑说明

在着手制作前,首先我们需要了解Banber实现图表联动的逻辑。

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

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

2

设置参数条件

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

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

以销售报表为例,这里我们需要按区域筛选每个销售部门每个月的销售情况,参数名填写“事业部”,参数类型选择“文本”,默认值填写“PC”。

说明:

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

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

3

设置图表数据

我们先设置事业部图表,拖拽一个条形图到编辑区域,选中图表,点击编辑数据

依次选择,来自数据表-->添加数据表-->新建数据表-->上传Excel文件/连接数据库

相关字段拖至分类数据。这里我们需要按事业部筛选销售情况,将“事业部”拖拽到分类(X轴),将“总销售额”拖拽到数据,用总销售额做一个升序排序。

随后设置部门图表,拖拽另一个条形图到编辑区域,编辑数据,方法参照上面的步骤。

相关字段拖至分类数据。这里我们需要按事业部筛选下属销售部门的销售情况,将“部门”拖拽到分类(X轴),将“总销售额”拖拽到数据,用总销售额做一个升序排序。

将“事业部”拖拽到条件筛选,点击下拉箭头-->自定义条件-->添加条件

在弹出框中,点击下拉箭头,选择之前设置的筛选条件绑定。

4

设置图表联动

选中事业部图表,点击右侧-->动作-->添加事件

依次选择单击-->链接跳转(本简报)-->当前标签页

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

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

说明:

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

5

优化细节

选中图表,可点击右侧样式,一键优化图表样式。

也可点击右侧格式,手动美化图表格式。

为了让两个图表的联动性看上去更强,可点击左侧形状,添加一个合适的箭头在两个图表之间,同时添加文字说明。

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

温馨提示:

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

0 人点赞