文章分类： | 图表画法 | 仪表板设计 | 公式计算 | 图表交互 | 图表挑战 | 可视化作品 |

跑道图的准确的名字应该叫 Radial Bar Chart，翻译过来应该叫 环状条形图 ，但是这么叫总容易和另外一种图表类型搞混，所以我们还是叫「跑道图」好了。

不知道是不是因为 Apple Watch 的原因,这个图表类型突然就很流行，我们图表挑战中也经常出现。

其实后台不止一次有同学问这种「跑道图」是不是用 Tableau 画的，具体又怎么画，而每次我的回复都是:

「不建议使用」

大部分教程对「跑道图」的使用方式都是和上图类似，都是想要对比展示一组百分比数据，最大的百分比设定占据 3/4 个圆环，其他的条形角度是通过最长的圆环来推算的。

其实和上一篇文章 华夫饼图（Waffle Chart）的终极改进方案 开头我不喜欢饼状图的原因相似，我天然的就不喜欢带弧度的图表类型，主要原因是人对弧度的认知还是不如对长度的认知直观。

「跑道图」的问题可能还更严重，尽管看上去很酷，但是大部分读者应该都是习惯用一个完整圆环来代表100% 这个比例。如果像上图一样用 37.1% 来映射 3/4 圆，我们只是看这些弧形线段根本没法直接推断出弧形代表的大概比例。

我真的曾经一度认为我可能这辈子都不会用跑道图了！

我这次用跑道图也是因为看到了这张图。

我们看到这张图使用了 小时 -> 圆弧 的映射，最重要的是，映射关系是 12 小时 -> 完整圆弧，在这种映射关系下，你只要能看懂指针的表盘，就能通过弧度来感知具体圆弧代表的时间。

没有差的图表，只有差的设计师。即使你认为最没用的图表类型也会在某个场景下焕发出最耀眼的光芒。我们知道从这个案例可以看到两个我们可以学习的点：

1. 最大的圆环不应该限制在 3/4 长度。
2. 弧度和时间的映射是个好映射。

---

1. 跑道图操作流程

下面就是教程时间了，我就用这次图表挑战的数据来完整呈现以下上述图示 「跑道图」的制作过程，为了先给你最大的成就感，我计划完整的先把操作流程列出来，你先按照操作完整的操作一遍，后面我再写画图的原理。

你可以先到 public 下载下来整个工作簿，参考成品。

第一步：准备数据

因为跑道图会生成大量的辅助数据，所以我会把数据处理到最精简的程度。我给三个不同的主题做了不同的汇总，生成了三个数据源，下面是根据年龄分组生成的数据源。

Path 是我新添加的数据源，我使用 0 和 280 这两个值，意味着后面我会把最大的弧形线段画成 280 度。之所以是 280 度，我是用最大时间 9.34 h 占比 12 h 推算的。0.34 / 12 * 360 = 280 。

具体聚合我使用的是 Tableau Prep,当然你用其他工具也行，因为本身数据量不大，Excel就不错，我这里简单截图我使用 Tableau Prep 的流程图,不要在工具上纠结。

注意把 Type of Days 和 Sex 下不是全量统计的标签都过滤掉。加 Path 可以用到并集这个特性，把 0 和 280 两个值赋上。

第二步：创建计算字段

Path (bin)

右击计算字段 Path - 创建 - 创建计算字段

在数据桶设置对话框中，设置数据桶大小为 1 ,然后点击确定。

我们使用数据桶是为了补充生成 0 - 280 之间的数据，我们有了这些中间数据，才能用路径图，沿着这些中间数据画圆。

Index

Index()-1

Value

WINDOW_MAX(SUM([Avg hrs per day sleeping]))

Max Value

WINDOW_MAX(SUM([Avg hrs per day sleeping]))

Step Size

Value]/[Max Value]

X

SIN([Index]*PI()/180*[Step Size])*[Rank]

Y

cos([Index]*PI()/180*[Step Size])*[Rank]

第三步：使用字段

• 将 Age Group 字段拖放到 标记卡 的 颜色控制板 上。
• 将 Path (Bin) 字段，拖放到 列功能区。
  • 右击 Path (Bin) 字段，点击 显示缺失值。
  • 将 Path (Bin) 字段，拖放到 详细信息控制板 上。
