Chartjs甜甜圈图圆角的一半

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/