计算SVG甜甜圈切片标签位置服务器端 [英] Calculating SVG donut slice label position server side

问题描述

如何计算切片文本标签，将其直接放置在 svg甜甜圈图中切片的中心?

How can I calculate a slice text label to be positioned directly in the center of a slice in an svg donut chart?

我有一个在服务器端生成的svg甜甜圈图.我已经正确实现了图表的切片，但是在弄清楚将每个单独的切片标签放置在其相应切片的中心内的数学方法时遇到了一些麻烦.标签将是它所占切片的百分比.

I have an svg donut chart that is generated server side. I have the slices of the chart correctly implemented but I'm having some trouble figuring out the math to place each individual slice label inside the center of it's respective slice. The label will be the percentage of the slice it occupies.

这是svg的精简版.

<svg width="100%" height="100%" viewBox="0 0 42 42">
  <circle cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#d2d3d4" stroke-width="3" />
  <circle
    cx="21"
    cy="21"
    r="15.91549430918954"
    fill="transparent"
    stroke="#b1c94e"
    stroke-width="3"
    stroke-dasharray="25 75"
    stroke-dashoffset="25"
  />
  <!-- How do I calculate x and y so the text is in the center of the above slice. -->
  <text x="80%" y="30%" font-size="6" text-anchor="middle">25%</text>
</svg>

这是svg的jsfiddle. https://jsfiddle.net/xgyzvnka/

Here's a jsfiddle of the svg. https://jsfiddle.net/xgyzvnka/

推荐答案

这就是我的方法.请更改perc的值.请阅读我的代码中的注释.

This is how I would do it. Please change the value of the perc. Please read the comments in my code.

let r = 16;//circles radius
let perc = .15//percentage
//the angle used to draw the circle
let angle = 2*Math.PI * perc;
// the circle's circumference
let totalLength = base.getTotalLength();
//the length of the dash 
let length_perc = totalLength * perc;
//the length of the gap
let difference = totalLength * (1 - perc);

test.setAttributeNS(null,"stroke-dasharray",length_perc+", "+difference);
//rotate backwards 90degs. The center of rotation is the center of the circle; 21,21
test.setAttributeNS(null,"transform","rotate(-90,21,21)");

//the point where to draw the circle
let textPoint = {x:21 + r * Math.cos((angle - Math.PI)/2),
                 y:21 + r * Math.sin((angle - Math.PI)/2)}
text.setAttributeNS(null,"x",textPoint.x);
text.setAttributeNS(null,"y",textPoint.y);
//the text
text.textContent = perc * 100 + "%";

text{text-anchor:middle; dominant-baseline:middle;}
svg{width:90vh;}

<svg viewBox="0 0 42 42">
  <circle id="base" cx="21" cy="21" r="16" fill="transparent" stroke="#d2d3d4" stroke-width="3" />
  <circle id="test"
    cx="21"
    cy="21"
    r="16"
    fill="transparent"
    stroke="#b1c94e"
    stroke-width="3"
  />

  <text id="text"  font-size="6" text-anchor="middle"> </text>
</svg>

这篇关于计算SVG甜甜圈切片标签位置服务器端的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！