Javascript 创建自定义饼图样式的圆

我试图从一个圆上切下一片，但事实证明这比我最初预期的要难

最好，我不想使用谷歌图表和任何其他等价物，因为我需要尽可能多地控制这个圆圈的样式（最终结果是加载环）。我还需要能够使用jQuery或CSS为切片的大小设置动画

请原谅我，我还没走多远，我只有这些：

我关心的圈子是

#layer_2

和

#layer_3

。下面是这个圆圈的代码：

#第2层{
边界半径：50%；
宽度：212px；
身高：212px；
利润率：14px；
背景#5c00d2；
背景：-moz线性梯度（45度，#5c00d2 0%，#d586f4 100%）；
背景：-webkit渐变（线性、左下、右上、颜色停止（0%，#5c00d2）、颜色停止（100%，#d586f4））；
背景：-webkit线性梯度（45度，#5c00d2 0%，#d586f4 100%）；
背景：-o-线性梯度（45度，#5c00d2 0%，#d586f4 100%）；
背景：-ms线性梯度（45度，#5c00d2 0%，#d586f4 100%）；
背景：线性梯度（45度，#5c00d2 0%，#d586f4 100%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#5c00d2'，endColorstr='#d586f4'，GradientType=1）；
-webkit盒阴影：嵌入0px 0px 5px 3px rgba（5,71,110,0.5）；
-moz盒阴影：嵌入0px 0px 5px 3px rgba（5,71,110,0.5）；
盒影：嵌入0px 0px 5px 3px rgba（5,71,110,0.5）；
}
#第三层{
边界半径：50%；
宽度：212px；
身高：212px；
保证金：0；
背景：透明；
-webkit盒阴影：插入0px 0px 30px 0px rgba（0,0,0,0.3）；
-moz盒阴影：插入0px 0px 30px 0px rgba（0,0,0,0.3）；
方框阴影：插入0px 0px 30px 0px rgba（0,0,0,0.3）；
}

试试这个

第2层

---

如果不使用画布或svg元素，这将非常困难。@Shomz我想可能是这样的：-（.Canvas和SVG是我唯一没有经验的东西。难吗？@Shomz我倾向于同意，你不能在CSS中真正做到这一点。我认为使用Canvas会更快。@BenCarey；不，这并不难。这是非常基本的东西。我不是这方面的专家，在互联网上一些Tut的帮助下，我能够编写一个六边形网格和饼charts.嗯，它们需要一些时间来学习，但不是很难。但是，你可以尽量保留你已经拥有的东西-例如，整个圆圈可以设置为画布/svg后面的一个元素，然后你可以“剪切”通过将三角形形状放置在切片顶部来创建切片。这很好，但不幸的是，我无法使其与渐变一起工作：-（+1表示努力）

background-image:
    linear-gradient(-90deg, transparent 50%, #5c00d2 50%),
    linear-gradient(200deg, #5c00d2 50%, transparent 50%);