高级可视化 | Banber筛选交互功能详解

2021-03-15 15:40:45 浏览数 (1)

一份数据源,往往需要满足各种不同的角色在不同情况下的需求,因而在数据内容上,一般采取宁多勿少的原则,提供尽可能详细的数据,由此就造成了表格指标过多。

点击图片查看简报

在数据可视化报告制作时,需要我们利用筛选交互功能,帮助读者根据自身需求减少数据量,通过筛选切换快速得到目标数据,同时还可以极大地优化报告的篇幅,不至于篇幅过长降低可读性。

在很多人看来,用Excel实现筛选交互效果,就已经让人头大了,更不用说再加个数据可视化。当然了,用代码实现上述效果的确不是一般人可以挑战的,但借助Banber数据可视化云平台(点击进入Banber),就能轻松做出一份高级的筛选交互报告。

1

逻辑说明

在着手制作前,首先我们需要了解Banber实现筛选交互的逻辑。

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

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

2

设置参数条件

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

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

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

说明:

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

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

3

设置筛选条件

拖拽一个所需的图表到编辑区域,选中图表,点击编辑数据

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

相关字段拖至分类数据。以销售报表为例,这里我们需要按部门筛选每个销售部门每个月的销售情况,将“部门”拖拽到分类(X轴),将每个月份拖拽到“数据”。因为未做筛选,可以看到,图表预览区域将所有部门每个月的销售情况堆叠在了一起。

将“部门”拖拽到条件筛选,点击下拉箭头-->编辑条件

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

此时,图表预览区域就不再是所有部门每个月的销售情况,而是默认值销售1部的每个月的销售情况。

3

添加筛选组件

Banber提供包括日期、日期范围、下拉、横/纵向切换、横/纵向导航、搜索、书签搜索等丰富的组件,可根据需求,选择相应的组件绑定参数。

虽然选择的组件不同,但绑定方式都是通用的。以下拉组件为例,将下拉组件拖拽到编辑区域(刚才添加的图表上方),选中组件,点击编辑数据

选择数据表-->选择导入的数据表。

将所需字段拖至字段,这里,我们将部门字段拖拽到“显示名称”、“返回值”、及“条件筛选”

说明:

【显示名称】为下拉选择时显示的条件名称

【返回值】为下拉选择的条件对应的值,此值必须与数据表中字段值一致

点击条件筛选里部门的下拉箭头,在选择条件中,勾选需要的数据。

绑定参数处,点击下拉箭头,选择之前设置的筛选条件,进行绑定。

至此,一份筛选交互可视化表格就完成,我们预览查看效果。

上述表格数据源来自同一表格的筛选,如果切换的数据源来自于不同的数据表,或想要设置不同的表格样式切换,又需要如何实现呢?此时,可以结合对象组件中的“网页”来实现。逻辑方式与上述相同,在此不再赘述。

4

不同数据源筛选切换

首先需要在目录中添加页面,将图表拖拽到新的页面进行编辑。也可以新建另外的简报,进行图表编辑。需要有几个内容的切换,就新建几个页面/简报。

在新建的页面/简报中,拖拽需要的图表,并设置好。随后点击右侧,页面-->嵌入页面-->复制链接,复制这个页面的链接。

参数条件弹出框中,分别填写:参数名(此处可随意填写),参数类型选择文本,默认值(将刚复制的链接粘贴到此处)。

拖拽对象组件“网页”到另一空白的页面/简报,选中“网页”对象组件,点击编辑数据。

在弹出框中,无须填写“路径”,点击参数中的“ ”,在下拉列表中选择之前设置的参数条件,点击“确认”。

此时,“网页”对象组件就会显示所“复制链接”的页面内容。

现在就需要添加筛选组件了,以筛选组件“横向导航”为例,选中“横向导航”筛选组件,点击编辑数据

在弹出框中,分别填写:名称(需要几个切换类目,填写几个名称),返回值(在嵌入页面复制的链接)。点击“绑定参数”处下拉按钮,选择之前设置的参数条件,点击“确认”,进行参数绑定。

至此,一份不同数据表格,不同图表样式的筛选交互可视化表格就完成,我们预览查看效果。

0 人点赞