web-dev-qa-db-fra.com

Comment créer un progrès circulaire (camembert) comme indicateur

Je dois montrer les graphiques de progression exactement de la manière suivante, là où le pourcentage serait au centre du graphique circulaire
circular progress indicator

Comment puis-je faire cela en utilisant javascript/jQuery?

javascriptasp.nethtmlcsssvg
31
Brij

Il existe un plugin pour cela sur: http://anthonyterrien.com/knob/

Démo

bouton jQuery

  • à base de toile; pas de sprites png ou jpg.
  • touch, souris et molette de souris, événements de clavier mis en œuvre.
  • compatible vers le bas; surcharge un élément d'entrée ...
54
mnowotka

J'ai cherché et je sais qu'il y a au moins 5 façons de créer un indicateur de progression circulaire: 
Ils comprennent:

  1. jquery.polartimer.js
  2. bouton jQuery
  3. CSS3 graphique à secteurs avec jquery
  4. circulaire progressBar par jQuery et CSS3
  5. ProgressBar.js

pls see ： http://freenish.com/4-ways-to-create-circular-progressbar-by-using-jquery/

4
aisin

Je recommanderais Highcharts JS pour tous vos besoins en graphiques JavaScript

Parcourez plus de démos ; Je pense que vous cherchez le Donut Chart :)

3
maček

Vous pouvez utiliser sprites CSS ( google ) à cette fin si vous souhaitez afficher des multiples de 10 (0%, 10%, 20%, etc.). Je suppose que vous devez être un gourou graphique pour créer le Sprite ..

Le Sprite est une image contenant plusieurs images. Pour ce faire, vous pouvez créer une image, par exemple 16x160px. Imaginez que cette image soit divisée en dix "tranches" de 16x16 pixels et tracez le pourcentage correspondant sur cette tranche. Vous pouvez ensuite utiliser CSS et JavaScript pour afficher un "cadre" de ce Sprite.

1
Salman A

Je ne pense pas que vous puissiez le faire avec javascript/jquery/css seul. Vous devez rendre différentes images, pour chaque étape 1, et afficher celle qui convient .. .. Elle peut être réalisée avec flash (probablement des composants déjà créés) ou avec l’élément de travail svg ou html5 ou un api utilisant l’un des éléments ci-dessus backends.

0
Christian

Si vous ne ciblez pas d'anciens navigateurs, vous pouvez facilement le faire en dessinant sur un élément de la toile. Cela vous donne la liberté de faire tout ce dont vous avez besoin avec le graphique. 

Cela signifie que jQuery et tous les navigateurs prenant en charge l'élément canvas ... IE9 + .__ constituent la seule exigence de cette solution. Voici un extrait de code qui en fait la démonstration ...

//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