双/堆叠圆环图 - 弧之间的半透明边框

Question

我想用JS / CSS中的半透明边框/间距来实现以下图示：

据我所知，我找到了一个使用Chart.JS库的简单解决方案。我添加了多个数据集，配置了自定义边框颜色和自定义边框宽度以获得正确的间距。

我不知道，如何删除边框颜色并设置半透明边框。 rgba（x，y，z，0）不起作用，因为它会删除边框本身。此外，顶环还具有（不需要的）边界。有人对Chart.JS或其他库的解决方案有任何建议吗？

    var config = {
     type: 'doughnut',
     data: {
       datasets: [{
         data: [..],
         backgroundColor: [...],
         borderColor: "rgba(0,0,0,1)",
         borderWidth: 10
       }, {
         data: [...],
         backgroundColor: [...],
         borderColor: "rgba(0,0,0,1)",
         borderWidth: 10       }],
       labels: [...]
     },
     options: {...}
   };

https://jsfiddle.net/zrdd4ur8/

更新1

我能够在没有任何边框的情况下确定外圈和内圈之间的间距，如下图所示。为此，您需要在第9876行周围修改Chart.js的来源。它应如下所示：

 draw: function() {

 var ctx = this._chart.ctx,
     vm = this._view,
     sA = vm.startAngle,
     eA = vm.endAngle;

 ctx.beginPath();

 // here I set a 10px spacing
 ctx.arc(vm.x, vm.y, vm.outerRadius - 10, sA, eA);
 ctx.arc(vm.x, vm.y, vm.innerRadius + 10, eA, sA, true);

 // console.log(vm.backgroundColor);
 // console.log("X: " + vm.x + " Y: " + vm.y + " Outer: " + vm.outerRadius + " Inner: " + vm.innerRadius + " sA: " + sA + " eA: " + eA)

 ctx.closePath();
 ctx.strokeStyle = vm.borderColor;
 ctx.lineWidth = vm.borderWidth;

 ctx.fillStyle = vm.backgroundColor;

 ctx.fill();
 ctx.lineJoin = 'bevel';


 if (vm.borderWidth) {
     ctx.stroke();
 }
 }

我确信这里也可以实现弧之间的间距。但是我的数学目前还不够好。