對(duì)數(shù)據(jù)進(jìn)行可視化處理時(shí)，餅圖是常用的圖形之一，餅圖一般用于體現(xiàn)各個(gè)項(xiàng)之間的占比情況，表現(xiàn)為由一組或者多組數(shù)值按照百分比扇區(qū)組成的圓形圖，最終圓形圖的比例為100%。今天，我們就來(lái)學(xué)習(xí)幾招用Sketch畫(huà)出漂亮餅圖的方法。

1.第一招：布爾運(yùn)算

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

具體步驟如下：

首先，使用橢圓工具繪制一個(gè)正圓形（小tips：選中橢圓工具后，按住shift鍵即可繪制正圓形），為了方便區(qū)分，我們?cè)O(shè)置正圓形為藍(lán)色填充，并取消描邊。

然后，使用三角形工具，繪制一個(gè)三角形，我們也可以通過(guò)雙擊三角形進(jìn)入編輯模式，把三角形左側(cè)的端點(diǎn)拉到中間垂直的位置，形成一個(gè)直角三角形。

再然后，把直角三角形和圓形放在一起，且直角和圓的中心點(diǎn)對(duì)齊，選中兩者，復(fù)制一份，分別進(jìn)行相減、相交的布爾運(yùn)算，即可得到3/4和1/4大小的扇區(qū)。

最后，把得到的扇區(qū)組合在一起，分別填充不同的顏色，即可得到一個(gè)餅圖，如果想要一個(gè)圓環(huán)圖，很簡(jiǎn)單，在中間放一個(gè)白色填充的正圓形即可。布爾運(yùn)算這一招的缺點(diǎn)是如果要用三角形劃分餅圖的扇區(qū)比例，則需要把勾股定理、正弦定理、余弦定理了解一下。。。

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

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

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

然后，在圓形上任意位置上增加漸變點(diǎn)，注意，每個(gè)位置需要同時(shí)存在2個(gè)漸變點(diǎn)（一內(nèi)一外，等會(huì)用到），設(shè)置漸變點(diǎn)時(shí)，可以通過(guò)按數(shù)字鍵0-9，精確定位漸變點(diǎn)的位置，設(shè)置完成后，如下圖所示。

最后，選中每個(gè)漸變點(diǎn)，并設(shè)置漸變點(diǎn)的填充顏色，外漸變點(diǎn)和順時(shí)針相近的內(nèi)漸變點(diǎn)，設(shè)置為同一個(gè)填充顏色，代表它們的扇區(qū)顏色，可以使用快捷鍵Tab快速切換漸變點(diǎn)，Control＋C組合鍵進(jìn)行吸色，即可得到一個(gè)下圖所示的餅圖。這一招的優(yōu)點(diǎn)是可以快速調(diào)整扇區(qū)的比例，只要拖動(dòng)漸變點(diǎn)即可，缺點(diǎn)是扇區(qū)分割時(shí)會(huì)出現(xiàn)鋸齒，目前還沒(méi)有鋸齒的解決方案。

3.第三招：Sketchy Pies插件

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

首先，安裝好Sketchy Pies插件，下載地址會(huì)在文末放出。

然后，同樣需要先使用橢圓工具繪制一個(gè)正圓形，并取消描邊，選中正圓形，依次選擇“Plugins＞Sketchy Pies＞Conver to Pie Chart”。

接著，當(dāng)前窗口會(huì)彈出一個(gè)“User Input”的彈框，其中會(huì)包括一些顏色代碼，默認(rèn)有5個(gè)，即代表即將生成的餅圖有5個(gè)扇區(qū)，這些顏色代碼都是可以修改和增加的，用“,”隔開(kāi)即可。

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

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

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

依舊會(huì)先彈出一個(gè)“User Input”的彈框，除了顏色代碼之外，我們發(fā)現(xiàn)顏色代碼后面還跟著比例或者小數(shù)點(diǎn)，用“:”隔開(kāi)，這是因?yàn)镾ketchy Pies插件支持我們通過(guò)百分比（例如20%）或者小數(shù)點(diǎn)（例如0.2）定義餅圖扇區(qū)的大小。