javascript - 可变数量的切片 : Pie Chart concept

Question

这是我的草图:

这是一个jsfiddle致力于:

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

目标是将这个圆分成可变数量的切片。

例如，如果我想要 10 片……我可以将某些内容更改为“10” 它会给我看这个被分成 10 block 的戒指。

或“20”或“50”或“100”。

换句话说，某种方式可以避免处理每一行。

能够旋转将是一个加号。

或者..我也想要这个..只有边框被分成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/