Dieses kleine jQuery Plugin dient für das einfache Erstellen von Kreisdiagrammen. Github

English documentation

color: "#3459eb",
backgroundColor: "#e6e6e6",
background: true,
speed: 2000,
widthRatio: 0.2,
value: 66,
unit: 'percent',
counterclockwise: false,
size: 110,
startAngle: 0,
animate: true,
backgroundFix: true,
lineCap: "round",
animation: "easeInOutCubic",
text: false,
redraw: false,
cAngle: 0,
textCenter: true,
textSize: false,
textWeight: 'normal',
textFamily: 'sans-serif',
relativeTextSize: 1 / 7,
autoCss: true,
onDraw: false

Mit diesem Attribut wird die Farbe der Kreislinie definiert. Angabe der Farbe als string.

Beispiele: #3459eb, #e6e6e6, blue

Mit diesem Attribut wird die Farbe der Kreislinie im Hintergrund definiert. Angabe der Farbe als string.

Beispiele: #3459eb, #e6e6e6, blue

Mit diesem Attribut wird festgelegt, ob hinter der Kreislinie eine andere Kreislinie als Hintergrund dargestellt werden soll. Angabe als boolean-Wert.

Beispiele: true, false

Gibt die Zeit an, in der die Kreislinie dargestellt werden soll. Angabe als integer-Wert in ms.

Beispiele: 1000, 6498

Gibt an, wie viel Prozent des Radius der Rand bzw. die Kreislinie einnehmen soll. Angabe als float-Wert in %/100.

Beispiele: 0.2, 0.4

Aktueller Wert des Kreisdiagramms in der Einheit angegeben in der unit Einstellung. Angabe als float-Wert.

Beispiele: 68, 42, 83.1240

Mit diesem Attribut wird festgelegt, in welcher Einheit das value-Attribut interpretiert werden soll. Angabe als string.

Beispiele: percent, deg, rad

Gibt an, ob die Kreislinie gegen den Uhrzeigersinn dargestellt werden soll. Angabe als boolean-Wert.

Beispiele: true, false

Größe des gesamten Objekts. Angabe als float-Wert in px.

Beispiele: 110, 200, 299.99

Gibt den Anfangswinkel an, von dem begonnen werden soll, die Kreislinie darzustellen. Angabe als float-Wert.

Beispiele: 50, 75, 43.1240

Gibt an, ob die Kreislinie animiert werden soll. Angabe als boolean-Wert.

Beispiele: true, false

Gibt an, ob der Hintergrund der Kreislinie für schöneres Darstellen abgeschnitten bzw. verkleinert werden soll. Empfohlen, wenn die Einstellung keine weiteren Probleme macht. Angabe als boolean-Wert.

Beispiele: true, false

Setzt die Art der Enden der Kreislinie. Angabe als string.

Beispiele: butt, round, square

Art der Animation für das Darstellen der Kreislinie. Angabe als string

Beispiele: linearTween, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint, easeInSine, easeOutSine, easeInOutSine, easeInExpo, easeOutExpo, easeInOutExpo, easeInCirc, easeOutCirc, easeInOutCirc

Gibt den Text unter dem bzw. im Kreis an. false wenn kein Text. Angabe als string oder false.

Beispiele: Hallo Welt!, 123456

Gibt an, ob der Text im Kreis dargestellt werden soll. Angabe als boolean-Wert.

Beispiele: true, false

Funktion, die nach jedem dargestelltem Frame ausgeführt wird. Angabe als function.

Beispiele: siehe Beispiele

Gibt an, ob das Kreisdiagramm komplett neu dargestellt oder vom letzten Wert bzw. von cAngle an animiert werden soll. Angabe als boolean-Wert.

Beispiele: siehe Beispiele

Aktuell dargestellter Wert in der Einheit angegeben in der unit Einstellung. Für die beste Benutzererfahrung die Einstellung value benutzen. Angabe als float-Wert.

Beispiele: 50, 75, 43.1240

Absoluter Wert der Größe der Schrift. Angabe als string.

Beispiele: 10px, 20px, 2em

Relativer Wert der Größe der Schrift in Abhängigkeit der Größe des Kreisdiagramms, definiert in der Einstellung size. Angabe als float-Wert.

Beispiele: 0.1, 0.3, 0.4

Gibt an, ob das Kreisdiagramm automatisch die empfohlenen CSS Eigenschaften zugewiesen bekommen soll. Deaktivieren für fortgeschrittene Anpassungen des Designs. Angabe als boolean-Wert.

Beispiele: true, false

CSS Eigenschaft (font-weight), die die Dicke des Textes angibt. Angabe als string.

Beispiele: bold, normal, weitere...

CSS Eigenschaft (font-family), die den Namen der Schriftfamilie angibt. Angabe als string.

Beispiele: sans-serif, monospace, weitere...

Code:

$(".circleChart").circleChart({
      value: 245,
      startAngle: 180
   });

redraw kann genutzt werden, um neue Werte mit einer Animation in das Diagramm laufend einzuspeisen.
z.B.

Code:

setInterval(function() {
   $(".circleChart").circleChart({
      value: Math.random()*100,
      redraw: false
   });
}, 4000);

onDraw kann beispielsweise verwendet werden, um den Aktuellen Wert anzuzeigen. z.B.

Code:

setInterval(function() {
   $(".circleChart").circleChart({
      value: Math.random()*100,
      redraw: false,
      startAngle: 50,
      text: 0 + '%',
      onDraw: function(el, circle){
         $(".circleChart_text", el).html(Math.round(circle.value) + '%');
      }
   });
}, 4000);