html - 构建圆形百分比图表

Question

我想建立响应SVG圆形图表，我已经在一定程度上成功了。

HTML

<div>
            <p class="Project_Analytics_Heading text-center">
                Time per Application
            </p>
            <svg viewBox="0 0 36 36" class="circular-chart">

                <path class="that-circle" stroke="#ffba00" stroke-dasharray="50" d="M18 2.0845
                                a 15.9155 15.9155 0 0 1 0 31.831
                                a 15.9155 15.9155 0 0 1 0 -31.831" />

                <path class="that-circle" stroke="#ff4858" stroke-dasharray="25" d="M18 2.0845
                                a 15.9155 15.9155 0 0 1 0 31.831
                                a 15.9155 15.9155 0 0 1 0 -31.831" />

                <path class="that-circle" stroke="#845cee" stroke-dasharray="25" d="M18 2.0845
                                a 15.9155 15.9155 0 0 1 0 31.831
                                a 15.9155 15.9155 0 0 1 0 -31.831" />

                <text x="18" y="20.35" class="percentage">50%</text>
                <text x="13" y="25" class="percentage_done">iOS</text>

            </svg>
        </div>

CSS

.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;
}

获取输出

期望的输出

我认为中风破折号数组存在问题。

非常感谢您的评论。

我已推荐

https://medium.com/@pppped/how-to-code-a-responsive-circular-percentage-chart-with-svg-and-css-3632f8cd7705

Answer 1

尝试使用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