Javascript 如何创建类似指标的循环进度（饼图）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5001002/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create circular progress(pie chart) like indicator
提问by Brij
I have to show progress graphs exactly in following way where percentage would be in center of circular graph
我必须完全按照以下方式显示进度图，其中百分比将位于圆形图的中心
How can i do this using javascript/jQuery? Can it be done using Google Chart?
我如何使用 javascript/jQuery 做到这一点？可以使用谷歌图表完成吗？
回答by mnowotka
There's a plugin for this at: http://anthonyterrien.com/knob/
这里有一个插件：http: //anthonyterrien.com/knob/
jQuery Knob
- canvas based ; no png or jpg sprites.
- touch, mouse and mousewheel, keyboard events implemented.
- downward compatible ; overloads an input element...
jQuery 旋钮
- 基于画布；没有 png 或 jpg 精灵。
- 触摸、鼠标和鼠标滚轮、键盘事件实现。
- 向下兼容；重载输入元素...
回答by aisin
I searched and know there are at least 5 ways to create Circular progress indicator:
They include:
我搜索并知道至少有 5 种方法可以创建循环进度指示器：
它们包括：
- jquery.polartimer.js
- jQuery Knob
- CSS3 pie graph timer with jquery
- circular progressBar by jQuery andCSS3
- ProgressBar.js
- jquery.polartimer.js
- jQuery 旋钮
- 带有 jquery 的 CSS3 饼图计时器
- jQuery 和 CSS3 的循环进度条
- 进度条.js
回答by ma?ek
I would recommend Highcharts JSfor all of your JavaScript graphing needs
我会推荐Highcharts JS来满足您所有的 JavaScript 绘图需求
Browse through more of the demos; I think you're looking for the Donut Chart:)
回答by Leo
If you are not targeting old browsers, you can easily do that by drawing on a canvas element. This gives you the freedom to do whatever you need with the chart.
如果您不针对旧浏览器，则可以通过在画布元素上绘制来轻松实现。这使您可以自由地对图表执行任何您需要的操作。
That means this solution's only requirement is jQuery and any browser that supports the canvas element...IE9+ Here's a code snippet that demonstrates it...
这意味着该解决方案的唯一要求是 jQuery 和任何支持画布元素的浏览器...IE9+ 这是一个演示它的代码片段...
//input
var dimens = 256;
var color = "rgba(54, 162, 235, 0.9)";
var padding = 12;
var width = 10;
var value = 80;
var maxValue = 100;
var countFontRatio = 0.25; //ratio in relation to the dimens value
$(function() {
$(".chart-total").each(function(idx, element) {
var _render = function() {
var startingPoint = -0.5;
var pointValue = startingPoint;
var currentPoint = startingPoint;
var timer;
var _ctx;
var $canvas = $(element).find("canvas");
var canvas = $canvas.get(0);
pointValue = (value / (maxValue / 20) * 0.1) - 0.5;
canvas.height = dimens;
canvas.width = dimens;
if (!countFontRatio)
$canvas.parent().find(".legend-val").css("font-size", dimens / value.toString().length);
else
$canvas.parent().find(".legend-val").css("font-size", dimens * countFontRatio);
_ctx = canvas.getContext("2d");
var _draw = function() {
_ctx.clearRect(0, 0, dimens, dimens);
_ctx.beginPath();
_ctx.arc(dimens / 2, dimens / 2, (dimens / 2) - padding, startingPoint * Math.PI, 1.5 * Math.PI);
_ctx.strokeStyle = "#ddd";
_ctx.lineWidth = 2;
_ctx.lineCap = "square";
_ctx.stroke();
_ctx.beginPath();
_ctx.arc(dimens / 2, dimens / 2, (dimens / 2) - padding, startingPoint * Math.PI, currentPoint * Math.PI);
_ctx.strokeStyle = color;
_ctx.lineWidth = width;
_ctx.lineCap = "round";
_ctx.stroke();
currentPoint += 0.1;
if (currentPoint > pointValue) {
clearInterval(timer)
}
};
timer = setInterval(_draw, 100);
};
_render();
$(window).resize(function() {
_render();
});
});
})body {
font-family: 'Open Sans', sans-serif;
color: #757575;
}
.chart-total {
position: relative;
margin: 0 auto;
}
.chart-total-legend {
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translateY(-50%) translateX(-50%);
-o-transform: translateY(-50%) translateX(-50%);
-moz-transform: translateY(-50%) translateX(-50%);
-moz-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
}
.legend-val {
font-size: 4em;
display: block;
text-align: center;
font-weight: 300;
font-family: 'Roboto', sans-serif;
}
.legend-desc {
display: block;
margin-top: 5px;
text-align: center;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto:300,400" rel="stylesheet">
<div class="chart-total" style="max-width: 256px;">
<canvas height="256" width="256"></canvas>
<div class="chart-total-legend">
<span class="legend-val" value="3933" style="font-size: 64px;">3,933</span>
<span class="legend-desc">Total Progress</span></div>
</div>回答by Salman A
You can use CSS sprites(google) for this purpose, if you want to show multiples of 10 (0%, 10%, 20% etc). I guess you need to be a graphics guru to create the sprite..
如果您想显示 10 的倍数（0%、10%、20% 等），您可以为此目的使用CSS 精灵（google）。我想你需要成为一个图形大师来创建精灵..
The sprite is one image containing more than one image. For your purpose, you can create an image, say 16x160px. Imagine that this image is divided into ten 16x16px "slices" and draw the corresponding percentage on that slice. You can then use CSS and JavaScript to show one "frame" from this sprite.
精灵是一张包含多个图像的图像。出于您的目的，您可以创建一个图像，例如 16x160 像素。想象一下，将这张图片分成十个 16x16px 的“切片”，并在该切片上绘制相应的百分比。然后，您可以使用 CSS 和 JavaScript 来显示此精灵中的一个“框架”。
回答by Christian
I don't think you can do it with javascript/jquery/css alone. You need to render different images, for each step one and display the proper one. It could be made with flash (probably there are ready made components) or with svg or html5 canvas element or an api which uses one of the above backends.
我不认为你可以单独使用 javascript/jquery/css 来做到这一点。您需要为每一步渲染不同的图像并显示正确的图像。它可以使用 flash（可能有现成的组件）或使用 svg 或 html5 canvas 元素或使用上述后端之一的 api 制作。
