增加由progressbar.js 创建的饼图的大小（宽度和高度）
Posted
技术标签:
【中文标题】增加由progressbar.js 创建的饼图的大小（宽度和高度）【英文标题】：Increase size of pie charts (width and height) created by progressbar.js 【发布时间】：2019-08-31 05:55:26 【问题描述】：我正在使用https://github.com/yxfanxiao/jQuery-plugin-progressbar 绘制动画饼图，具体代码如下：
JS：
;
(function ($)
$.fn.loading = function ()
var DEFAULTS =
backgroundColor: '#4b86db',
progressColor: '#b3cef6',
percent: 75,
duration: 2000
;
$(this).each(function ()
var $target = $(this);
var opts =
backgroundColor: $target.data('color') ? $target.data('color').split(',')[0] : DEFAULTS.backgroundColor,
progressColor: $target.data('color') ? $target.data('color').split(',')[1] : DEFAULTS.progressColor,
percent: $target.data('percent') ? $target.data('percent') : DEFAULTS.percent,
duration: $target.data('duration') ? $target.data('duration') : DEFAULTS.duration
;
// console.log(opts);
$target.append('<div class="background"></div><div class="rotate"></div><div class="left"></div><div class="right"></div><div class=""><span>' + opts.percent + '%</span></div>');
$target.find('.background').css('background-color', opts.backgroundColor);
$target.find('.left').css('background-color', opts.backgroundColor);
$target.find('.rotate').css('background-color', opts.progressColor);
$target.find('.right').css('background-color', opts.progressColor);
var $rotate = $target.find('.rotate');
//$rotate.set(0);
setTimeout(function ()
$rotate.css(
'transition': 'transform ' + opts.duration + 'ms linear',
'transform': 'rotate(' + opts.percent * -3.6 + 'deg)'
);
,1);
if (opts.percent > 50)
var animationRight = 'toggle ' + (opts.duration / opts.percent * 50) + 'ms step-end';
var animationLeft = 'toggle ' + (opts.duration / opts.percent * 50) + 'ms step-start';
$target.find('.left').css(
animation: animationRight,
opacity: 1
);
$target.find('.right').css(
animation: animationLeft,
opacity: 0
);
else
var animationRight = 'toggle ' + (opts.duration / opts.percent * 50) + 'ms step-end';
var animationLeft = 'toggle ' + (opts.duration / opts.percent * 50) + 'ms step-start';
$target.find('.left').css(
animation: animationRight,
opacity: 0
);
$target.find('.right').css(
animation: animationLeft,
opacity: 1
);
);
)(jQuery);
CSS：
.position
float: left;
margin: 100px 50px;
.progress-bar
position: relative;
height: 100px;
width: 100px;
.progress-bar div
position: absolute;
height: 100px;
width: 100px;
border-radius: 50%;
.progress-bar div span
position: absolute;
font-family: Arial;
font-size: 25px;
line-height: 75px;
height: 75px;
width: 75px;
left: 12.5px;
top: 12.5px;
text-align: center;
border-radius: 50%;
background-color: white;
.progress-bar .background
background-color: #b3cef6;
.progress-bar .rotate
clip: rect(0 50px 100px 0);
background-color: #4b86db;
.progress-bar .left
clip: rect(0 50px 100px 0);
opacity: 1;
background-color: #b3cef6;
.progress-bar .right
clip: rect(0 50px 100px 0);
transform: rotate(180deg);
opacity: 0;
background-color: #4b86db;
@keyframes toggle
0%
opacity: 0;
100%
opacity: 1;
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Progress Bar</title>
<link rel="stylesheet" href="jQuery-plugin-progressbar.css">
<script src="jquery-1.11.3.js"></script>
<script src="jQuery-plugin-progressbar.js"></script>
</head>
<body>
<div class="progress-bar position" data-percent="30" data-duration="1000" data-color="#4b86db,#b3cef6"></div>
<div class="progress-bar position" data-percent="60" data-duration="1000" data-color="yellow,#ccc"></div>
<div class="progress-bar position" data-percent="84" data-color="#12b321,#a456b1"></div>
<input type="submit" value="Draw">
<script>
$(".progress-bar").loading();
$('input').on('click', function ()
$(".progress-bar").loading();
);
</script>
</body>
</html>
输出如下：
我需要做的是增加饼图的大小（宽度和高度）。仅更改宽度和高度值不起作用，其他值似乎也需要相应更改，但仍然无法正确显示图形。
它们现在是100X100，如何使它们变成200X200？任何帮助将不胜感激！
谢谢！
【问题讨论】：
【参考方案1】：试试这个？
.position
float: left;
margin: 100px 50px;
.progress-bar
position: relative;
height: 200px;
width: 200px;
.progress-bar div
position: absolute;
height: 200px;
width: 200px;
border-radius: 50%;
.progress-bar div span
position: absolute;
font-family: Arial;
font-size: 50px;
line-height: 150px;
height: 150px;
width: 150px;
left: 25px;
top: 25px;
text-align: center;
border-radius: 50%;
background-color: white;
.progress-bar .background
background-color: #b3cef6;
.progress-bar .rotate
clip: rect(0 100px 200px 0);
background-color: #4b86db;
.progress-bar .left
clip: rect(0 100px 200px 0);
opacity: 1;
background-color: #b3cef6;
.progress-bar .right
clip: rect(0 100px 200px 0);
transform: rotate(180deg);
opacity: 0;
background-color: #4b86db;
@keyframes toggle
0%
opacity: 0;
100%
opacity: 1;
【讨论】：
以上是关于增加由progressbar.js 创建的饼图的大小（宽度和高度）的主要内容，如果未能解决你的问题，请参考以下文章
echarts的饼图，可以在饼图的每个扇形上面显示文字和数据吗