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

使用html5在饼图中绘制线段

1 个答案: