甜甜圈图香草JS和HTML画布

Question

我正在使用HTML画布元素和Resolved exception caused by handler execution: org.springframework.dao.InvalidDataAccessApiUsageException: Parameter value [2018-05-10] did not match expected type [java.util.Date (n/a)];用香草JavaScript编写一个甜甜圈饼图，并将标签放在图表上。我很难将标签放置在图表的外部，并且它们被画布的宽度切断了。这是问题的working Codepen。

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

fillText()

所需定位：

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上下文API的measureText函数。这就是为什么在Piechart的构造函数的开头也设置了字体和文本大小的原因

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