it-swarm-ru.tech

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

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

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

31
Brij

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

Демо

jQuery Knob

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

Я искал и знаю, что есть как минимум 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/

4
aisin

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

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

3
maček

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

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

1
Salman A

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

0
Christian

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

0
Leo