• 将图表类型修改为 线，将 Path(bin) 拖放到 路径控制板 上。
• 将 X 拖放到 行功能区，右击 X - 计算依据，选择 Path(bin)。
• 将 Y 拖放到 列功能区，右击 Y - 计算依据，选择 Path(bin)。

到这一步大概能做出上面的样子了。

第四步：设置表计算

这一步主要是设置各个中间变量的表计算依据。

设置的方式参照截图，具体的设置内容我还是列一下。

• 右击 X ,编辑表计算
  • 在嵌套的表计算中，选择 Max Value
    • 计算依据 选择 特定维度
    • Age Group 和 Path(bin) 都要勾选上
    • 保证 Age Group 在 Path(bin) 的上方
  • 在嵌套的表计算中，选择 Rank
    • 计算依据 选择 特定维度
    • Age Group 和 Path(bin) 都要勾选上
    • 保证 Age Group 在 Path(bin) 的上方
    • 所在级别 选择 Age Group

• 右击 Y ,编辑表计算
  • 在嵌套的表计算中，选择 Max Value
    • 计算依据 选择 特定维度
    • Age Group 和 Path(bin) 都要勾选上
    • 保证 Age Group 在 Path(bin) 的上方
  • 在嵌套的表计算中，选择 Rank
    • 计算依据 选择 特定维度
    • Age Group 和 Path(bin) 都要勾选上
    • 保证 Age Group 在 Path(bin) 的上方
    • 所在级别 选择 Age Group

到这一步能够实现的效果，后面的美化工作就不详细描述了，大小控制板能够控制线的粗细，背景改去掉的去掉，坐标轴隐藏。

2. 绘图原理

绘图原理也是有几个不太好理解的点，大概有下面几个：

1. 是怎么画出圆环的？
2. 表计算依据设置的原理是啥？

2.1 怎么画出圆环的

我们反正已经画好了一个作品，我们可以用画好的成品来反向理解一下画图的原理。想要理解怎么画出圆环的，一下几个问题是需要理解清楚的，

1. 理解造数过程
2. 使用 分箱（bin）的特性来生成辅助数据
3. X Y 两个字段每个中间字段起到的作用

其实我们在 Tableau 画与圆相关的内容，思路都是一样的。我们想要表达的数据观念是弧度制的，而 Tableau 的坐标系是直角坐标系。我们必须把数据代表的弧度制下的观念，转化成能在 Tableau 中画出来的直角坐标下的 点 和 线。

具体的坐标转换方式就是中学知识了，看图应该很好懂。

我们把我们做好的图表类型切换成成圆，我们的造数过程其实就是把红色和蓝色的点造了出来，需要注意的是，因为给所有红色点赋值都是 280，所以内侧的点与点之间的弧度需要根据比例缩放一点的。

灰色的点都需要我们通过分箱特性生成。

我们通过 Path(bin) -> Index 得到了一组 [0, 280] 的序列，生成的序列是为了模拟角度，可以理解为上面提到的 θ 。因为使用了表计算的关系，要注意 Index 还是依赖 Path(bin) 的，在后面设置表计算的时候会提到。

SIN([Index]*PI()/180*[Step Size])*[Rank]

还是拿 X 作为例子：

Index 模拟了一个 [0, 280] 的角度变化。

SIN([Index]*PI()/180) 因为 Tableau 中三角函数默认的输入值是弧度制的，所以需要转化一下。

Step Size 放到了三角函数的内部，我们想要给不同的 Age Group 生成不同长度的弧线段，后面我们看我们怎么使用 表函数的设置来生成不同的比例。

Rank 很好理解，就是 r 。

回头看看这一小节开头的问题，能不能都想清楚：

1. 理解造数过程
2. 使用 分箱（bin）的特性来生成辅助数据
3. X Y 两个字段每个中间字段起到的作用

2.2 表计算设置的原理是啥？

我们上一节梳理了最终生成坐标需要的各个中间字段起到的作用，这节我们看看我们怎么通过书写公式和设计表计算来实现这些功能。

