html - 使用 html5 在饼图中绘制线段

Question

我有以下绘制饼图的函数。pieValues是要绘制的一组值。pieTotal是所有值的总和，colors是填充饼图段的颜色数组

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);

    }
}

我想从每个段中画一条线，目的是使该段的值在线上。

有没有一种简单的方法可以在每个段上画一条线？

Answer 1

答案是

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作为饼图的中心