建立循环百分比图
我想构建响应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;
}
获取输出
所需的输出
我认为笔划数组存在问题。
不胜感激。
我已经推荐
3 个答案:
答案 0 :(得分：1)
尝试使用Charty，它会在几秒钟内创建没有一行代码的图表。
答案 1 :(得分：0)
这就是我要这样做的方式：我将笔划破折号动画从50设置为0。
在您的代码中，我更改了stroke-dasharray。在这种情况下，第一个值是笔划的长度，第二个值是间隙的长度。间隙必须足够大，以使笔划仅出现一次。在代码中，我使用100，即周长的值。
您的第一个路径走到最后，因为我希望它位于其他两个路径之上。对于此路径，我使用stroke-dasharray="50,100"的笔触长度为50，间隙为100。
对于我的第一个路径，我使用stroke-dasharray="70,100"为什么是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;
}<div>
<svg viewBox="0 0 36 36" width="150" class="circular-chart">
<path class="that-circle" stroke="#845cee" stroke-dasharray="100,100" 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="75,100" 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="#ffba00" stroke-dasharray="50,100" 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>
答案 2 :(得分：0)
我已经找到了自己的逻辑尝试方法
.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;
}<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="100 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="50 75" 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 100" 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>
**示例1：===>如果我有3个元素50、25、25，我们必须编写从最后一个元素开始的功能**
第三个元素
我们必须将笔划破折号设置为25100
--->其中25是初次尝试时100中的值
第二个元素
我们必须将笔划破折号设置为50 75
->第一个值是50，因为（第2个元素+第3个元素）==> 25 + 25 ==> 50
->第二个值是75，因为（100-第三个元素值）==> 100-25 ==> 75
第一个元素
我们必须将笔划破折号设置为100 50
->第一个值是100，因为（第一个元素+第二个元素+第三个元素）==> 50 + 25 + 25 ==> 100
->第二个值是50，因为（100-（第二个元素+第三个元素值））==> 100-（25 + 25）==> 50
**示例2：===>如果我有4个元素30、20、40、10，我们必须编写功能，以便从最后一个元素开始**
第四个元素
我们必须将笔划破折号设置为10 100
--->其中10是初次尝试时100中的值
第三个元素
我们必须将笔划破折号设置为50 90
--->第一个值是50，因为（第3个元素+第4个元素）==> 40 + 10 ==> 50
->第二个值是90，因为（100-第三个元素值）==> 100-10 ==> 90
第二个元素
我们必须设置笔划破折号70 50
->第一个值是70，因为（第2个元素+第3个元素+第4个元素）==> 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
希望您了解逻辑
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？