算法：函數來解析度爲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餅圖

回答

相關問題