纯 svg 饼图，文本居中对齐答案

【问题标题】：Pure svg pie chart, text align center纯 svg 饼图，文本居中对齐
【发布时间】：2020-01-07 02:17:07
【问题描述】：

如何在没有框架d3.js的情况下将值文本放置在每个饼图中。

我尝试使用一些 javascript 来获取宽度。这是默认的

getBBox()); // get the SVG width.

我使用 stroke-dasharray 来扩展饼图空间。

我可以通过哪种方式从 javascript 中获取正确的 stroke-dasharray 大小？

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>

【问题讨论】：

标签： svg text pie-chart

【解决方案1】：

你不能。 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>

顺便说一句，这种制作饼图的方法在大多数情况下都有效。并且可能适合您的情况。但一般不推荐。某些浏览器无法渲染以这种方式绘制的圆圈。您可能需要考虑切换到绘制适当的圆形扇区。

【讨论】：

不是某些浏览器，而是某些操作系统上的某些浏览器。 Firefox 适用于某些操作系统，不适用于其他操作系统。也可能取决于显卡。
酷。三角学！其他，提醒一些浏览器没有得到支持。谢谢保罗。
@Wilker 我所说的“像这样的麻烦渲染圆圈”的意思是：当笔画宽度使得整个圆圈的笔画内侧在一个点重合时（圆圈），有时在该位置可以看到怪异。特别是当圆圈被放大到很大时，因此，如果可能的话，建议避免这样做。