纯JS的svg饼图（无框架）

Question

我正在尝试使用纯 javascript 和 svg 圆形元素编写 svg 饼图。我正在使用 stroke-dasharray 属性来显示与数组中存储的值成比例的饼图切片：

var percentList = [50, 35, 15];

这第一步工作正常，但后来我无法尝试根据每个切片的百分比值计算每个切片的旋转角度以防止相互重叠。这是重现问题的图片：

Fiddle : https://jsfiddle.net/Lau1989/r3v3Lkqb/3/

可以看到右侧饼图的绿色切片部分覆盖了蓝色切片，因此看起来小于 50%，尽管它实际上代表了饼图的 50%。（comment/uncomment 要检查的绿色和黄色切片）。

我知道问题出在我用来计算每个切片的旋转角度的 for 循环中，但到目前为止我尝试的所有方法都没有用，我到了我可以做到的地步想不出其他办法了。

for (var c = 0; c < circle_pies.length; c++) {
  sum += percentList[c]; 
  var angle = sum /100 * 360;
  svg_pies[c].style.transform = 'rotate('+(-90+angle)+'deg)';
}

我最近的尝试是添加一个递减 for 循环来跟踪每个切片的所有先前百分比值，但这只会让我的问题更难解决： https://jsfiddle.net/Lau1989/wkbLbnac/

我应该如何调整我的代码以获得正确的旋转角度？

如果您认为不同的方法（例如使用路径）会提供更好的 cross-browser/good 性能解决方案，请告诉我，但无论我最终使用哪种解决方案，我真的很想知道我的问题出在哪里当前代码。

Answer 1

这可能对您有所帮助。

var angle = 180;
for (var c = 0; c < circle_pies.length; c++) {
  svg_pies[c].style.transform = 'rotate('+(-90+angle)+'deg)'; 
  angle = (angle + percentList[c] / 100 * 360) % 360;
}

您可以改变初始角度来改变整个图表的旋转。（您也可以使用值 90 来删除旋转语句中的 -90 +。

您可以在 JSFiddle.

中看到实际效果

纯JS的svg饼图（无框架）

svg pie chart with pure JS (no framework)

javascript

svg

pie-chart