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

Ответ 1

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

Demo

Кнопка jQuery

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

Ответ 2

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

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

Ответ 3

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

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

Ответ 4

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

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

Ответ 5

Если вы не настроите таргетинг на старые браузеры, вы можете легко сделать это, опираясь на элемент холста. Это дает вам свободу делать все, что вам нужно с графиком.

Это означает, что это единственное требование - 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>

Ответ 6

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