1
逻辑说明
在着手制作前,首先我们需要了解Banber实现图表联动的逻辑。
实现筛选联动,首先要从数据中摘出我们所需要的图表数据,如何摘出所需要的图表数据,就需要设置条件参数,按条件参数筛选数据,而筛选组件用来控制筛选的切换展现,最终生成所需要的图表。
在了解实现逻辑后,就让我们一起来看看实际操作。
2
设置参数条件
进入编辑页面,点击图表-->自定义参数条件-->新建参数。
在弹出框中,分别填写:参数名(用来进行筛选的参数,如地区、姓名、部门等),参数类型(可选择文本、数值、日期),默认值(图表初始要展示的条件,如华南-对应地区、张三-对应姓名、销售1部-对应部门等)。
以销售报表为例,这里我们需要按区域筛选每个销售部门每个月的销售情况,参数名填写“事业部”,参数类型选择“文本”,默认值填写“PC”。
说明:
【参数类型】必须要与数据表中作为条件的字段类型匹配,如数据表中的地区是文本类型,那么参数类型必须选择参数类型为:文本
【默认值】为图表初始要展示的条件,如果默认值为空,则图表显示的为所有数据,如设置默认值为华南,则图表显示的是华南地区的数据,若默认值为空,则图表显示的是所有地区的数据
3
设置图表数据
我们先设置事业部图表,拖拽一个条形图到编辑区域,选中图表,点击编辑数据。
依次选择,来自数据表-->添加数据表-->新建数据表-->上传Excel文件/连接数据库。
将相关字段拖至分类、数据。这里我们需要按事业部筛选销售情况,将“事业部”拖拽到分类(X轴),将“总销售额”拖拽到数据,用总销售额做一个升序排序。
随后设置部门图表,拖拽另一个条形图到编辑区域,编辑数据,方法参照上面的步骤。
将相关字段拖至分类、数据。这里我们需要按事业部筛选下属销售部门的销售情况,将“部门”拖拽到分类(X轴),将“总销售额”拖拽到数据,用总销售额做一个升序排序。
将“事业部”拖拽到条件筛选,点击下拉箭头-->自定义条件-->添加条件。
在弹出框中,点击下拉箭头,选择之前设置的筛选条件绑定。
4
设置图表联动
选中事业部图表,点击右侧-->动作-->添加事件。
依次选择单击-->链接跳转(本简报)-->当前标签页。
点击添加参数,绑定设置的参数。
点击“请选择”下拉按钮,选择“分类轴”。
说明:
设置关键表【动作】中的事件时,添加参数后选择分类轴或系列名,当选择[分类轴],在点击想要查看商品类型对应的分类轴时,可变动的表数据会随之体现出选择商品类型的具体数值;当选择[系列名],在点击想要查看商品类型对应的系列名称时,可变动的表数据会随之体现出选择商品类型的具体数值。
5
优化细节
选中图表,可点击右侧样式,一键优化图表样式。
也可点击右侧格式,手动美化图表格式。
为了让两个图表的联动性看上去更强,可点击左侧形状,添加一个合适的箭头在两个图表之间,同时添加文字说明。
最后点击分享按钮,预览效果。
温馨提示:
在编辑页面是无法查看效果的!