當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

fusioncharts 嵌套饼图_【Tableau 图表】你是不是真的需要一个跑道图呢？

發(fā)布時間：2024/3/13 编程问答 38 豆豆

生活随笔收集整理的這篇文章主要介紹了 fusioncharts 嵌套饼图_【Tableau 图表】你是不是真的需要一个跑道图呢？小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

跑道圖的準(zhǔn)確的名字應(yīng)該叫 Radial Bar Chart，翻譯過來應(yīng)該叫環(huán)狀條形圖，但是這么叫總?cè)菀缀土硗庖环N圖表類型搞混，所以我們還是叫「跑道圖」好了。

不知道是不是因?yàn)?Apple Watch 的原因,這個圖表類型突然就很流行，我們圖表挑戰(zhàn)中也經(jīng)常出現(xiàn)。

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

「不建議使用」

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

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

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

我真的曾經(jīng)一度認(rèn)為我可能這輩子都不會用跑道圖了！

我這次用跑道圖也是因?yàn)榭吹搅诉@張圖。

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

沒有差的圖表，只有差的設(shè)計師。即使你認(rèn)為最沒用的圖表類型也會在某個場景下煥發(fā)出最耀眼的光芒。我們知道從這個案例可以看到兩個我們可以學(xué)習(xí)的點(diǎn)：

最大的圓環(huán)不應(yīng)該限制在 3/4 長度。

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

1. 跑道圖操作流程

下面就是教程時間了，我就用這次圖表挑戰(zhàn)的數(shù)據(jù)來完整呈現(xiàn)以下上述圖示「跑道圖」的制作過程，為了先給你最大的成就感，我計劃完整的先把操作流程列出來，你先按照操作完整的操作一遍，后面我再寫畫圖的原理。

你可以先到 public 下載下來整個工作簿，參考成品。

第一步：準(zhǔn)備數(shù)據(jù)

因?yàn)榕艿缊D會生成大量的輔助數(shù)據(jù)，所以我會把數(shù)據(jù)處理到最精簡的程度。我給三個不同的主題做了不同的匯總，生成了三個數(shù)據(jù)源，下面是根據(jù)年齡分組生成的數(shù)據(jù)源。

Path 是我新添加的數(shù)據(jù)源，我使用 0 和 280 這兩個值，意味著后面我會把最大的弧形線段畫成 280 度。之所以是 280 度，我是用最大時間 9.34 h 占比 12 h 推算的。0.34 / 12 * 360 = 280 。

具體聚合我使用的是 Tableau Prep,當(dāng)然你用其他工具也行，因?yàn)楸旧頂?shù)據(jù)量不大，Excel就不錯，我這里簡單截圖我使用 Tableau Prep 的流程圖,不要在工具上糾結(jié)。

注意把 Type of Days 和 Sex 下不是全量統(tǒng)計的標(biāo)簽都過濾掉。加 Path 可以用到并集這個特性，把 0 和 280 兩個值賦上。

第二步：創(chuàng)建計算字段

Path (bin)

右擊計算字段 Path - 創(chuàng)建 - 創(chuàng)建計算字段

在數(shù)據(jù)桶設(shè)置對話框中，設(shè)置數(shù)據(jù)桶大小為 1 ,然后點(diǎn)擊確定。

我們使用數(shù)據(jù)桶是為了補(bǔ)充生成 0 - 280 之間的數(shù)據(jù)，我們有了這些中間數(shù)據(jù)，才能用路徑圖，沿著這些中間數(shù)據(jù)畫圓。

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]

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

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

第三步：使用字段

將 Age Group 字段拖放到標(biāo)記卡的顏色控制板上。
將 Path (Bin) 字段，拖放到列功能區(qū)。
- 右擊 Path (Bin) 字段，點(diǎn)擊顯示缺失值。
- 將 Path (Bin) 字段，拖放到詳細(xì)信息控制板上。
將圖表類型修改為線，將 Path(bin) 拖放到路徑控制板上。
將 X 拖放到行功能區(qū)，右擊 X - 計算依據(jù)，選擇 Path(bin)。
將 Y 拖放到列功能區(qū)，右擊 Y - 計算依據(jù)，選擇 Path(bin)。

