как рисовать конфигурируемый круговую диаграмму в CSS

Question

по ссылке http://www.kylejlarson.com/blog/2011/how-to-create-pie-charts-with-css3/

Ищу для быстрого решения, чтобы сделать круговую диаграмму с помощью CSS. И я не знаю глубокой реализации 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); 

Но он не показывает круговую диаграмму, это просто серый круг. Может ли кто-нибудь помочь сделать эту круговую диаграмму.

Answer 1

Вам необходимо изменить javascript для создания divs в соответствующих местах DOM с соответствующими смещениями вращения.

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