it-swarm.com.de

So erstellen Sie einen kreisförmigen Fortschritt (Kreisdiagramm) wie den Indikator

Ich muss Fortschrittsgraphen genau so anzeigen, dass der Prozentsatz in der Mitte des Kreisgraphen liegt
circular progress indicator

Wie kann ich dies mit Javascript/jQuery tun? Kann es mit Google Chart gemacht werden?

31
Brij

Hierfür gibt es ein Plugin unter: http://anthonyterrien.com/knob/

Demo

jQuery Knob

  • leinwand basierend; keine png oder jpg sprites.
  • touch, Maus und Mausrad, Tastaturereignisse implementiert.
  • abwärtskompatibel; überlädt ein Eingangselement ...
54
mnowotka

Ich habe gesucht und weiß, dass es mindestens fünf Möglichkeiten gibt, den Zirkularfortschrittsanzeiger zu erstellen: 
Sie beinhalten:

  1. jquery.polartimer.js
  2. jQuery Knob
  3. CSS3 Kreisdiagrammtimer mit Jquery
  4. zirkuläre progressBar von jQuery und CSS3
  5. ProgressBar.js

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

4
aisin

Ich würde Highcharts JS für alle Ihre JavaScript-Grafikanforderungen empfehlen

Durchsuchen Sie mehr von demos ; Ich denke, Sie suchen das Donut-Diagramm :)

3
maček

Sie können CSS Sprites ( google ) für diesen Zweck verwenden, wenn Sie ein Vielfaches von 10 anzeigen möchten (0%, 10%, 20% usw.). Ich denke, Sie müssen ein Grafik-Guru sein, um das Sprite zu erstellen.

Das Sprite ist ein Bild, das mehr als ein Bild enthält. Zu Ihrem Zweck können Sie ein Bild erstellen, z. B. 16 x 160 Pixel. Stellen Sie sich vor, dass dieses Bild in zehn 16x16px "Slices" unterteilt ist, und zeichnen Sie den entsprechenden Prozentsatz in diesem Slice. Sie können dann CSS und JavaScript verwenden, um einen "Frame" von diesem Sprite anzuzeigen.

1
Salman A

Ich glaube nicht, dass Sie dies allein mit Javascript/jquery/css tun können. Sie müssen für jeden Schritt ein anderes Bild rendern und das richtige Bild anzeigen. Sie könnte mit Flash erstellt werden (wahrscheinlich gibt es bereits fertige Komponenten) oder mit einem svg- oder html5-Zeichenelement oder einer API, die eines der oben genannten Elemente verwendet Backends.

0
Christian

Wenn Sie nicht auf alte Browser abzielen, können Sie dies ganz einfach tun, indem Sie ein Canvas-Element zeichnen. Dies gibt Ihnen die Freiheit, mit dem Diagramm alles zu tun, was Sie brauchen. 

Das bedeutet, dass diese Lösung nur jQuery und jeden Browser benötigt, der das Zeichenbereichselement unterstützt ... IE9 + Hier ist ein Code-Snippet, der dies demonstriert ...

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