javascript - Chartjs 甜甜圈图圆角半甜甜圈

Question

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

我可以通过参考下面的代码笔中显示的这个很好的答案来实现一个完整的循环

带圆边的全圆codepen here

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

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

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

问题代码笔在这里

我怎样才能解决这个问题。请帮忙。我被困住了。谢谢

Answer 1

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

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

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