javascript - 如何在CSS中绘制可配置的饼图

Question

来自链接 http://www.kylejlarson.com/blog/2011/how-to-create-pie-charts-with-css3/

我正在寻找一种使用 CSS 制作饼图的快速解决方案。而且我不知道css的深度实现。

我很快就做出了 fiddle : http://jsfiddle.net/S8gj2/

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>');
        for (var key in atrs) {
          $('.pieBackground', butti).append('<div class="'+key+' hold"><div class="pie"></div></div>').
            css('-webkit-transform', 'rotate('+atrs[key]+'deg)').
            css('-moz-transform', 'rotate('+atrs[key]+'deg)').
            css('-o-transform', 'rotate('+atrs[key]+'deg)').
            css('transform', 'rotate('+atrs[key]+'deg)');
        }
      };


setButti(1,1,1);

但它不显示饼图，它只是一个灰色圆圈。任何人都可以帮助制作这个饼图。

Answer 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;
}

JS Fiddle