如何动态创建多级饼图的切片

我正在努力通过使用多级饼图来显示父子关系。 我必须通过使用HTML，CSS3和纯JavaScript（没有jQuery或任何库）来实现这一点。 我试图实现像这个JSFiddle上显示的东西，但我不能使用任何第三方库。

到目前为止，我这样做了：

.outer-chart{ position: relative; overflow: hidden; width: 350px; height: 350px; border-radius: 50%; background-color: #33ccff; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2); } .outer-circle, .inner-circle { position: absolute; border-radius: 50%; } .outer-circle { top: 15%; left: 15%; right: 15%; bottom: 15%; background-color: #ccff66; box-shadow: inset 0 0 0 6px rgba(0, 0, 0, 0.2); } .inner-circle { top: 30%; left: 30%; right: 30%; bottom: 30%; background-color: #ffffff; box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2); } 

小提琴

但我无法生成如上图所示的切片。 我的标签将是动态的，切片将根据父级进行更改。