F2 圖表系列之 Radial Bar Chart，為圓滿，動起來

yuque.com

不知道大家對這張圖是否熟悉，這是 Apple Watch 的健身記錄。

從第一代 Apple Watch 至今，Apple 對健身記錄的可視化方式一直未變，簡單的三個圓環，不用直線進度條，不用數字，也不用任何百分比。

這種可視化設計方式可以說是非常巧妙：

1. 首先它非常直觀，目標清晰明了，一看就懂，圓弧閉合表示目標達成，沒閉合那麼就繼續努力吧
2. 它有效得利用了空間，並且視覺醒目。如此小的屏幕，完美得展示了用戶三種健身行為（活動、鍛煉、站立）的進行情況，目標都是你定的咯，千萬別偷懶。
3. 這和用戶的概念模型非常契合：手錶/時鐘，我們從小就開始學習如何讀手錶不是么？

但是我們冷靜得看的話，其實這就是環形進度條，只是為了有效利用空間，採用俄羅斯套娃的方式將三個環形進度條進行了組合。

而從可視化圖表的角度，這其實是 Radial/Circle Bar Chart, 可直譯為徑向/環形柱狀圖，或者使用我們 AntV 為其賜名的『玉珏圖』，是柱狀圖在極坐標下的表現，用法同普通柱狀圖類似，用於不同類別之間的比較。

更多詳細的介紹見: https://antv.alipay.com/zh-cn/vis/chart/radial-bar.html

那麼如何使用 F2 進行繪製呢？請耐著性子往下看：

玉珏圖的繪製原理

上文講道，玉珏圖是柱狀圖在極坐標下的表現，那麼它到底是如何從柱狀圖成功變裝為玉珏圖的呢？

（1）首先假設我有一個宏偉目標，就是減重 10 斤，經過三年不懈努力，我終於減掉了 6.18 斤，那麼換算成百分比，我目前的完成度是 61.8%（千萬不要小瞧女人的意志力），將這條信息轉換成數據：

const data = [ { name: 減肥, value: 6.18 } //];

然後先用柱狀圖表示就是:

其中縱軸的最大值是 10

// 代碼片段：圖形語法聲明// interval() 用於聲明圖表類型：柱狀圖// position 用於聲明柱狀圖的 x 軸和 y 軸對應的數據chart.interval().position(name*value);

（2）現在，我們把上述柱狀圖進行轉置，就是將 x 軸和 y 軸進行交換，得到如下的圖。

在圖形語法中，轉置通過坐標系的變換達成，如下：

// 代碼片段: 直角坐標系轉置chart.coord({ transposed: true // 轉置坐標系})

（3）完成以上兩步之後，你是否已經大致猜到了從柱狀圖到玉珏圖的變換原理了呢？對，只要它『彎』下就好了。即將直角坐標系變換至極坐標，坐標系變換之後，我們就將原先的柱狀圖高度轉換成了當前的角度，占整個圓的 61.8%。

在圖形語法中，聲明下坐標系的類型即可。

chart.coord(polar, { transposed: true, innerRadius: 0.5 // 為了美觀，這裡設置了下圓的空心半徑});

到此一個玉珏圖就繪製完成了，通過上面的解釋，不知道大家對玉珏圖的定義：柱狀圖在極坐標下的表現有沒有理解了呢？

完整代碼詳見：codepen

環形進度條

但是它看起來並不像一個環形進度條，為什麼？ 一看就知道咯，缺一個閉合的圓弧，強調 100% 的狀態，那很簡單，繪製一個背景圓環就可以了呀~

// 代碼片段，繪製一個輔助圓弧chart.guide().arc({ start: [0, 0], end: [1, 99.98], top: false, style: { lineWidth: 40, stroke: #ccc }});

完整代碼詳見：codepen

進階

漂亮點

為了讓環形進度條更加美觀，漂亮，畢竟彎都彎了。我們可以讓圓弧的頭尾兩端飽滿一點，如下圖所示：

為了實現這個效果，之前我也寫過一篇教程：玩玩 G2 系列之圓角矩形，之前的思路是使用自定義 path 的方式來實現兩端的圓帽，但是！小編我有一天核桃吃多了點，發現了一個新思路： Canvas 2D API 中有一個屬性: lineCap, 指定如何繪製每一條線段末端，有3個可能的值，分別是：butt, round and square :

所以我只要自定義一個 shape，將柱狀圖原本的矩形形狀繪製成一條線（帶線寬），然後為這條線設置 lineCap: round 即可，簡單有效完美！

假設我將這個 shape 命名為 tick, 我只要在圖形語法中聲明下 shape 映射即可：

// 代碼片段chart.interval().position(name*value).shape(tick);

自定義 shape 的詳細說明詳見： https://antv.alipay.com/zh-cn/f2/3.x/api/shape.html

生動點

到此，為了讓這個環形進度條更富有生命力，我們可以加點動畫。雖然 F2 默認帶有動畫，但是默認的動畫效果並不是很好，它採用的是整體區域的圓形剪切動畫，即從起始角（- Math.PI / 2） 開始逐漸變換至 Math.PI * 1.5。如下如所示：

這樣就會導致頭部的圓帽在出場時被切掉，動畫結束是才出現... 如下所示，這就是為美麗付出的代價。

這時候就體現出了 F2 的強大之處，自定義動畫機制，我們可以直接對圓弧（shape）自定義動畫，原理同上述一樣，進行角度的變化即可，只是這裡的動畫主題是 shape 自身。在動畫的過程中還可以加些小動作，如動態顯示進度，效果如下:

簡直就是完美。

完整的示例代碼詳見： https://antv.alipay.com/zh-cn/f2/3.x/demo/guide/arc.html

至此，一個環形進度條就繪製成功了，掌握了這個，繪製蘋果的三圓環還難么？無非就是豐富下數據，添加下顏色就好了：

該示例的代碼詳見： https://codepen.io/Sima/pen/qYgZXv

感興趣的讀者可以自己嘗試下。

總結

正所謂美酒雖好，也不能貪杯。雖然在空間有限的情況下，玉珏圖能起到有效利用空間的效果，但是由於玉玦圖是用角度來映射數值大小，當多個類別數據進行比較式，相同的角度下，外環的圓弧長度會明顯大於內環的圓弧長度，進而造成視覺上的欺騙，引起數據的誤讀，所以要謹慎使用哦。

不過就本文的場景，如果只是用於獨立展示各個類別的完成度的話，在移動端確實是一個不錯的選擇。

F2 地址：

• github: https://github.com/antvis/f2
• 官網： https://antv.alipay.com/zh-cn/f2/3.x/index.html

如果本文內容讓您產生愉悅或者略有受益，歡迎訂閱我們的語雀、知乎專欄：

• 語雀專欄：https://yuque.com/antv/blog
• 知乎專欄：https://zhuanlan.zhihu.com/aiux-antv

我們會定期為您線上可視化上的新鮮資訊。