文章分類： | 圖表畫法 | 儀表板設計 | 公式計算 | 圖表交互 | 圖表挑戰 | 可視化作品 |

跑道圖的準確的名字應該叫 Radial Bar Chart，翻譯過來應該叫 環狀條形圖 ，但是這么叫總容易和另外一種圖表類型搞混，所以我們還是叫「跑道圖」好了。

不知道是不是因為 Apple Watch 的原因,這個圖表類型突然就很流行，我們圖表挑戰中也經常出現。

其實后臺不止一次有同學問這種「跑道圖」是不是用 Tableau 畫的，具體又怎么畫，而每次我的回復都是:

「不建議使用」

大部分教程對「跑道圖」的使用方式都是和上圖類似，都是想要對比展示一組百分比數據，最大的百分比設定占據 3/4 個圓環，其他的條形角度是通過最長的圓環來推算的。

其實和上一篇文章 華夫餅圖（Waffle Chart）的終極改進方案 開頭我不喜歡餅狀圖的原因相似，我天然的就不喜歡帶弧度的圖表類型，主要原因是人對弧度的認知還是不如對長度的認知直觀。

「跑道圖」的問題可能還更嚴重，盡管看上去很酷，但是大部分讀者應該都是習慣用一個完整圓環來代表100% 這個比例。如果像上圖一樣用 37.1% 來映射 3/4 圓，我們只是看這些弧形線段根本沒法直接推斷出弧形代表的大概比例。

我真的曾經一度認為我可能這輩子都不會用跑道圖了！

我這次用跑道圖也是因為看到了這張圖。

我們看到這張圖使用了 小時 -> 圓弧 的映射，最重要的是，映射關系是 12 小時 -> 完整圓弧，在這種映射關系下，你只要能看懂指針的表盤，就能通過弧度來感知具體圓弧代表的時間。

沒有差的圖表，只有差的設計師。即使你認為最沒用的圖表類型也會在某個場景下煥發出最耀眼的光芒。我們知道從這個案例可以看到兩個我們可以學習的點：

最大的圓環不應該限制在 3/4 長度。

弧度和時間的映射是個好映射。

---

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. 繪圖原理

繪圖原理也是有幾個不太好理解的點，大概有下面幾個：

是怎么畫出圓環的？

表計算依據設置的原理是啥？

2.1 怎么畫出圓環的

我們反正已經畫好了一個作品，我們可以用畫好的成品來反向理解一下畫圖的原理。想要理解怎么畫出圓環的，一下幾個問題是需要理解清楚的，

理解造數過程

使用 分箱（bin）的特性來生成輔助數據

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 。

回頭看看這一小節開頭的問題，能不能都想清楚：

理解造數過程

使用 分箱（bin）的特性來生成輔助數據

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 設置好計算依據后是沒有空缺的。

我簡單測試了一下，發現有個小現象：

如果嵌套的表計算是使用了中間字段，兩層的表計算是可以不同的設置，如果只是函數嵌套，那么默認所有的表計算函數只能用相同的設置。

設定了所在級別，我理解就是選定的字段自動變成唯一 尋址字段，其他的字段即使打上勾，效果也和 分區字段 等效。

具體設置表計算的方式，我理解上圖的兩種設置方式是等效的，我目前的有限測試了幾個案例，還沒遇到不通用的情況，有大神覺得兩種設置不等價，記得給我留言。

最后，我們把所有的用到的字段，再拉個交叉表，感受一下構造字段的原因，以及設置表計算的原因吧。

---

能堅持到這里的應該是個狠人，我要不是我自己寫的，這么枯燥冗長，我估計我自己都不會看完。。。。

想留幾個思考問題，有空想想加深一下理解：

怎么控制弧線段的 起止點 方向 呢？

我在過中嘗試了各種等效的字段寫法，你有沒有更好的？

和朋友討論的過程中，我們把數據最大的角度設置為 360 度畫圖可能通用性更好，而且少設置了一個表計算函數，你可以試試這種方法。

參考：

- Radial Bar Chart Tutorial

- 用人話講講的「表計算」

Tableau 相關文章： | 圖表畫法 | 儀表板設計 | 公式計算 | 圖表交互 | 圖表挑戰 | 可視化作品 |

總結

以上是生活随笔為你收集整理的fusioncharts 嵌套饼图_【Tableau 图表】你是不是真的需要一个跑道图呢？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。