對數(shù)據(jù)進行可視化處理時先舷，餅圖是常用的圖形之一，餅圖一般用于體現(xiàn)各個項之間的占比情況仆抵，表現(xiàn)為由一組或者多組數(shù)值按照百分比扇區(qū)組成的圓形圖跟继，最終圓形圖的比例為100%种冬。今天镣丑，我們就來學習幾招用Sketch畫出漂亮餅圖的方法舔糖。

1.第一招：布爾運算

我們知道，在設(shè)計工具中使用線條勾勒一些規(guī)則圖形是比較麻煩的莺匠，所以通過線條勾勒出扇區(qū)去組成餅圖的方法顯然太過于笨拙金吗。因此，我們可以用布爾運算的法則來對既有圓形進行相交趣竣、相減處理摇庙，最終得到我們想要的扇區(qū)。

具體步驟如下：

首先遥缕，使用橢圓工具繪制一個正圓形（小tips：選中橢圓工具后卫袒，按住shift鍵即可繪制正圓形），為了方便區(qū)分单匣，我們設(shè)置正圓形為藍色填充夕凝，并取消描邊。

然后户秤，使用三角形工具码秉，繪制一個三角形，我們也可以通過雙擊三角形進入編輯模式鸡号，把三角形左側(cè)的端點拉到中間垂直的位置转砖，形成一個直角三角形。

再然后鲸伴，把直角三角形和圓形放在一起府蔗，且直角和圓的中心點對齊，選中兩者汞窗，復(fù)制一份姓赤，分別進行相減、相交的布爾運算杉辙，即可得到3/4和1/4大小的扇區(qū)模捂。

最后，把得到的扇區(qū)組合在一起蜘矢，分別填充不同的顏色狂男，即可得到一個餅圖，如果想要一個圓環(huán)圖品腹，很簡單岖食，在中間放一個白色填充的正圓形即可。布爾運算這一招的缺點是如果要用三角形劃分餅圖的扇區(qū)比例舞吭，則需要把勾股定理泡垃、正弦定理析珊、余弦定理了解一下。蔑穴。忠寻。

2.第二招：環(huán)形漸變

在Sketch中，一共支持三種漸變效果存和，分別是線性漸變奕剃、徑向漸變和環(huán)形漸變，其中捐腿，環(huán)形漸變可以用來實現(xiàn)餅圖纵朋，具體步驟如下：

首先，依然使用橢圓工具繪制一個正圓形茄袖，取消描邊操软，設(shè)置填充為環(huán)形漸變：

然后，在圓形上任意位置上增加漸變點宪祥，注意聂薪，每個位置需要同時存在2個漸變點（一內(nèi)一外，等會用到）品山，設(shè)置漸變點時胆建，可以通過按數(shù)字鍵0-9，精確定位漸變點的位置肘交，設(shè)置完成后笆载，如下圖所示。

最后涯呻，選中每個漸變點凉驻，并設(shè)置漸變點的填充顏色，外漸變點和順時針相近的內(nèi)漸變點复罐，設(shè)置為同一個填充顏色涝登，代表它們的扇區(qū)顏色，可以使用快捷鍵Tab快速切換漸變點效诅，Control＋C組合鍵進行吸色胀滚，即可得到一個下圖所示的餅圖。這一招的優(yōu)點是可以快速調(diào)整扇區(qū)的比例乱投，只要拖動漸變點即可咽笼，缺點是扇區(qū)分割時會出現(xiàn)鋸齒，目前還沒有鋸齒的解決方案戚炫。

3.第三招：Sketchy Pies插件

強烈推薦剑刑，用一次就上癮的Sketchy Pies插件，一鍵就能生成漂亮的餅圖双肤，還支持通過顏色代碼和比例設(shè)置扇區(qū)施掏。具體操作步驟如下：

首先钮惠，安裝好Sketchy Pies插件，下載地址會在文末放出七芭。

然后素挽，同樣需要先使用橢圓工具繪制一個正圓形，并取消描邊抖苦，選中正圓形毁菱，依次選擇“Plugins＞Sketchy Pies＞Conver to Pie Chart”米死。

接著锌历，當前窗口會彈出一個“User Input”的彈框，其中會包括一些顏色代碼峦筒，默認有5個究西，即代表即將生成的餅圖有5個扇區(qū)，這些顏色代碼都是可以修改和增加的物喷，用“,”隔開即可卤材。

不管怎么樣，我們先默認點個“OK”峦失，奇跡出現(xiàn)了扇丛，剛才選中的正圓已經(jīng)變成了一個5等分的餅圖，而且圖層中還規(guī)整地用顏色代碼做好扇區(qū)圖層的命名了尉辑，真是十分的貼心帆精。

如果我們需要修改扇區(qū)的顏色，可以分別選中相關(guān)的扇區(qū)圖層修改填充顏色即可隧魄，神奇的是卓练，如果我們想要一個圓環(huán)圖，不用再像前面兩招那樣單獨弄一個白色填充內(nèi)圓了购啄，我們只需要選中所有的扇區(qū)圖層襟企，然后在檢查器中，把“Borders”的值變小即可得到一個空心圓環(huán)狮含，十分的方便顽悼。

另外，Sketchy Pies插件几迄，還支持生成不等分的餅圖蔚龙，重復(fù)剛才畫正圓的步驟，這次插件選擇的路徑變?yōu)椤癙lugins＞Sketchy Pies＞Conver to Pie Chart with Percentage Values”乓旗，意思是轉(zhuǎn)換為帶比例值的餅圖府蛇。

依舊會先彈出一個“User Input”的彈框，除了顏色代碼之外屿愚，我們發(fā)現(xiàn)顏色代碼后面還跟著比例或者小數(shù)點汇跨，用“:”隔開务荆，這是因為Sketchy Pies插件支持我們通過百分比（例如20%）或者小數(shù)點（例如0.2）定義餅圖扇區(qū)的大小。

設(shè)置好扇區(qū)的顏色和比例后穷遂，點擊“OK”函匕，即可生成一個自定義扇區(qū)比例大小的餅圖，同理蚪黑，可以通過之前的步驟得到一個圓環(huán)圖盅惜。

Sketchy Pies插件是不是十分的強大？快來下載體驗一下吧忌穿。

下載鏈接:https://pan.baidu.com/s/1OKSAxvzafyD-0eIMu-L4IQ

密碼: hkj8

相關(guān)推薦閱讀：

了解徑向漸變——用Sketch畫出大自然中最美的漸變色

餅圖設(shè)計要點——圖表交互設(shè)計之餅圖