Html、CSS - 如何创建这样的圆环图？

Question

我想要一个像这样的甜甜圈图。

如何创建它？我不确定正确的流程是什么。

非常感谢。

Answer 1

上面的圆环图可以使用 Html 5 画布完成。

示例： https: //jsfiddle.net/wm6szms3/

网页代码：

<canvas id="canvas" width=325 height=325></canvas>

JavaScript 代码：

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

var colors=['skyblue','gray','orange'];
var values=[47,6,47];
var labels=['Voluntary','Robot','Mandatory'];

dmbChart(150,150,125,25,values,colors,labels,0);

function dmbChart(cx,cy,radius,arcwidth,values,colors,labels,selectedValue){
    var tot=0;
    var accum=0;
    var PI=Math.PI;
    var PI2=PI*2;
    var offset=-PI/2;
    ctx.lineWidth=arcwidth;
    for(var i=0;i<values.length;i++){tot+=values[i];}
    for(var i=0;i<values.length;i++){
        ctx.beginPath();
        ctx.arc(cx,cy,radius,
            offset+PI2*(accum/tot),
            offset+PI2*((accum+values[i])/tot)
        );
        ctx.strokeStyle=colors[i];
        ctx.stroke();
        accum+=values[i];
    }
    var innerRadius=radius-arcwidth-3;
    ctx.beginPath();
    ctx.arc(cx,cy,innerRadius,0,PI2);
    ctx.fillStyle=colors[selectedValue];
    ctx.fill();
    ctx.textAlign='center';
    ctx.textBaseline='bottom';
    ctx.fillStyle='white';
    ctx.font=(innerRadius)+'px verdana';
    ctx.fillText(values[selectedValue],cx,cy+innerRadius*.9);
    ctx.font=(innerRadius/4)+'px verdana';
    ctx.fillText(labels[selectedValue],cx,cy-innerRadius*.25);
}