Question

我使用Javascript＆amp; amp;创建了一个非常简单的Pie Graph生成器。 SVG图形。您只需输入所需饼图的角度，然后单击按钮。

我的问题：它生成的图形对于100度，180度和100度的角度来说太大了。很多其他的。它确实为角度277生成了正确的饼。对于像180这样应该是半圆的角度，由于某种原因它会显示270度的饼。

我的简单算法错误导致错误的饼形/值？

JSFiddle在这里（出于某种原因，JSFiddle不会更新，但是如果你复制下面的HTML一切都有效）：http://jsfiddle.net/mabg3/1/

<html>
<head>
    <script type="text/javascript">
    <!--
function createPieGraph()
{
   var angle    = parseInt(document.getElementById("angleVal").value, 10);
   var path     = document.getElementById("pie"); //document.createElement("path");
   var diameter = 200
   var rad      = diameter/2;
   var point    = resolveToPoint(angle, diameter);
   var d        = "M"+diameter+","+diameter+" L"+point.mX+","+point.mY+" A"+rad+","+rad+" "+determineDisplayType(angle)+" "+determineArcEnd(angle, diameter, rad)+" z";
   path.setAttribute("d", d);
}

function resolveToPoint( /*int*/ deg, /*int*/ diameter ) 
{
   var rad  = Math.PI * deg / 180;
   var r    = diameter / 2;
   var x    = r * Math.cos(rad);
   var y    = r * Math.sin(rad);
   var midX = diameter;
   var midY = diameter;

   if (deg <= 90)
   {
      console.log("1");
      x = midX + x;
      y = midY - y;
   }
   else if (deg <= 180)
   {
      console.log("2");
      x = midX + x;
      y = midY + y;
   }
   else if (deg <= 270)
   {
      console.log("3");
      x = midX - x;
      y = midY + y;
   }
   else if (deg <= 360)
   {
      console.log("4");
      x = midX - x;
      y = Math.abs(y);
   }

   return {mX: x, mY: y};
}

function determineDisplayType( /*int*/ deg )
{
   if (deg <= 90)
      return "0 0,0";
   else if (deg <= 180)
      return "0 1,0";
   else if (deg <= 270)
      return "0 1,0";
   else if (deg <= 360)
      return "1 1,1";

   return "0 0,0";
}

function determineArcEnd( /*int*/ deg, /*int*/ diameter, /*int*/ rad )
{
   if (deg >= 270)
      return ""+rad+","+diameter;

   return ""+diameter+","+rad;
}
    -->
    </script>
</head> 
<body>

    <svg id="main" width="400" height="400" style="background-color: red;">
        <path id="pie" fill="blue" stroke="white"></path>
    </svg>

    <input type="text" id="angleVal" value="Enter angle"></input>
    <input type="button" onclick="createPieGraph();" value="Show Pie Graph"></input>
</body></html>

Answer 1

http://jsfiddle.net/mabg3/11/

首先，小提琴不起作用，因为你的javascript被包装，但你的内联点击处理程序正在寻找一个全局函数。我打开它（参见左边的下拉框），这对于真正的代码来说不是一个好主意，但在这个例子中很容易解决问题。

我还使代码更短。不确定所有这些功能的用途;如果角度大于圆的一半，则唯一需要更改的标志是large-arc。 sweep标志是常量，因为我们始终以一个方向呈现。

我的代码可以很容易地改进和推广（你可以不同地处理负角度和> 360度角，你可以使初始角度不同，等等），但它运作良好。

饼图生成器：仅对某些值生成不正确的大小/角度

1 个答案: