如何在css中绘制一个可配置的饼图 [英] how to draw a configurable pie chart in css

问题描述

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

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

I am looking for a quick solution to make pie chart with css. And i don't know the deep implementation of css.

这么快我就搞定了：
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);

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

But it does not show a pie chart it is simply a grey circle. can any one help to make this pie chart.

推荐答案

您需要更改javascript才能创建div DOM中适当的位置，具有适当的旋转偏移。

You need to change your javascript to create the divs in the appropriate places in the DOM with the appropriate rotational offsets.

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

这篇关于如何在css中绘制一个可配置的饼图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！