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

Question

我正在使用HTML canvas元素和fillText()编写带有vanilla JavaScript的圆环饼图，以将标签放在图表上。 我很难将标签放在图表的外面，而且它们会被画布的宽度切断。 这是一个有问题的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 - 标签距离标签的距离
  饼图的边缘（以像素为单位）。

为了测量文本，我使用了canvas 2d context API的measureText函数。 这就是为什么字体和文本大小也设置在饼图的构造函数的开头

完整的代码可以在这里找到： https ： //codepen.io/prtjohanson/pen/bZgQmY