JavaScript: Как получить центр кусочка пирога?

Question

Привет. Я пытаюсь создать простую круговую диаграмму, используя элемент HTML-холста. Я нашел хороший учебник в Интернете и начал изучать, как это делается.

Теперь я хочу добавить текст, и мне нужно знать, как найти центр каждого среза в круговой области, куда можно добавить текст.

Вот код цикла:

    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

Просто рассматривайте срезы как треугольники, т.е. игнорируйте дугу.

Существует множество разных способов определения «центра».Посмотрите на статью в Википедии о том, как это сделать.Вы, вероятно, захотите пересечение угловых биссектрис, которое называется стимул .Это центр вписанного круга, и он дает наибольшее пространство для текста.

Координаты стимулятора рассчитываются следующим образом:

Let (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.Тогда центр будет

((топор _a + bx _b + cx _c ) / P, (ay _a + _b + cy _c ) / P).

Приветствия,

Answer 2

Математика сложнее, чем я могу сделать быстро.Вы можете попробовать библиотеку rgraph.http://www.rgraph.net/docs/pie.html