大家好,由于之前猴子连续写了两篇四五千字的文章,搞得我有点虚脱了。今天咱们聊一些简单功能的实现把(我也偷个懒),也就是实现仪表板上的工作表的显示和隐藏功能。
1.设计思路
在我日常项目中实现该需求一共有两种操作,在之前做的项目中,两种操作都有使用。
1.直接用Tableau自带的功能添加显示/隐藏按钮(这是2019版本新增的功能,低于2019版本的请使用第二种方式)
2.通过参数和筛选器公式进行连动,从而实现工作表显示和隐藏的效果。
两种操作都有各自不同的使用场景。话不多说,我们直接来进行实际操作把
2.Tableau Desktop自带的显示/隐藏按钮
2.1 示例准备工作
首先第一步,随手做个板子把,我是直接用上个视频做的示例板子拿来修改一番直接使用。如图,这个仪表板上目前只有这一个表格。
接下来,我们随手做一个树状图,然后实现表格和树状图点击按钮进行切换功能。这里我直接将之前的工作表复制(拷贝),然后点击智能提示里面的树状图。
现在要实现我们的需求,就是实现图表切换功能,也就是通过其自带的显示/隐藏按钮功能进行了。
我们拖动一个浮动的容器在仪表板上,悬浮在工作表的上方。
点击浮动布局,然后拉一个垂直容器将表格覆盖,如图
然后将这个垂直容器的背景色设置为跟要覆盖部分的背景色一致(偷懒选了个白色)
首先点击垂直容器,然后点击上方布局,再点击背景选择颜色
然后按住shift健将刚才做好的图拖进容器中,如图
2.2 功能实现
接下来开始实现我们的功能,也就是图表切换功能
我们重新点击布局,然后点击刚才拖到上面的垂直容器,右键点击该垂直容器,选择添加显示/隐藏按钮,就会有个X号的浮动按钮默认出现在仪表板上,如图
好的,我们粗略的实现了这个功能。但是在Tableau Desktop中如何展示实现的效果呢,我们按住ALT健,同时鼠标左键单击该X号按钮,就会将该垂直容器隐藏起来。
显示隐藏按钮变成了三条横线,如图。
该功能的基础使用讲完了,那么肯定有人说,你直接在报表上右键点击就可以召唤出显示/隐藏按钮,何必非要加个容器呢。而且默认的按钮样式难看的一批,需要改一下。
2.3 按钮样式细节调整
我们先来改按钮样式把,点击显示/隐藏按钮,然后右键点击编辑按钮(点击如图的三角也可以)然后对按钮的样式进行编辑(由于本地电脑没有按钮图片,所以直接在标题上输入文本)。
我直接把背景的颜色修改为白色(示例仪表板背景色),默认是黑色,然后标题输入显示表,字体颜色个人设为超链接的蓝色,再煞有介事的加个下划线,然后点击应用按钮,就实现了显示的项目的样式设计。如图
然后再点击隐藏的项目,输入显示图,调整和上面一样的样式后点击确定,按钮的个人需求的细节就调整好了。
实际效果如图所示,按住ALT加左键点击文字就可以随时切换图表的显示了。
当然,按钮的样式也可以选择图像,插入美工做好的图片(图像是无法写文字的,需要美工在按钮图片上写好字),准备两个按钮图片在显示和隐藏中分布选择,这个就不演示了,大家可以自己在测试的工作簿中进行该操作。
至于传到服务器上面是否需要按住ALT加左键点击文字,这个无需担心。工作簿传到Tableau Server上的话,直接鼠标左键单击即可切换。
2.4 细节说明
至于为什么我个人习惯对容器进行显示隐藏而不是对按钮进行显示隐藏呢,主要是容器里面不光能够放图表,还可以放其他东西,比如文字,筛选器,参数等等。这个按钮能够控制显示隐藏的元素更多一些。
我们把文字和筛选器也拉到刚刚的浮动的垂直布局中,如图所示
再按住ALT健同时鼠标左键点击显示/隐藏图表,从而实现了这个功能,连容器以及里面的其他元素一起隐藏显示。
之前我参加的一场面试,面试官问如何将筛选器和参数在仪表板上能够隐藏和显示,我直接回答拉个容器把筛选器和参数放进去,然后将该容器召唤出显示隐藏按钮,这样就可以实现你说的效果了。
面试官回复我,说这个问题是他面试好几个人里面,我是唯一一个回答上来的(笑哭)
3.参数控制显示隐藏
跟上一个功能相比较,该功能基本上是各个版本的Tableau Desktop都可以使用的,使用的版本范围更广一些,并不只限定于2019版本之后。
但和显示隐藏按钮能够直接对整个容器来进行显示/隐藏的操作不同的是,该功能只能对对应的工作表进行操作。
3.1 示例准备工作
我们来对刚才的例子仪表板做一下修改,用垂直容器放在刚才表所在的位置,然后里面拖入一个水平容器,再将做好的图和表放在水平容器中,如图
3.2 显示隐藏参数和筛选器公式准备
接下来进入工作表,开始编写公式,首先创建一个参数,我个人建的参数如图所示,输入参数名称,选择数据类型,然后允许值选择列表,再列表里面输入值后点击确定,就建好了显示隐藏的参数。
接下来我们创建筛选器公式,直接将刚才的参数拖进去即可,如图
3.3 筛选器拖入栏位操作
在表的工作表中,先将参数显示出来(给大家演示用),再将刚才做好的图表切换筛选器拖入表的筛选器栏位中,然后选择自定义值,输入表字,点击旁边的加号后,再点击确定。如图,筛选器配置完成
当我们选择图的时候,这个报表不再显示,说明表的筛选器配置成功。如图
接下来我们进入图的工作表中,再按照上面表的步骤进行配置,只不过这次输入图字。
好了,我们的两个工作表的显示隐藏参数和筛选器已经设置完毕。
返回仪表板我们来看我们做好的内容
3.4 仪表板初步调整
下图就是切换到仪表板的样子。如图,这边把参数显示在仪表板上面了。我们看这张仪表板上面还有两个仪表板的标题显示在上面比较违和。
我们把这两张表的标题全都隐藏起来把,我们在上图红色框的标题位置点击鼠标右键,然后选择隐藏标题即可。操作完毕如图所示,图表切换参数点击表的时候就只显示表。
接下来我们将图表切换选择图,工作表上只显示图了,如图所示。但是我做的这个工作表显示的大小有些过于小,这个需要调整一下
我们左键单击这个图,然后看到上方默认选择的是标准,选择整个视图后,即可解决这个问题
接下来来验证我们是否做成了该功能,截图如下
OK,该功能已经初步完成了。
但里面还有些细节需要处理下。
3.5 仪表板细节调整
3.5.1.遇到某个表隐藏的时候占了很大空间了
我们看仪表板,工作表2占了很大的一块空间,我们想要表变得严丝合缝,让工作表2在隐藏的时候一点空间也不占。
我们点进去工作表2,将图表参数拖到如图所示的位置(列和行皆可)
我们重新返回仪表板,把工作表1设置位适合宽度后,发现工作表2不会占有大空间了,报表会变得严丝合缝了,如图
我们切换到图,上面会多了一些字,如图所示
右键点击上方的图表切换(参数名称)字,然后选择隐藏列字段,再右键点击图(选项名称)这个字,点掉显示标题,就可以将上面的文字隐藏了。效果如下
好了,第一个问题解决了,遇到占空间的一律这样解决(拖参数到工作表列或者行)即可。至于报表样式调整这里就不讲了。
3.5.2.需要放个标题上去
标题的话有两种操作方式,第一种是直接将参数嵌入文本对象之中。
直接拖入文本对象到标题位置,点击图中插入下拉框,选择参数.图表切换,然后点击确定即可实现效果。
但该方式比较局限,只能将标题里面参数的名称相关的内容进行修改。
效果如下
第二种则是新建个标题工作表,然后在工作表里面新建个标题切换的公式,随着参数选项改变而改变公式的标题名称。该方式相比第一种适用性更好,也能够满足图表的复杂命名需要。
示例如下
拖到仪表板上效果如下
至于有人说还有第三种,那就是跟上面一样,多做几个工作表,也随着点击参数切换而切换,我觉得这个做起来比第二种麻烦,效果也跟第二种一样,这就没啥必要说了。
4.其他
至于图表切换的话,实际项目中三表到五表切换也做过,实现的效果跟两个表切换是一样的,只不过参数要写更多的选项。
这边的话同样是列举了我的日常工作中所用到的场景。
有什么问题也可以评论区内和大家进行沟通交流,谢谢大家的观看。