创建饼图时如何使部分弧度大于180度

Question

我正在使用这里提供的代码http://jbkflex.wordpress.com/2011/07/28/creating-a-svg-pie-chart-html5/来创建一个饼图。但问题是，如果我将某些值替换为0或赋予较大的值，则角度将超过180度，图表看起来很奇怪，如fiddle所示。 弧线的x2和y2值在此处给出。

    x2 = parseInt(200 + 180 * Math.cos(Math.PI * endAngle / 180), 10);
    y2 = parseInt(200 + 180 * Math.sin(Math.PI * endAngle / 180), 10);

有什么改进的地方吗？欢迎分享一些创建180度以上角度弧形的实用技巧！

- P Kero

Answer 1

如果角度大于180度，您需要将largeArc标志设置为1。请按以下方式更改您的fiddle...

var d = "M200,200  L" + x1 + "," + y1 + "  A180,180 0 " + ((endAngle - startAngle > 180) ? 1 : 0) + ",1 " + x2 + "," + y2 + " z"; //1 means clockwise

- Robert Longson

---

谢谢！一如既往地准确解决了问题，@Robert Longson！ - P Kero