Javascript 如何在css中绘制可配置的饼图

从链接

我正在寻找一个快速的解决方案，使饼图与css。我不知道css的深层实现

我很快就做了小提琴：

var setButti=函数（n，p，f）{
var总计=n+p+f；
var atrs={'tc passed'：p*360/total，'tc failed'：f*360/total，'tc ne'：n*360/total}；
var butti=$（“#buttiEl”）；
html（“”）；
for（atrs中的var键）{
$（'.piecondground'，butti.append（''）。
css（'-webkit transform'，'rotate（'+atrs[key]+'deg'））。
css（'-moz transform'，'rotate（'+atrs[key]+'deg'））。
css（'-o-transform'，'rotate（'+atrs[key]+'deg'））。
css（“变换”、“旋转”（“+atrs[键]+”度）”）；
}
};
塞布蒂（1,1,1）；

但它并没有显示饼图，它只是一个灰色的圆圈。

---

任何人都可以帮助制作这个饼图。

您需要更改javascript以在DOM中的适当位置创建具有适当旋转偏移量的div

var setButti = function(n, p, f) {
        var total = n + p + f;
        var atrs = { 'tc-passed' : p*360/total, 'tc-failed' : f*360/total, 'tc-ne' : n*360/total };
        var butti = $('#buttiEl');
        butti.html('<div class="pieContainer"><div class="pieBackground"></div></div>');
        var offset = 0;
        for (var key in atrs) {
          var wedgeWidth = atrs[key];
          if (wedgeWidth > 180) {
              $('.pieContainer', butti).append(buildWedge(key, 180, offset));
              wedgeWidth -= 180;
              offset += 180;
          }
          $('.pieContainer', butti).append(buildWedge(key, wedgeWidth, offset));
          offset += wedgeWidth * 1;
        }
      };

function buildWedge(cssClass, wedgeWidth, offset) {
    var wedge = $('<div class="pie"></div>').
      css('-webkit-transform', 'rotate('+ wedgeWidth +'deg)').
      css('-moz-transform', 'rotate('+ wedgeWidth +'deg)').
      css('-o-transform', 'rotate('+ wedgeWidth+'deg)').
      css('transform', 'rotate('+wedgeWidth +'deg)');
    var container = $('<div class="'+cssClass+' hold"></div>').
      css('-webkit-transform', 'rotate('+ offset +'deg)').
      css('-moz-transform', 'rotate('+ offset +'deg)').
      css('-o-transform', 'rotate('+ offset +'deg)').
      css('transform', 'rotate('+offset +'deg)');
    container.append(wedge);
    return container;
}

var setButti=函数（n，p，f）{
var总计=n+p+f；
var atrs={'tc passed'：p*360/total，'tc failed'：f*360/total，'tc ne'：n*360/total}；
var butti=$（“#buttiEl”）；
html（“”）；
var偏移=0；
for（atrs中的var键）{
var wedgeWidth=atrs[key]；
如果（楔宽>180）{
$（'.piecainer'，butti）.append（buildWedge（键，180，偏移量））；
楔宽-=180；
偏移量+=180；
}
$（'.piecainer'，butti）.append（buildWedge（key，wedgeWidth，offset））；
偏移量+=楔形宽度*1；
}
};
功能构建楔块（cssClass，楔块宽度，偏移）{
变量楔形=$（''）。
css（'-webkit transform'，'rotate（'+wedgeWidth+'deg'））。
css（'-moz transform'，'rotate（'+wedgeWidth+'deg'））。
css（'-o变换'，'旋转（'+wedgeWidth+'deg'））。
css（'transform'、'rotate'、'wedgeWidth+'deg'）；
变量容器=$（''）。
css（'-webkit transform'，'rotate（'+offset+'deg'））。
css（'-moz变换'，'旋转（'+offset+'deg'））。
css（'-o变换'，'旋转（'+offset+'deg'））。
css（“变换”、“旋转”（“+offset+'deg”）；
容器。附加（楔形）；
返回容器；
}

var setButti = function(n, p, f) {
        var total = n + p + f;
        var atrs = { 'tc-passed' : p*360/total, 'tc-failed' : f*360/total, 'tc-ne' : n*360/total };
        var butti = $('#buttiEl');
        butti.html('<div class="pieContainer"><div class="pieBackground"></div></div>');
        var offset = 0;
        for (var key in atrs) {
          var wedgeWidth = atrs[key];
          if (wedgeWidth > 180) {
              $('.pieContainer', butti).append(buildWedge(key, 180, offset));
              wedgeWidth -= 180;
              offset += 180;
          }
          $('.pieContainer', butti).append(buildWedge(key, wedgeWidth, offset));
          offset += wedgeWidth * 1;
        }
      };

function buildWedge(cssClass, wedgeWidth, offset) {
    var wedge = $('<div class="pie"></div>').
      css('-webkit-transform', 'rotate('+ wedgeWidth +'deg)').
      css('-moz-transform', 'rotate('+ wedgeWidth +'deg)').
      css('-o-transform', 'rotate('+ wedgeWidth+'deg)').
      css('transform', 'rotate('+wedgeWidth +'deg)');
    var container = $('<div class="'+cssClass+' hold"></div>').
      css('-webkit-transform', 'rotate('+ offset +'deg)').
      css('-moz-transform', 'rotate('+ offset +'deg)').
      css('-o-transform', 'rotate('+ offset +'deg)').
      css('transform', 'rotate('+offset +'deg)');
    container.append(wedge);
    return container;
}