纯SVG饼图，文本居中对齐 [英] Pure svg pie chart, text align center
本文介绍了纯SVG饼图，文本居中对齐的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何在没有框架D3.js的情况下将值文本放置在每个饼图中。
我已经尝试使用一些Java脚本来获取宽度。这是默认设置
getBBox()); // get the SVG width.
我使用笔划dasharray来扩展饼空间。
我可以通过哪种方式从Java脚本中获取正确的笔划划线大小？
数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">figure {
background-color: #eee;
display: block;
height: 0;
margin: 0 auto;
position: relative;
font-size:16px;
font-size:1vw;
width: 40em;
padding-bottom: 40em;
}
svg {
display: block;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
overflow: visible;
}
circle {
fill:transparent;
stroke-width:31.8309886184;
stroke-dasharray: 0,0,0,100;
stroke-dashoffset: 25;
animation: pie1 4s ease both;
}
.pie1 {
stroke:pink;
}
.pie2 {
stroke: green;
-webkit-animation-name: pie2;
animation-name: pie2;
}
.pie3 {
stroke: aqua;
-webkit-animation-name: pie3;
animation-name: pie3;
}
@keyframes pie1 {
50%,100% {stroke-dasharray: 40,60,0,0;}
}
@keyframes pie2 {
50%,100% {stroke-dasharray: 0,40,30,30;}
}
@keyframes pie3 {
50%,100% {stroke-dasharray: 0,70,30,0;}
}<body>
<figure>
<svg class="chart" viewBox="0 0 63.6619772368 63.6619772368">
<circle class="pie1" cx="31.8309886184" cy="31.8309886184" r="15.9154943092" />
<circle class="pie2" cx="31.8309886184" cy="31.8309886184" r="15.9154943092" />
<circle class="pie3" cx="31.8309886184" cy="31.8309886184" r="15.9154943092" />
</svg>
</figure>
</body>推荐答案
不能。getBBox()获取形状的边界。在您的例子中，形状是以图形中心为中心的圆圈。您需要使用三角函数来计算文本的位置。
makeLabel('Pink', 340, 15.9);
makeLabel('Green', 110, 15.9);
makeLabel('Cyan', 210, 15.9);
function makeLabel(text, angle, radius)
{
const chart = document.getElementById("chart");
const label = document.createElementNS(chart.namespaceURI, "text");
label.classList.add("label");
label.setAttribute("x", 31.83 + Math.cos(angle * Math.PI/180) * radius);
label.setAttribute("y", 31.83 + Math.sin(angle * Math.PI/180) * radius);
label.textContent = text;
chart.appendChild(label);
}figure {
background-color: #eee;
display: block;
height: 0;
margin: 0 auto;
position: relative;
font-size:16px;
font-size:1vw;
width: 40em;
padding-bottom: 40em;
}
svg {
display: block;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
overflow: visible;
}
circle {
fill:transparent;
stroke-width:31.8309886184;
stroke-dasharray: 0,0,0,100;
stroke-dashoffset: 25;
animation: pie1 4s ease both;
}
.pie1 {
stroke:pink;
stroke-dasharray: 40,60,0,0;
}
.pie2 {
stroke: green;
stroke-dasharray: 0,40,30,30;
}
.pie3 {
stroke: aqua;
stroke-dasharray: 0,70,30,0;
}
.label {
font: 3px sans-serif;
text-anchor: middle;
}<body>
<figure>
<svg id="chart" class="chart" viewBox="0 0 63.6619772368 63.6619772368">
<circle class="pie1" cx="31.8309886184" cy="31.8309886184" r="15.9154943092" />
<circle class="pie2" cx="31.8309886184" cy="31.8309886184" r="15.9154943092" />
<circle class="pie3" cx="31.8309886184" cy="31.8309886184" r="15.9154943092" />
</svg>
</figure>
</body>这篇关于纯SVG饼图，文本居中对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
