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

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

点击图片查看简报

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

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

1

逻辑说明

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

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

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

2

设置参数条件

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

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

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

说明：

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

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

3

设置筛选条件

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

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

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

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

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

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

3

添加筛选组件

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

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

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

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

说明：

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

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

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

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

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

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

4

不同数据源筛选切换

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

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

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

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

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

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

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

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

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