我想要一个 java 脚本以圆圈的形式显示结果,其中百分比值位于中心,这些值是由于在不同类别中选中的复选框数量而返回的。圆的半径需要根据百分比值计算。比方说,小 40%,大 80%。
例如,
环境:
保持环境清洁,
避免污染。
自然:
保护自然。
种树。
如果在“环境”部分中选中了 1 个复选框,如果在“自然”中选中了 2 个复选框,则“自然”需要具有高百分比值,显示圆中心的百分比值,低百分比值的环境显示较小的圆,百分比值位于中央。我需要有5个这样的圈子。有人可以帮忙吗。
谢谢。
我想要一个 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;
}
就像是?http://jsfiddle.net/jonigiuro/xP25c/
function createCircles(value1, value2, value3, value4) {
$('.one').css({
width: value1 * 2,
height: value1 * 2,
lineHeight: value1 / 10
}).text(value1 + '%');
}
然后这样称呼它:
createCircles(20,50,5,15);
这些数字是值。
或者我为类似的东西创建了一个 jQuery 插件: