Как создать круговой индикатор прогресса (круговая диаграмма)

Question

Я должен показывать графики прогресса точно так, чтобы процент был в центре кругового графика.

Как я могу сделать это, используя javascript / jQuery?Можно ли это сделать с помощью Google Chart?

Answer 1

Для этого есть плагин: http://anthonyterrien.com/knob/

Демо

jQuery Knob

• на основе холста;нет спрайтов png или jpg.
• touch, mouse and mousewheel, реализованы события клавиатуры.
• совместим с предыдущими версиями;перегружает элемент ввода ...

Answer 2

Я искал и знаю, что есть как минимум 5 способов создания индикатора кругового прогресса:
Они включают в себя:

1. jquery.polartimer.js
2. jQuery Knob
3. Таймер круговой диаграммы CSS3 с jquery
4. круговой индикатор выполнения от jQuery и CSS3
5. ProgressBar.js

Пожалуйста, смотрите ： http://freenish.com/4-ways-to-create-circular-progressbar-by-using-jquery/

Answer 3

Я бы порекомендовал Highcharts JS для всех ваших потребностей в графике JavaScript

Просмотрите больше демонстраций ; Я думаю, что вы ищете Пончик Диаграмма :)

Answer 4

Вы можете использовать CSS-спрайтов ( google ) для этой цели, если вы хотите показать кратные 10 (0%, 10%, 20% и т. Д.).Я думаю, вам нужно быть графическим гуру, чтобы создать спрайт.

Спрайт - это одно изображение, содержащее более одного изображения.Для вашей цели вы можете создать изображение, скажем, 16x160px.Представьте, что это изображение разделено на десять 16x16px «кусочков» и нарисуйте соответствующий процент на этом кусочке.Затем вы можете использовать CSS и JavaScript, чтобы показать один «кадр» из этого спрайта.

Answer 5

Если вы не ориентируетесь на старые браузеры, вы можете легко сделать это, рисуя элемент 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>

Answer 6

Я не думаю, что вы можете сделать это только с помощью javascript / jquery / css.Вам нужно визуализировать разные изображения, для каждого первого шага и отображать правильное.Это может быть сделано с помощью flash (возможно, есть готовые компоненты) или с помощью элемента svg или html5 canvas или API, который использует один из вышеуказанных бэкэндов.