如何制作动画svg饼图

Question

我需要用三个值的动画制作一个svg饼图，在代码中找不到我的错误。当我移除setTimeout(function(){circle.setAttribute（“Stroke-Dasharray”，p+“100”）；}，10)；在JavaScript中，饼图看起来不错，但没有动画。当我添加这段代码时，它是动画的，但不是加载所有的值，而是逆时针加载，而不是顺时针加载。我不知道任何javascript，但需要添加两个额外的值到现有的饼图，并使用给定的javascript，我创建了两个额外的圆圈。只有一个圆圈的动画效果很好。我注意到最终结果（动画结束后留下的粉红色馅饼）来自。pie div35中的值，但是如果我将div留空，整个馅饼图就会消失。

HTML
 <div class="widgets">
  <div class="left box stats">
  <div class="content">
  <div class="widget-row">
     <div class="stat stat--pie stat--productivity">
       <div class="pie">35</div>
                              </div>
                            </div>
                        </div>
                    </div>
                </div>

CSS
.box.stats .stat.stat--pie {
  width: 170px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}


.box.stats  .stat.stat--pie .pie {
  position: relative;
  height: 170px;
  width: 170px;
}

.box.stats  .stat.stat--pie .pie > svg {
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
  width: 170px;
  height: 170px;
}

.box.stats  .stat.stat--pie .pie > svg circle {
  -webkit-transition: all 1.2s ease-out;
  -o-transition: all 1.2s ease-out;
  transition: all 1.2s ease-out;
}

.box.stats .content .stat.stat--productivity .pie svg  {
  border-radius: 50%;
}

.box.stats .content .stat.stat--productivity .pie svg circle {
  fill: none;
  stroke: #283250;
  stroke-width: 32;
}

.box.stats .content .stat.stat--productivity .pie svg .circle2 {
  fill: none;
  stroke: #E8E05A;
  stroke-width: 32;
}

.box.stats .content .stat.stat--productivity .pie svg .circle3 {
  fill: none;
  stroke: #E24264;
  stroke-width: 32;
}

JavaScript 
function $$(selector, context) {
context = context || document;
var elements = context.querySelectorAll(selector);
return Array.prototype.slice.call(elements);
}

$$('.stat--productivity .pie').forEach(function(pie) {
  var p = parseFloat(pie.textContent);
  var NS = "http://www.w3.org/2000/svg";
  var svg = document.createElementNS(NS, "svg");
  var circle = document.createElementNS(NS, "circle");
  var circle2 = document.createElementNS(NS, "circle");
  var circle3 = document.createElementNS(NS, "circle");
  var digit = document.createElement("H1");
  var percent = document.createElement("span");


  circle.setAttribute("r", 16);
  circle.setAttribute("cx", 16);
  circle.setAttribute("cy", 16);
  circle.setAttribute("stroke-dasharray", "100 100");
  setTimeout(function(){
  circle.setAttribute("stroke-dasharray", p + " 100");
  }, 10);


  circle2.classList.add('circle2');
  circle2.setAttribute("r", 16);
  circle2.setAttribute("cx", 16);
  circle2.setAttribute("cy", 16);
  circle2.setAttribute("stroke-dasharray", "90 100");
  setTimeout(function(){
    circle2.setAttribute("stroke-dasharray", p + " 100");
  }, 10);

  circle3.classList.add('circle3');
  circle3.setAttribute("r", 16);
  circle3.setAttribute("cx", 16);
  circle3.setAttribute("cy", 16);
  circle3.setAttribute("stroke-dasharray", "50 100");
  setTimeout(function(){
    circle3.setAttribute("stroke-dasharray", p + " 100");
  }, 10);


  svg.setAttribute("viewBox", "0 0 32 32");
  digit.textContent = pie.textContent;
  percent.textContent = '%';
  pie.textContent = '';

  pie.appendChild(svg);
  svg.appendChild(circle);
  svg.appendChild(circle2);
  svg.appendChild(circle3);
  pie.appendChild(digit);
  pie.appendChild(percent);

});

Link to codepen: https://codepen.io/anon/pen/jjRYwR

Answer 1

下面是顺时针展开的多值图表的工作示例：https://jsfiddle.net/bowkugsq/

对原始代码有多处更改，但我试图尽可能多地保留这些更改，以便让OP理解更改并应用于自己的解决方案。

CSS为每个循环枚举了带有索引后缀的类。还有一组用于标签（图例）的类来反映饼图的颜色并进行更多的定制。如果想要在图表中添加下一个片段，则需要再添加一个circle和label类。

$$('.stat--productivity .pie').forEach(function(pie) {
  var percents = pie.textContent.split(",");
  percents = percents.map(function(pct, idx) {
    return {
      value: parseFloat(pct),
      sum: 0,
      idx: idx + 1
    }
  });
  for (var i = 0; i < percents.length; i++) {
    var prevSum = (i > 0) ? percents[i - 1].sum : 1;
    percents[i].sum = prevSum + percents[i].value;
  };
  percents.reverse();
  var NS = "http://www.w3.org/2000/svg";
  var svg = document.createElementNS(NS, "svg");
  pie.textContent = ''; //clear div
  svg.setAttribute("viewBox", "0 0 32 32");
  pie.appendChild(svg);
  percents.forEach(function(pct, idx) {
    var circle = document.createElementNS(NS, "circle");
    circle.classList.add("circle" + pct.idx);
    circle.setAttribute("r", 16);
    circle.setAttribute("cx", 16);
    circle.setAttribute("cy", 16);
    circle.setAttribute("stroke-dasharray", "0 100");
    setTimeout(function() {
      circle.setAttribute("stroke-dasharray", pct.sum + " 100");
    });
    svg.appendChild(circle);
  });
  percents.forEach(function(pct, idx) {
    var digit = document.createElement("span");
    digit.textContent = pct.value + " %";
    digit.classList.add("label" + (idx + 1));
    pie.appendChild(digit);
  });
});