Кольцевая диаграмма Vanilla JS и HTML Canvas

Question

Я пишу кольцевую круговую диаграмму с ванильным JavaScript, используя элемент HTML-холста и fillText(), чтобы разместить метки на диаграмме.Мне трудно расположить надписи на внешней стороне графика, и они обрезаются по ширине холста.Вот рабочий Codepen проблемы.

Вот фрагмент кода, который фактически распечатывает метки награфик:

start_angle = 0;            
for (categ in catergories) {
    let categoryLabel = categ;
    val = catergories[categ];
    let slice_angle = 2 * Math.PI * val / total_value;
    let pieRadius = Math.min(this.canvas.width / 2,this.canvas.height / 2);
    let labelX = this.canvas.width / 2 + (pieRadius / 2) * Math.cos(start_angle + slice_angle / 2);
    let labelY = this.canvas.height / 2 + (pieRadius / 2) * Math.sin(start_angle + slice_angle / 2);

    if (this.options.doughnutHoleSize){
        let offset = (pieRadius * this.options.doughnutHoleSize ) / 2;
        labelX = this.canvas.width / 2 + (offset + pieRadius / 2) * Math.cos(start_angle + slice_angle / 2);
        labelY = this.canvas.height / 2 + (offset + pieRadius / 2) * Math.sin(start_angle + slice_angle / 2);               
    }

    this.ctx.fillStyle = "black";
    this.ctx.font = "bold 11px Arial";
    this.ctx.fillText(`${categoryLabel} ${val}`, labelX, labelY);
    start_angle += slice_angle;
}

Желаемое позиционирование:

Answer 1

Это простой случай знания некоторой тригонометрии и API текста холста.

Я использовал значения cos и sin от угла центра соответствующего среза, чтобы установить горизонтальное и вертикальное выравниваниетекст, например:

    this.ctx.textAlign = cos > 0 ? 'start' : 'end';
    this.ctx.textBaseline = sin > 0 ? 'top' : 'bottom';

Кроме того, я добавил еще два параметра в конструктор круговой диаграммы:

    const monthlyPaymentChart = new Piechart({
        canvas: canvas,
        data: paymentInformation,
        colors: pieChartColors,
        doughnutHoleSize: 0.85,

        labelDistanceFromOuterEdge: 5,
        roomForLabels: 65,
    });

• roomForLabels - сообщает, сколько места нужно зарезервировать дляметки
  отображаются вне круговой диаграммы в пикселях.Если ширина какого-либо ярлыка не помещается на холсте, это значение увеличивается, чтобы вместить его.

• labelDistanceFromOuterEdge - как далеко метки находятся от края
  круговая диаграмма в пикселях.

Для измерения текста я использовал функцию measureText API-интерфейса canvas 2d context.Вот почему шрифт и размер текста также задаются в начале конструктора Piechart

Полный код можно найти здесь: https://codepen.io/prtjohanson/pen/bZgQmY