在sketch中巧绘donut chart

设计类教程先别废话，请看图：

这样的图表相信各设计师们都见过，学名叫「甜甜圈图表」(donut chart)，还有下面这个apple watch上这个美炸了的表盘，同样也可以被视为「甜甜圈图表」。

其实看着蛮简单的，然而，你如果没有掌握绘制它的诀窍，那也不是那么的简单。在目前最火热的UI绘制软件 sketch 中该如何巧妙的绘制「甜甜圈图表」呢？

准备

• 初中数学知识
• UI绘制软件sketch
• 从这里看下去的耐心

原理

（其实不好太意思讲，太简单了）

• 利用dash线段的两个参数，就sketch里面来说就是「虚线」和「间隙」两个参数配合即可
• 唯一的一个公式：2R * Pi * %（2R-圆的直径；Pi-圆周率取3.14；%-你想绘制的百分数）

演示

首先新建一个圆形，如下图左图，那么怎么由左图变为右图呢

以下面这张图为例，公式中的参数分别为R = 92，Pi = 3.14，% = 1/2

这个公式可以直接以表达式的形式输入到「虚线」框和「间隙」框里，sketch会自动帮你计算好

虚线框输入：92 * 3.14 * 0.5

间隙框输入：92 * 3.14 * （1-0.5）

敲击会车，即可得到右图的效果！

类似的其他百分数也是一样，只要将响应的%值进行替换即可，请看下图：

% = 0.75

% = 0.25

到此主要的教程内容就差不多了。这种方法其实就是巧妙的运用了dash线段的两个参数。至于其他的甜甜圈颜色、端点是否圆角等等都是次要的。

希望能帮到你，谢谢～～

（ps：转载请注明，谢谢）