javascript - CSS 中的统计圈

Question

我想做这样的事情，但我不知道怎么做。

我有个想法，但行不通。

<div id="stats">
    <div id="men" class="circle"></div>
    <div id="women" class="circle"></div>
    <div id="white-circle" class="small-circle"></div>
</div>

<style>
#stats {
    width: 100px;
    height: 100px;
    background: white;
    position: relative;
}

.circle {
    border-radius: 100px;
    background: #CCC;
    width: 100px;
    height: 100px;
    position: absolute;
}

.circle#men {
   background: #27ae60; 
}

.circle#women {
   background: #f26646; 
}

.small-circle {
    border-radius: 100px;
    background: white;
    width: 65px;
    height: 65px;
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    margin: auto;
}
</style>

Answer 1

它实际上被称为 donut chart 。仅使用 div 标签对您来说会很困难。而是使用 canvas 或仅使用 javascript 框架来绘制图表。这里有几个例子。

<canvas></canvas>

1. Example1
2. Example2
3. Example3
4. Example4

标记

<canvas width="500px" height="250px"></canvas>

JavaScript

$(document).ready(function() {

    var context = $("canvas")[0].getContext("2d");

        var values = '24,43,43,45';
        var segments = values.split(",");
        var segmentColor = 50;
        var total = 0;

        //Reset the canvas
        context.restore();
        context.save();
        context.clearRect(0,0,500,250);

        for (i=0;i<segments.length;i++) {
            total = total + parseFloat(segments[i]);
        }

        var parts = 360/total;
        var startAngle=0

        context.translate(100,100)
        context.rotate(270*(Math.PI/180)); //Turn the chart around so the segments start from 12 o'clock

        for (i=0;i<segments.length;i++) {

            //Draw the segments
            context.fillStyle ="rgb(" + segmentColor + "," + segmentColor + "," + segmentColor + ")";
            context.beginPath();
            context.moveTo(0,0);
            context.arc(0,0,100,startAngle*(Math.PI/180),(startAngle + parseFloat(segments[i]*parts))*(Math.PI/180),false);
            context.lineTo(0,0);
            context.closePath();
            context.fill();

            startAngle = startAngle + parseFloat(segments[i]*parts);
            segmentColor = segmentColor + 20;   
        }

            //Turn into a donut!!                   
            context.fillStyle = "White";
            context.beginPath();
            context.arc(0,0,60,0,Math.PI*2,false);
            context.closePath();
            context.fill();                 


});

注意:var values = '24,43,43,45';//这将基本上把圆分成 4 部分 演示:http://jsfiddle.net/Zgfb6/