到這一步大概能做出上面的樣子了。

第四步：設(shè)置表計算

這一步主要是設(shè)置各個中間變量的表計算依據(jù)。

設(shè)置的方式參照截圖，具體的設(shè)置內(nèi)容我還是列一下。

右擊 X ,編輯表計算
- 在嵌套的表計算中，選擇 Max Value
  - 計算依據(jù) 選擇特定維度
  - Age Group 和 Path(bin) 都要勾選上
  - 保證 Age Group 在 Path(bin) 的上方
- 在嵌套的表計算中，選擇 Rank
  - 計算依據(jù) 選擇特定維度
  - Age Group 和 Path(bin) 都要勾選上
  - 保證 Age Group 在 Path(bin) 的上方
  - 所在級別選擇 Age Group

右擊 Y ,編輯表計算
- 在嵌套的表計算中，選擇 Max Value
  - 計算依據(jù) 選擇特定維度
  - Age Group 和 Path(bin) 都要勾選上
  - 保證 Age Group 在 Path(bin) 的上方
- 在嵌套的表計算中，選擇 Rank
  - 計算依據(jù) 選擇特定維度
  - Age Group 和 Path(bin) 都要勾選上
  - 保證 Age Group 在 Path(bin) 的上方
  - 所在級別選擇 Age Group

到這一步能夠?qū)崿F(xiàn)的效果，后面的美化工作就不詳細(xì)描述了，大小控制板能夠控制線的粗細(xì)，背景改去掉的去掉，坐標(biāo)軸隱藏。

2. 繪圖原理

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

是怎么畫出圓環(huán)的？

表計算依據(jù)設(shè)置的原理是啥？

2.1 怎么畫出圓環(huán)的

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

理解造數(shù)過程

使用分箱（bin）的特性來生成輔助數(shù)據(jù)

X Y 兩個字段每個中間字段起到的作用

其實(shí)我們在 Tableau 畫與圓相關(guān)的內(nèi)容，思路都是一樣的。我們想要表達(dá)的數(shù)據(jù)觀念是弧度制的，而 Tableau 的坐標(biāo)系是直角坐標(biāo)系。我們必須把數(shù)據(jù)代表的弧度制下的觀念，轉(zhuǎn)化成能在 Tableau 中畫出來的直角坐標(biāo)下的點(diǎn) 和線。

具體的坐標(biāo)轉(zhuǎn)換方式就是中學(xué)知識了，看圖應(yīng)該很好懂。

我們把我們做好的圖表類型切換成成圓，我們的造數(shù)過程其實(shí)就是把紅色和藍(lán)色的點(diǎn)造了出來，需要注意的是，因?yàn)榻o所有紅色點(diǎn)賦值都是 280，所以內(nèi)側(cè)的點(diǎn)與點(diǎn)之間的弧度需要根據(jù)比例縮放一點(diǎn)的。

灰色的點(diǎn)都需要我們通過分箱特性生成。

我們通過 Path(bin) -> Index 得到了一組 [0, 280] 的序列，生成的序列是為了模擬角度，可以理解為上面提到的 θ 。因?yàn)槭褂昧吮碛嬎愕年P(guān)系，要注意 Index 還是依賴 Path(bin) 的，在后面設(shè)置表計算的時候會提到。

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

還是拿 X 作為例子：

Index 模擬了一個 [0, 280] 的角度變化。

SIN([Index]*PI()/180) 因?yàn)?Tableau 中三角函數(shù)默認(rèn)的輸入值是弧度制的，所以需要轉(zhuǎn)化一下。

Step Size 放到了三角函數(shù)的內(nèi)部，我們想要給不同的 Age Group 生成不同長度的弧線段，后面我們看我們怎么使用表函數(shù)的設(shè)置來生成不同的比例。

Rank 很好理解，就是 r 。

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

理解造數(shù)過程

使用分箱（bin）的特性來生成輔助數(shù)據(jù)

X Y 兩個字段每個中間字段起到的作用

2.2 表計算設(shè)置的原理是啥？

我們上一節(jié)梳理了最終生成坐標(biāo)需要的各個中間字段起到的作用，這節(jié)我們看看我們怎么通過書寫公式和設(shè)計表計算來實(shí)現(xiàn)這些功能。

我們的坐標(biāo)依賴與我們寫的幾個基礎(chǔ)字段，其中四個都使用了表計算函數(shù)，所以都需要我們手工設(shè)置好表計算的方法。

開始這節(jié)之前，不妨復(fù)習(xí)一下這篇文章，再回憶一下表計算的設(shè)置方法，分區(qū)字段和尋址字段都是什么概念。

用人話講講的「表計算」

為了看的清楚點(diǎn)，不妨你自己先把所有需要設(shè)置表計算的字段拉個交叉表看看。

下面一個一個說：

Index 和 Value 我們是直接右擊坐標(biāo)字段 X 和 Y 的時候，直接在計算依據(jù) 選擇Path(bin) 時候設(shè)置的。就像我在用人話講講的「表計算」里面說的，我永遠(yuǎn)建議新手在編輯表計算的入口來設(shè)置表計算，就算我們已經(jīng)設(shè)置好了，我們不妨再點(diǎn)開編輯表計算看看。

Index Index()-1

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

Index() 表計算函數(shù)實(shí)際就給給不同的 Age Group 分組下的尋址字段打了一個序號。

WINDOW_MAX() 函數(shù)則是在根據(jù) Age Group 分好的組中，找到每組中依據(jù) 尋址字段字段聚合的最大值。

因?yàn)槲覀冄a(bǔ)充的分箱聚合結(jié)果中都是空值，這個 WINDOW_MAX() 其實(shí)起到的是補(bǔ)充數(shù)值的作用。

因?yàn)楹芏嗤瑢W(xué)看見 Value 和 Max Valeu 的字段寫法一樣就蒙了，原始方法寫兩個字段，做不一樣的表計算設(shè)置，我覺得可能是提升開發(fā)速度的目的，我們?yōu)榱撕美斫?#xff0c;完全可以給 Value 換個字段寫法：

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

效果是完全一樣的。

Max Value

Max Value 使用了和 Value 相同的字段寫法，但是表計算設(shè)置是不同的：

Age Group 和 Path(bin) 都成了尋址字段，所以效果變成了現(xiàn)在只有一個分組，我們找到根據(jù)兩個尋址字段聚合的最大值 9.3 ，這個值最后要填到每個分組里。

我們現(xiàn)在看看，Value/Max Value 是不是實(shí)現(xiàn)了應(yīng)有的縮放比例，每個 Age Group 都是各自的值，比上最大的值 9.3。

Rank

RANK_UNIQUE([Value], 'asc')

最后這個用來實(shí)現(xiàn)半徑控制的 Rank 字段使用了 RANK_UNIQUE 函數(shù), 具體的函數(shù)概念，還是看看官網(wǎng)吧,這里說點(diǎn)可能官網(wǎng)找不到的。

這個字段實(shí)際上是表計算結(jié)果外層再嵌套一層表計算函數(shù)的方法，我真的是第一次使用。

在用人話講講的「表計算」中我提到，表計算其實(shí)是對聚合結(jié)果的二次運(yùn)算，其實(shí)嵌套的表計算，我理解就是三次運(yùn)算了。

這里之所以使用嵌套表計算，實(shí)際是因?yàn)樵甲侄蔚拇罅靠杖?#xff0c;你可以試試 RANK_UNIQUE(AVG([Avg hrs per day sleeping]),'asc')的效果。而 valeu 設(shè)置好計算依據(jù)后是沒有空缺的。

我簡單測試了一下，發(fā)現(xiàn)有個小現(xiàn)象：

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

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

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

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

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

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

怎么控制弧線段的起止點(diǎn) 方向呢？

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

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

參考：

- Radial Bar Chart Tutorial

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇：报错 Missing number, t
下一篇：快速的在Adobe Illustrato