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

我正在使用HTML画布元素和

fillText（）

将标签放在图表上，用香草JavaScript编写一个甜甜圈饼图。我很难把标签放在图表的外侧，它们被画布的宽度切断了。这是一个问题的答案

以下是实际将标签打印到图表的代码片段：

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

所需定位：

---

这是一个简单的例子，了解一些三角函数和画布文本API

我使用各个切片中心角度的cos和sin值来设置文本的水平和垂直对齐，如下所示：

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

此外，我还向piechart构造函数添加了两个选项：

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

        labelDistanceFromOuterEdge: 5,
        roomForLabels: 65,
    });

• roomForLabels-告诉您要为标签保留多少空间
  以像素为单位显示在饼图外部。如果有宽度 标签不适合画布，此值将增加以适应 它

• labelDistanceFromOuterEdge-标签与外部设备的距离
  饼图的边缘（以像素为单位）

为了测量文本，我使用了Canvas2D上下文API的measureText函数。这就是为什么字体和文本大小也设置在Piechart构造函数的开头

完整代码可在此处找到：

---

好极了！唯一的一件事是，当标签中有更多信息时，标签会被切断：修复了这一点，现在它会自动调整roomForLabels选项，如果给@cWeave的标签没有足够的空间，它只修复了另一个小错误，自动调整没有考虑labelDistanceFromOuterEdge选项-将其设置为高可能仍会使一些文本越过画布边缘，现在无法@cweave