甜甜圈图表香草JS和HTML画布

Question

I am writing a doughnut pie chart with vanilla JavaScript using the HTML canvas element and fillText() to put the labels on the chart. I'm having a hard time positioning the labels on the outside of the chart, and they're getting cut off by the width of the canvas. Here's a working Codepen of the issue.

Here is the snippet of the code that actually prints out the labels to the chart:

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

Desired positioning:

Answer 1

This is a simple case of knowing some trigonometry and the canvas text API.

I used the cos and sin values from the angle of the center of the respective slice to set the horizontal and vertical alignment of the text, like so:

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

Furthermore I added two more options to the piechart costructor:

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

        labelDistanceFromOuterEdge: 5,
        roomForLabels: 65,
    });

• roomForLabels - tells how much room to reserve for the labels
  displayed outside of the pie chart in pixels. If the width of any label won't fit in the canvas, this value is increased to accommodate it.

• labelDistanceFromOuterEdge - How far away the labels are from the
  edge of the pie chart in pixels.

To measure the text, I used the measureText function of the canvas 2d context API. That is why the font and text size is also set at the beginning of the constructor of the Piechart

The full code can be found here: https://codepen.io/prtjohanson/pen/bZgQmY