Dashboard内Container的组装顺序

无论我们建造多复杂的东西, 都是先创建好每个小的模块, 然后最后组装. 而我们的Dashboard也是最后组装的. 每个container就像是拼图中的一块. 而每一块拼图又可以被拆解成许多更小的拼图. 但是和拼拼图不一样的是, 我们是大概知道每个小块的位置的.

正确的组装顺序可能跟你想象的正好相反. 你可能想的是从小到大循序渐进, 但是正确的方式往往恰恰相反, 是从大到小, 先整体后局部.

为什么是从大到小?

在前边一课我讲到过, 平铺是王道, 浮动是捷径. 我们所有小规模的组装过程其实都使用Floating Container完成的. 而想象一下, 如果我们在Dashboard上创建了多达10多个Floating Containter, 然后再把他们一一平铺到我们的Dashbaord上的时候, 是不是非常容易出错. 而从大到小是指, 我们首先创建用平铺创建一个大的框架. 每当我们拼好一个小块, 我们就把它放入对应的位置. 这样我们已经拼好的部分就不用移动了. 光是我这么讲你体会的还不够深刻. 那么我用下面的截图让你感受一下, 当Floating Container太多时候是什么样的.

组装Dashboard的正确顺序

第一步: 构思布局

在这一步, 你不需要想的特别细, 只需要大概确定整个Dashboard中各个大的模块的位置即可. 你的标题放在哪, 你的各种Filter啊 Parameter放在哪, 图表放在哪.

我用左侧的这个dashboard来演示它的整体布局是怎么样的.

我们首先确定了整个Dashboard的阅读方向是从左到右, 整个Filters被装在一个大的Vertical Container当中, 然后右侧又有一个Vertical Container.

右侧的这个大的Vertical Container 从上到下分成三段. 第一段是YEAR TO DATE INCOME STATEMENT 整个报告的标题.

而下边的两段都是KPI. 但是这两个KPI 部分与标题不同的是, 这两个KPI的大小是完全一样的.

根据上一课我们知道, 这是使用了Distribute Contents Evenly. 所以这两个KPI外边还有一个大的Container.

第二步创建框架

创建骨架时就涉及到一个技巧, 使用Text Object作为Place Holder. 换句话说, 我们先不使用真正的图表来填充我们的Container, 而是使用Text Object先占住这个位置.

原因: 在Tableau当中, 往一个大的Container当中添加小的Container的时候, 在中间添加是最方便的. 我们的思路就是先在我们准备放Container的左右先放点什么占住那个位置, 真实的内容添加进去之后, 再把左右的这些Text Object删掉.

接下来通过下面的动图来看看我是如何创建框架的.

首先在一个Floating Container的内部加上两个Text Object 把位置占上.

下一步创建KPI 区域的那个大的Container, 把它加到这两个Text object的中间.

再接下来把KPI的Text Object删掉. 我们新添加的Container就自然移动到了右侧.

到了这一步, 其实我们就完成了下边的这样一个框架.

第三步添加小Container

到了第三步, 我们就需要添加图表了. 但是这里你可能有个问题, 我们为什么不先创建Filter那一侧呢?

当我们往Dashboard上添加Worksheet时, 这个Worksheet当前的Filter会自动添加到Dashboard中. 其次Filter必须在Worksheet添加完之后才能显示出来.在那之前, 你是没有办法在Dashboard找到一个地方单独添加Filter的

框架做好之后我们就来到了整个过程当中, 最需要细腻操作的地方了. 我们整个灰色的区域对应的是两个大容器, 每个大容器里是五个小容器.

.

我现在要做的就是先组装五个小容器

这五个小容器当中, 每个要包含两个图表, 因此我们需要五个vertical container 垂直容器. 请在下边这个动图里观察我是如何操作的.

首先我们添加一个Floating Container. 然后一个非常重要的步骤就是给这个空的Container上色, 在添加了Background颜色之后, 你可以非常清晰的看见每个小Container的位置.

Background非常重要, 不要觉得你能每次精准的找到Container的位置. 前脚添加完, 后脚你就不知道他们去哪了, 每个container都是透明的.

接下来, 使用CTRL+C 加上CTRL+V复制四个. 这样你就不用每个都来一遍了. 这五个Container, 就是我们用来装Gross Sales, Discounts, Net Sales, Cost of Goods Sold, Gross Profit这五个KPI的家了.

添加Worksheet

首先记住, 一定要按住SHIFT, 我再强调一下一定要按住SHIFT. 从Sheets下边, 把我们创建好的Worksheet一点点移动到第一个小Container里.

添加完之后你就会发现, 这个worksheet里Filter和Color Legend也一起加了进来. 这个时候不要害怕, 选中这些我们不需要的东西, 把他们先都删掉. 在这里, 记得上一课我教过你的快速选中外层Container的方法, 把所有这些不需要的东西一次性全选中, 然后删掉.

知识点: 当在Tableau Dashboard中添加worksheet的时候, Worksheet的filter和legend会随机的添加到vertical container当中, 我们无法控制, 因此最好的方法就是提前创建一些空的container. 那么这些Filter被添加的时候, 我们就能控制它们被添加的位置.

由于删除所有内层container会导致外层Container消失的特点. 我们在删除这个装满不需要的Filter和Legend的Container之后, 还需要再补一个Container.

我们的另一种选择就是把所有的Filter先放那, 然后最后一起删除. 在下边的动图里, 我们看看其他的图表是怎么一步一步都添加到各个Container当中的

在所有五个小container组装好之后, 我们就可以把他们装到一个更大的container里.

我们接下来使用完全相同的方法来组装第二个大Container. 之前组装好的第一个大Container, 我们可以把它缩放, 移动到整个Dashboard的右上角, 需要的时候再把它放大

设置Distribute Contents Evenly

添加Filter和Parameter

Filter的添加一般是在所有的Worksheet都添加之后的一步, 在前边我们已经可以看到, 如果不控制, Tableau会随意把Filters添加到一个Container里. 因此在准备添加Filter之前, 我们需要在创建一个空的Container来确保Filter有一个地方来装.

Format Filters

Filter在添加到Container里之后, 我们就需要设置Filter的格式了. 右键点击我们的Filter, 然后就会出现下边这个菜单. 我们选中Single Value Dropdown. 具体Filter的各种格式我在Filter那一章里第四课讲过了

收尾

到这我们就创建好了我们所需要的各个模块. 我们主要需要教学的部分也就结束了.

在这整个过程中你会发现, 我们所有的东西都是提前创建好, 填充, 然后铺进去, 创建好, 填充, 平铺进去. 而最后的这个动图里, 除了向你展示收尾之外. 我还想向你展示, 为什么我们尽量把新的continaer从中间添加而不是两边.