Question

您好我正在尝试使用HTML canvas元素创建一个简单的饼图。我在网上找到了一个很好的教程，并开始了解它是如何完成的。

现在我想添加一些文字，我需要知道如何在馅饼中找到每个切片的中心，以便添加文本。

这是循环代码：

    for ( i = 0; i < t.data.length; i++ )
    {
        label = t.data[i].label;
        value = t.data[i].value;
        color = t.data[i].color;

        ctx.lineWidth = t.strokeLineWidth;
        ctx.strokeStyle = "#FFFFFF";
        ctx.fillStyle = color;

        ctx.beginPath();
        ctx.moveTo( centerX, centerY );
        ctx.arc( centerX, centerY, radius, lastEnd, lastEnd + ( Math.PI * 2 * ( value / total ) ), false );
        ctx.lineTo( centerX, centerY );
        ctx.fill();
        ctx.stroke();

        lastEnd += Math.PI * 2 * ( value / total );
    }

Answer 1

简单地将切片视为三角形，即忽略弧。

有许多不同的方法来定义“中心”。看看at the wikipedia article如何做到这一点。您可能想要角度平分线的交集，称为激励。这是内切圆的中心，它为文本提供了最大的空间。

香火的坐标计算如下：

设（x _a，y _a），（x _b，y _b），和（ x _c，y _c）是三角形的三个角的坐标，并且a，b和c是相对边的长度。即，a = ||（x _b，y _b） - （x _c，y _c）|最后，让P = a + b + c。然后中心是

（（ax _a + bx _b + cx _c）/ P，（ay _a + by _b + cy _c）/ P）。

干杯，

Answer 2

数学比我能做的更复杂。您可以尝试使用rgraph库。 http://www.rgraph.net/docs/pie.html

JavaScript：如何获得饼图的中心？

2 个答案: