如何在React中使用半甜甜圈图制作进度图

Question

我正尝试使用以下图表创建进度表。

这里的要求是边缘的两个点需要弯曲（这里的蓝色和灰色边缘是圆形的），而中间的蓝色不是圆形的。

我尝试了多种使用图表的方法。我在图表中使用了RadialCharts，但如果使用cornerRadius道具，则蓝色条的两个边缘都是弯曲的。但是我只希望一个边缘弯曲。可以在下面的fiddle

中看到

<RadialBarChart width={200} height={200} data={data}
  endAngle={0}
  innerRadius={20}
  outerRadius={20}
  startAngle={180}>

  <PolarAngleAxis
            type="number" start domain={[0, 100]} dataKey={'pct'} angleAxisId={0} tick={false} />
    <RadialBar background dataKey="pct" angleAxisId={0}
    />
</RadialBarChart>

我对使用任何制图库的解决方案持开放态度。这可以是在React中使用<svg>标签的

吗？