javascript - 中心带有百分比值的圆显示一组在不同类别下选中的复选框的结果

我想要一个Java脚本，以圆圈的形式显示结果，该圆圈的中心是百分比值，这些百分比值是由于在不同类别下选中的复选框数量而返回的。圆的半径需要根据百分比值计算。比方说小40％，大80％。

例如

环境：


保持环境清洁，
避免污染。

性质：
保护自然。
种树。

如果在“环境”部分中选中了1个复选框，如果在“自然”中选中了2个复选框，则自然需要具有高百分比值，在圆心处显示百分比值，而环境低百分比值的环境下显示较小的圆，百分比值在中央。我需要有5个这样的圆圈。有人可以帮忙。


谢谢。

最佳答案

尝试，

JavaScript：

   $(function(){

    var maxWidth = 500, // This is the max width of your circle

    percent = Number($('#result').text()); // This is the percentage value

    percent = percent / 100;

    $("#circle").css({

        "width" : maxWidth * percent,

        "height" : maxWidth * percent,


    });
});

CSS：

  #circle {

    border: 1px solid red;

    border-radius: 50%;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

    background:blue;

}