Chartjs 甜甜圈图圆角半甜甜圈 [英] Chartjs doughnut chart rounded corners for half doghnut

问题描述

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

I am using chartJS library for one of my projects and I need to draw a doughnut chart. The doughnut chart needs to be a half circle and the sections in it needs to have rounded edges, something like shown below

我可以通过引用 this 很好的答案，如下面的代码笔所示

I could achieve the same for a full circle by referencing this great answer as shown in the codepen below

此处为带圆角的全圆编码笔

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

But if I change the options to draw a half circle with following options

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

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

then the calculations seems to go wrong somewhere and the arc circles are placed randomly as shown below

问题代码笔在这里

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

How can i fix this. Please help. I am stuck. Thanks

推荐答案

您应该将 y 平移更改为 2:

You should change y translation by factor of 2:

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

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

这篇关于Chartjs 甜甜圈图圆角半甜甜圈的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！