我们的坐标依赖与我们写的几个基础字段，其中四个都使用了表计算函数，所以都需要我们手工设置好表计算的方法。

开始这节之前，不妨复习一下这篇文章，再回忆一下表计算的设置方法，分区字段 和 寻址字段 都是什么概念。

用人话讲讲的「表计算」

为了看的清楚点，不妨你自己先把所有需要设置表计算的字段拉个交叉表看看。

下面一个一个说：

Index 和 Value 我们是直接右击坐标字段 X 和 Y 的时候，直接在 计算依据 选择Path(bin) 时候设置的。就像我在用人话讲讲的「表计算」里面说的，我永远建议新手在 编辑表计算 的入口来设置表计算，就算我们已经设置好了，我们不妨再点开编辑表计算看看。

Index Index()-1

Value WINDOW_MAX(SUM([Avg hrs per day sleeping]))

Index() 表计算函数实际就给 给不同的 Age Group 分组下的 寻址字段 打了一个序号。

WINDOW_MAX() 函数则是在根据 Age Group 分好的组中，找到每组中依据 寻址字段 字段聚合的最大值。

因为我们补充的分箱聚合结果中都是空值，这个 WINDOW_MAX() 其实起到的是补充数值的作用。

因为很多同学看见 Value 和 Max Valeu 的字段写法一样就蒙了，原始方法写两个字段，做不一样的表计算设置，我觉得可能是提升开发速度的目的，我们为了好理解，完全可以给 Value 换个字段写法：

Total(AVG([Avg hrs per day sleeping]))

效果是完全一样的。

---

Max Value

Max Value 使用了和 Value 相同的字段写法，但是表计算设置是不同的：

Age Group 和 Path(bin) 都成了 寻址字段，所以效果变成了现在只有一个分组，我们找到根据两个 寻址字段 聚合的最大值 9.3 ，这个值最后要填到每个分组里。

我们现在看看，Value/Max Value 是不是实现了应有的缩放比例，每个 Age Group 都是 各自的值，比上最大的值 9.3。

---

Rank

RANK_UNIQUE([Value], 'asc')

最后这个用来实现半径控制的 Rank 字段使用了 RANK_UNIQUE 函数, 具体的函数概念，还是看看官网吧,这里说点可能官网找不到的。

这个字段实际上是表计算结果外层再嵌套一层表计算函数的方法，我真的是第一次使用。

在用人话讲讲的「表计算」中我提到，表计算其实是对聚合结果的二次运算，其实嵌套的表计算，我理解就是三次运算了。

这里之所以使用嵌套表计算，实际是因为原始字段的大量空缺，你可以试试 RANK_UNIQUE(AVG([Avg hrs per day sleeping]),'asc')的效果。 而 valeu 设置好计算依据后是没有空缺的。

我简单测试了一下，发现有个小现象：

如果嵌套的表计算是使用了中间字段，两层的表计算是可以不同的设置，如果只是函数嵌套，那么默认所有的表计算函数只能用相同的设置。

设定了所在级别，我理解就是选定的字段自动变成唯一 寻址字段，其他的字段即使打上勾，效果也和 分区字段 等效。

具体设置表计算的方式，我理解上图的两种设置方式是等效的，我目前的有限测试了几个案例，还没遇到不通用的情况，有大神觉得两种设置不等价，记得给我留言。

最后，我们把所有的用到的字段，再拉个交叉表，感受一下构造字段的原因，以及设置表计算的原因吧。

---

能坚持到这里的应该是个狠人，我要不是我自己写的，这么枯燥冗长，我估计我自己都不会看完。。。。

想留几个思考问题，有空想想加深一下理解：

1. 怎么控制弧线段的 起止点 方向 呢？
2. 我在过中尝试了各种等效的字段写法，你有没有更好的？
3. 和朋友讨论的过程中，我们把数据最大的角度设置为 360 度画图可能通用性更好，而且少设置了一个表计算函数，你可以试试这种方法。

参考：

- Radial Bar Chart Tutorial

- 用人话讲讲的「表计算」

Tableau 相关文章： | 图表画法 | 仪表板设计 | 公式计算 | 图表交互 | 图表挑战 | 可视化作品 |