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

从链接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('
'); for (var key in atrs) { $('.pieBackground', butti).append('
'). 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('
'); 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 = $('
'). 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 = $('
'). 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小提琴