使用html5在餅圖中繪製線段

我有以下繪製餅圖的函數。 pieValues是要繪製的值的集合。 pieTotal是總的所有值的和colors是一個顏色數組填充扇形使用html5在餅圖中繪製線段

function drawPieChart() 
{  
    for (var i = 0; i < pieValues.length; i++) 
    { 
     ctx.fillStyle = colors[i]; 
     ctx.beginPath(); 
     ctx.moveTo(center[0],center[1]); 
     // arc(x, y, radius, startAngle, endAngle, anticlockwise) 
     ctx.arc(center[0],center[1],radius,lastPosition,lastPosition+(Math.PI*2*(pieValues[i]/pieTotal)),false); 
     ctx.lineWidth = 1;  
     ctx.strokeStyle = 'black'; 
     ctx.stroke(); 
     ctx.lineTo(center[0],center[1]); 
     ctx.fill(); 
     lastPosition += Math.PI*2*(pieValues[i]/pieTotal); 

    } 
}

我要繪製從與目的每個分段的線具有對線段的值。

有沒有一種簡單的方法來繪製每一段的線？

來源

2013-03-25 Wesley Skeen

回答是

var fChartY = center[1]; 
var fChartX = center[0]; 

var fChartYTo = fChartY + (radius +20)*Math.sin(lastPosition + .5); 
var fChartXTo = fChartX + (radius +20)*Math.cos(lastPosition + .5);  
drawLine(fChartX, fChartY, fChartXTo, fChartYTo);

與fChartY,fChartX作爲餅圖中心

來源

2013-03-25 16:21:03

使用html5在餅圖中繪製線段

回答

相關問題