可变数量的切片：饼图概念

Question

这是我的图像草图：

以下是jsfiddle：

 <div id="a"></div>

目标是将此圆圈划分为可变数量的切片。

例如，如果我想要10片..我可以改变一些东西到＆＃34; 10＆＃34; 它会告诉我这个戒指已分成10件。

或＆＃39; 20＆＃39;或者＆＃39; 50＆＃39;或者＆＃39; 100＆＃39;。

换句话说，某些方法可以避免必须处理每一行。

能够旋转将是一个加号。

或者..我也想要这个版本..其中只有边框被划分为X个切片。

要么适合我。

Answer 1

所以想出了一个漂亮的小脚本给你。相当直接，并且应该适用于任何大小的圆圈。

使用简约HTML并使用jQuery处理其余部分：

HTML

<div id="a" data-lines="8"></div>

的jQuery

$(document).ready(function(){
    var numLines = parseInt($('#a').data('lines'));
    var theta = 180/(numLines/2);
    var center = $('#a').innerWidth()/2 - 1; /*-1 to account for the line width*/
    var currAngle = 0;

    for(var i = 0; i < numLines/2; i++){
        $('<div class="lines" style="' + setAngle(currAngle) +' top: ' + center + 'px;"></div>').appendTo('#a');
        currAngle += theta;
    }
});

function setAngle(theta) {
    return '-ms-transform: rotate('+ theta +'deg); -webkit-transform: rotate('+ theta +'deg); transform: rotate('+ theta +'deg);';
}

Example Fiddle

- 只是旁注......你添加的冷却线越多，它看起来就像

另外，只是在游戏中添加旋转动画并添加旋转动画... http://jsfiddle.net/bqah9jex/4/

Answer 2

这里你去http://jsfiddle.net/bqah9jex/10/ ..额外紧凑的Javascript，HTML和CSS代码来代表饼图。

HTML

<div id="a"></div>

CSS

#a{width:25em;height:25em;border:1em red solid;text-align:center;
   border-radius:50%;background:#fff;position:relative
}
.l{width:100%;border:1px solid black;position:absolute}

的Javascript

$(function () {
    for (var a = 0, c = 200; c--;) {
        var b = "transform: rotate(" + a + "deg)";
        $('<div class="l" style="'+ ("-ms-"+ b + ";
           -webkit-"+ b + ";" + b + ";") + 'top: 50%;"></div>').appendTo("#a");
        a += 194; // number of lines
    }
});

演示结果

http://i.stack.imgur.com/gFQZ6.png