英文:
Pure svg pie chart, text align center
问题
将值文本放在每个饼图内部而不使用d3.js框架。
我尝试使用一些JavaScript来获取宽度。这是默认值
getBBox()); // 获取SVG宽度。
我使用stroke-dasharray来扩展饼图的空间。
我可以从JavaScript中获取正确的stroke-dasharray大小的方法是什么？
英文:
How to place the value text inside each pie chart without framework d3.js.
i have tried using some javascript to get the width. It is the default
getBBox()); // get the SVG width.
I use stroke-dasharray to expand the pie space.
Which way i can get the correct stroke-dasharray size from javascript?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
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;}
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
<div class="image"style="background-color: blue; height:300px; width:300px; position: absolute; left:50%; top:50%; transform:translate(-50%, -50%); border-radius: 50%;"></div>
答案1
得分: 3
你不能。getBBox() 获取形状的边界。在你的情况下，形状是以图形中心为中心的圆形。你需要使用三角函数来计算文本的位置。
英文:
You can't. The getBBox() gets the bounds of the shape. In your case, the shapes are circles centred on the middle of the graph. You would need to use trigonometry to calculate the position for your text.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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);
}
<!-- language: lang-css -->
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;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
BTW, that approach for doing pie graphs works most of the time. And may be alright for your case. But in general it is not recommended. Some browsers have trouble rendering circles drawn that way. You might want to consider switching to drawing proper circular sectors.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论