如何创建像指标一样的循环进度（饼图）

Question

我必须以下列方式准确显示进度图，其中百分比将在圆形图的中心

我如何使用javascript / jQuery执行此操作？ 可以使用Google Chart完成吗？

Answer 1

这里有一个插件： http://anthonyterrien.com/knob/

  

Demo

     

jQuery Knob

     

  
• 画布;没有png或jpg sprites。
  
• 触控，鼠标和鼠标滚轮，实现键盘事件。
  
• 向下兼容;重载输入元素......
  

Answer 2

我搜索并知道至少有5种方法可以创建循环进度指示器：
它们包括：

  

  
1. jquery.polartimer.js
  
2. jQuery Knob
  
3. 带有jquery的CSS3饼图计时器
  
4. 循环progressBar by jQuery andCSS3
  
5. ProgressBar.js
  

请参阅：http://freenish.com/4-ways-to-create-circular-progressbar-by-using-jquery/

Answer 3

我建议Highcharts JS满足您的所有JavaScript图形需求

浏览更多demos;我想你正在寻找Donut Chart：）

Answer 4

如果要显示10的倍数（0％，10％，20％等），可以使用CSS sprites（google）来实现此目的。我想你需要成为一个图形专家来创建精灵..

精灵是一个包含多个图像的图像。为了您的目的，您可以创建一个图像，比如16x160px。想象一下，这个图像被分成十个16x16px“切片”，并在该切片上绘制相应的百分比。然后，您可以使用CSS和JavaScript显示此精灵中的一个“框架”。

Answer 5

我认为你不能单独使用javascript / jquery / css。您需要为每个步骤渲染不同的图像并显示正确的图像。 它可以用flash制作（可能有现成的组件）或svg或html5 canvas元素或使用上述后端之一的api。

Answer 6

如果您不是针对旧浏览器，则可以通过在canvas元素上绘图来轻松实现。这使您可以自由地使用图表执行任何操作。

这意味着这个解决方案的唯一要求是jQuery和任何支持canvas元素的浏览器...... 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>