创建圆弧超过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度角的弧时，一些有用的技巧将不胜感激！

Answer 1

如果角度> 180，则需要将largeArc标志设置为1。

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