算法：函数来解析度为x，y绘制SVG饼图

我正在使用SVG图形绘制饼图。我得到了一个饼图应该是的度数 - 例如277度 - 和直径 - 例如200px - 并且我需要绘制一个277度的圆。算法：函数来解析度为x，y绘制SVG饼图

使用SVG图形我需要解析277度到该圆圈结束的点。

我不是最大的数学，所以我想出了一个公式/ JavaScript函数，可以让我取一个度数值&拿出一个x，y点圈的结束位置。

我的Javascript函数（在底部）会正确解析度到正确的点吗？你能帮我开发我的算法来获得度数值的坐标吗？或者也许有一个我可以使用的，我不知道的现有算法？

我的算法：（我需要的帮助）
所以我给出的数值是：圆直径：200像素，圆圈大小：277度。

我要求点在绕点0,0旋转时结束277点。在第一象限，这意味着我需要使用罪

277结束（是正确的吗？）
所以值I现在三角形的知道有：斜边= 100像素（半径），角= 7度（277-270）。

sin（7）= o/100; 0.1219 = o/100; o = 12.2;
因此在y点是12.2（我的缘故0,0是左上角所以它真的MIDY-X = 100-12.2 = 87.8;？（是正确的）
我们确定在x POS，我使用COS（是正确的吗？）

COS（7）= A/100; 一个= 99.25;
因此在x点为99.25或100-99.25 = 0.75;

所以277度的x，y坐标是0.75,87.8。那是对的吗？

所以在这个代码的算法是：

function resolveToPoint(deg, diameter) 
{ 
    if (deg <= 0) 
     return 0; 

    var x  = 0; 
    var y  = 0; 
    var angle = 0; 
    var rad = diameter/2; 
    var midX = rad; 
    var midY = rad; 

    if (deg <= 90) 
     angle = 90 - deg; 
    else if (deg <= 180) 
     angle = deg - 90; 
    else if (deg <= 270) 
     angle = deg - 180; 
    else if (deg <= 360) 
     angle = deg - 270; 

    // Q: Will I ALWAYS use cos to determine the x & sin for the x NO MATTER what quadrant the angle is in?? 
    x = Math.cos(angle) * rad; 
    y = Math.sin(angle) * rad; 

    if (deg <= 90) 
    { 
     x = midX + x; 
     y = midY - y; 
    } 
    else if (deg <= 180) 
    { 
     x = midX + x; 
     y = midY + y; 
    } 
    else if (deg <= 270) 
    { 
     x = midX - x; 
     y = midY + y; 
    } 
    else if (deg <= 360) 
    { 
     x = midX - x; 
     y = midY - y; 
    } 

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

那我就用它在SVG像这样：如果你考虑在单位圆

function outputPiegraph(point, rad, diameter) 
{ 
    var svg = '<svg width="%spx" height=""%spx" id='pie' style="background-color: green;"> 
    <path d="M%spx,%spx L%spx, %spx A%spx,"%spx 1 1,1 %spx,%spx z" 
    fill="red" stroke="blue" stroke-width="2" />" 
</svg>'; 


    return sprintf(svg, diameter, diameter, point.mX, point.mY, rad, rad, rad, diameter); 
}

来源

2012-01-09 Jake M

饼图几乎总是一个坏主意。改用条形图。 http://4dpiecharts.com/2010/08/20/hello-world/ – 2012-01-09 23:51:19

这很简单转换，从极地到笛卡尔坐标：

function resolveToPoint(deg, diameter) { 
    var rad = Math.PI * deg/180; 
    var r = diameter/2; 
    return {mX: r * Math.cos(rad), mY: r * Math.sin(rad)}; 
}

http://en.wikipedia.org/wiki/Polar_coordinates#Converting_between_polar_and_Cartesian_coordinates

来源

2012-01-09 23:50:04

我需要分别将cos和sin更改为Math.cos和Math.sin才能使其运行... – yochannah 2013-06-14 13:50:00

，然后将X坐标对于给定（基于弧度）的角度由余弦给出，同样，Y坐标由正弦给出。所以，你可以轻松解决这个问题，如下所示。

function resolveToPoint(deg, diameter) { 
    var radians = angle_in_degrees/180 * Math.PI; 
    var x = diameter/2 * cos(radians); 
    var y = diameter/2 * sin(radians); 

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

来源

2012-01-09 23:40:51 Itkovian

算法：函数来解析度为x，y绘制SVG饼图

回答

相关问题