餅圖生成器：僅爲某些值生成不正確的大小/角度

我使用Javascript & SVG圖形制作了一個非常簡單的餅圖生成器。你只需輸入你想要的餅圖的角度，然後點擊按鈕。餅圖生成器：僅爲某些值生成不正確的大小/角度

我的問題：它產生的圖形太大，角度100度，180度&許多其他人。它確實爲角度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>

來源

2012-01-10 Jake M

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

首先，小提琴沒」因爲你的javascript被封裝，但你的內聯點擊處理程序正在尋找一個全局函數。我打開它（見左邊的下拉框），這對於真正的代碼並不是一個好主意，但是在這個例子中很容易解決這個問題。

我也使代碼更短。不確定所有這些功能是什麼用的;如果角度超過圓的一半，唯一需要更改的標誌是large-arc。 sweep標誌是不變的，因爲我們總是在一個方向渲染。我的代碼可以很容易地改進和推廣（你可以以不同的方式處理負面和> 360度的角度，你可以使初始角度不同，等等），但它的工作效果不錯，等等。

來源

2012-01-10 12:38:01 davin

餅圖生成器：僅爲某些值生成不正確的大小/角度

回答

相關問題