Chart Js 甜甜圈图圆角半甜甜圈

Question

我正在为我的一个项目使用 chartJS 库，我需要绘制一个圆环图。圆环图需要是一个半圆，其中的部分需要有圆角，如下图所示

我可以通过引用this 很好的答案来实现一个完整的循环，如下面的代码笔所示

Full circle with rounded edges codepen here

但如果我更改选项以使用以下选项绘制半圆

rotation: 1 * Math.PI,
circumference: 1 * Math.PI,

然后计算似乎在某处出错，圆弧随机放置如下所示

Problem Code pen here

我该如何解决这个问题。请帮忙。我被困住了。谢谢

Answer 1

您应该将 y 平移更改 2 倍：

ctx.translate(arc.round.x, arc.round.y*2);

http://jsfiddle.net/alonas/kx6rjy07/