尝试使用Charty，它可以在几秒钟内创建图表，而无需单行代码。
根据您的要求，尝试此链接，https://charty.live/charts?chtype=doughnutpie&chl=mon,tue,sdf,lkjls,23,LKS&chd=10,9,98,76,23,23,45,65,09,89,78.3&acid=1234&token=5e5ed276f04b0cb0d713a5213f185e1105c83bdd9026076e81e313bb6d94c279

我已经找到了一种方法与我自己的逻辑尝试

.circular-chart {
  display: block;
  margin: 5% auto;
  max-width: 80%;
  max-height: 240px;
  margin-bottom: 15%;
}
.that-circle {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  animation: progress 1s ease-out forwards;
  box-shadow: 0 8px 25px 0 #e5e5e5;
}
@keyframes progress {
  0% {
    stroke-dasharray: 0 100;
  }
}

.percentage {
  fill: #4285f4;
  font-size: 0.375em;
  text-anchor: middle;
  font-family: AvenirNext;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: 1;
  letter-spacing: normal;
}
.percentage_done {
  fill: #9b9b9b;
  font-size: 0.2em;
  font-family: AvenirNext;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.1px;
}

个字符

示例1：===>如果i有3个元素50，25，25，我们必须编写函数，使得从最后一个元素

第三元素
我们必须将行程设置为25 100
->其中25是第一次尝试时的值，满分为100
第二元素
我们必须设置行程dasharray 50 75
-->第一个值是50，因为（2nd元素+ 3rd元素）==> 25 + 25 ==> 50
-->第二个值是75，因为（100 -第三个元素值）==> 100-25 ==> 75
第一元素
我们必须设置冲程-dasharray 100 50
-->第一个值是100，因为（1st元素+ 2nd元素+ 3rd元素）==> 50 + 25 + 25 ==> 100
-->第二个值是50，因为（100 -（第二个元素+第三个元素值））==> 100-（25 + 25）==> 50

示例2：=>如果i有4个元素30，20，40，10，我们必须编写函数，使得从最后一个元素

第四元素
我们必须设置冲程-dasharray 10 100
--->其中10是第一次尝试时的值，满分为100
第三元素
我们必须设置行程-dasharray 50 90
->第一个值是50，因为（第三个元素+第四个元素）==> 40 + 10 ==> 50
-->第二个值是90，因为（100 -第三个元素值）==> 100-10 ==> 90
第二元素
我们必须设置冲程-dasharray 70 50
-->第一个值是70，因为（第二个元素+第三个元素+第四个元素）==> 20 + 40 + 10 ==> 70
-->第二个值是50，因为（100 -（第三个元素值+第四个元素））==> 100 -（40+10）==> 50
第一元素
我们必须设置冲程达沙雷100 30
-->第一个值是100，因为（第一个元素+第二个元素+第三个元素+第四个元素）==> 30+ 20 + 40 + 10 ==> 100
-->第二个值是30，因为（100 -（第二个元素+第三个元素+第四个元素值））==> 100-（20 + 40 + 10）==> 30
我希望你能理解这个逻辑

这就是我要做的：我会将stroke-dashoffset从50设置为0。
在你的代码中，我改变了笔画-dasharray。在这种情况下，第一个值是笔画的长度，第二个值是差距的长度。差距必须足够大，以便笔画只出现一次。在代码中，我使用100，周长的值。
第一条路径放在最后，因为我希望它在其他两条路径之上。对于这条路径，我使用stroke-dasharray="50,100"，笔划的长度为50，差距为100。
对于第一条路径，我使用stroke-dasharray="70,100" Why 75？50+25 = 75。前50个单位位于下一条路径下。只有25个单位将保持可见。
最后一个路径先走，这个路径的stroke-dasharray="100,100".75单元现在在前面的路径下面。
我希望这是你需要的。

svg{border:1px solid}
.circular-chart {
  display: block;
  margin: 5% auto;
  max-width: 80%;
  max-height: 240px;
  margin-bottom: 15%;
}
.that-circle {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dashoffset:50;
  animation: progress 1s ease-out forwards;
  box-shadow: 0 8px 25px 0 #e5e5e5;
}
@keyframes progress {
  100% {
    stroke-dashoffset: 0;
  }

}

.percentage {
  fill: #4285f4;
  font-size: 0.375em;
  text-anchor: middle;
  font-family: AvenirNext;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: 1;
  letter-spacing: normal;
}
.percentage_done {
  fill: #9b9b9b;
  font-size: 0.2em;
  font-family: AvenirNext;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.1px;
}

个字符

.circular-chart {
  display: block;
  margin: 5% auto;
  max-width: 80%;
  max-height: 240px;
  margin-bottom: 15%;
}
.that-circle {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  animation: progress 1s ease-out forwards;
  box-shadow: 0 8px 25px 0 #e5e5e5;
}
@keyframes progress {
  0% {
    stroke-dasharray: 0 100;
  }
}

.percentage {
  fill: #4285f4;
  font-size: 0.375em;
  text-anchor: middle;
  font-family: AvenirNext;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: 1;
  letter-spacing: normal;
}
.percentage_done {
  fill: #9b9b9b;
  font-size: 0.2em;
  font-family: AvenirNext;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.1px;
}

个字符