ProgressPieSVG

jQuery-Plugin

Was ist „ProgressPieSVG“?

Diese Seite ist die Projekt-Homepage eines jQuery-Plugins namens „ProgressPieSVG“, welches dazu dient, in Webseiten einfache Prozentwerte (oder jeden Wert, der sich in einen solchen transformieren lässt) als farbige SVG-Grafik in Torten- oder Ringform zu visualisieren. Insbesondere kann eine solche Grafik als kompakte Alternative eines herkömmlichen Fortschrittsbalkens eingesetzt werden.

Werfen Sie einen Blick auf die Beispiele, um einen Eindruck von Aussehen der Grafiken und Möglichkeiten des Plugins zu bekommen.

Darf ich die Software kopieren und einsetzen, selbst in kommerziellen Projekten?

Ein klares „Ja, aber…“! Diese Open-Source-Software darf selbst in kommerziellen, nicht quelloffenen Projekten kostenlos eingesetzt werden, so lange die Lizenzbedingungen akzeptiert und befolgt werden!

Wo kann ich das Plugin herunterladen?

GitHub

Sie können das gesamte Projektpaket von GitHub herunterladen, welches neben den kompakten minifizierten JavaScripten für den Produktionseinsatz auch die lesbaren, wartbaren und kommentierten Quellen enthält, ebenso wie die Beispiele, Dokumentation etc.
Für die einfache Nutzung genügt es, wenn Sie bei GitHub die „Download ZIP“-Funktion benutzen (d.h. Sie benögiten keinen Git-Client). Nach dem Entpacken der heruntergeladenen ZIP-Datei finden Sie die minifizierten Produktions-JavaScript-Dateien im Verzeichnis js/min.

Hinweis: Nur der master-Branch in GitHub enthält stabile, fertige Versionen zum Download! Andere Branches, sofern vorhanden, dienen nur der Entwicklung und enthalten in der Regel unfertige Software.

NPM

Dieses Plugin wurde als NPM-Modul veröffentlicht. Wenn Sie Node.js installiert haben, können Sie einfach den Node.js-Paketmanager npm auf Ihrer Kommandozeile verwenden, um das Modul im aktiven Arbeitsverzeichnis zu installieren:

				
npm install progresspiesvg
			

Dieser NPM-Download umfasst die JavaScript-Dateien (sowohl in „minifizierter“ Version für den Produktionseinsatz als auch die menschenlesbaren, wartbaren „Quelltexte“), sowie README und LICENSE. Weitere Dokumente wie Beispiele und Dokumentation (neben README) sind nicht im NPM-Paket enthalten. Lesen Sie bei Bedarf die Beipiele und Online-Dokumentation auf deser Website. Wenn Sie den Download eines Komplettpakets mitsamt Offline-Dokumentation und -Beispielen vorziehen, greifen Sie statt dessen auf den Download von GitHub zurück!

Was ist neu?

V2.3.0

Neue Option: optionsByRawValue.

V2.2.0

Optionales Boolean-Argument für setupProgressPie()-Funktion, mit dem sich bei mehrfachen Setup-Aufrufen ein vorheriges Setup nun auch ersetzen/überschreiben und nicht nur ergänzen lässt.

V2.1.0

Neue Optionen zur Ausrichtung von Ringgrafik und Hintergrundkreis sowie zum Hinzufügen von Rändern um ein Diagramm. Content-Plugin-API erweitert: Content kann nun wahlweise im Vorder- oder Hintergrund gezeichnet werden. Außerdem können mehrere Content-Plugins zu einem Diagramm hinzugefügt werden.

Neues Content-Plugin image zum Laden von Bilddateien z.B. als Hintergrundgrafik oder als in einem Ringgraphen anzuzeigender Inhalt. Siehe Beispielseite Content-Plugins für diverse Anwendungen.

V2.0.0

SVG-Erzeugung wurde modifiziert und produiert nun i.d.R schlankeren, einfacheren SVG-Code. Neue Features umfassen optionale animierte Wertübergänge, Hinzufügen von CSS-Klassen zu den Diagrammelementen zwecks Unterstützung externer CSS-Formatierung, sowie eine Erweiterung des „Doppel-Diagramm“-Features, indem die Limitierung auf maximal zwei in einem Diagramm darstellbare Werte weggefallen ist. Die API für Content-Plugins wurde erweitert und erlaubt es Plugins insbesondere, die Ausgabe des eigentlichen Diagramms im Hintergrund ganz zu unterdrücken, sinnvoll insbesondere, wenn dieses Diagramm ohnehin effektiv unsichtbar wäre, da das Content-Plugin es vollständig verdecken würde.

Einige Änderungen können geringfügige Auswirkungen auf die Abwärtskompatibilität haben, insbesondere wird der Separator-String (per Voreinstellung ein Leerzeichen) nun nur noch dann hinter dem Diagramm eingefügt, wenn es wirklich etwas zu separieren/trennen gibt: Falls das selektierte Zielelement komplett leer sein sollte, wird nur das SVG dort eingefügt und eben kein Separator mehr hinzugefügt. Siehe README für weitere Informationen.

V1.5.0

Neue Content-Plugins zum Hinzufügen von Fehler- oder Warnungssymbolen zu einer Fortschrittsanzeige, z.B. im Fall dass der Prozess, dessen Fortschritt gemessen wurde, mit einem Fehler abbricht. Passend dazu wurde auch das checkComplete-Plugin etwas erweitert.

Erweiterung der-Content-Plugin-API: Neue Funktionen für Plugin-übergreifende Aufgaben wie z.B. das Einfügen eines farblich gefüllten Hintergrunds für den zu zeichnenden Inhalt (wie es die Plugins checkComplete, error und exclamationMark unterstützen).

V1.4.0

Neue Option optionsByPercent, um variierende Optionen abhängig vom Prozentwert zu ermöglichen.

V1.3.0

Neue jQuery-Plugin-Funktion setupProgressPie hinzugefügt, mit der die Optionen zur Konfiguration des progressPie-Plugins in den selektierten Nodes gespeichert werden können, so dass nachfolgende Aufrufe von progresPie() (ohne Argumente) diese Einstellungen immer wiederverwendet. Auf diese Weise wurde das skriptgesteuerte Aktualisieren der Grafiken vereinfacht.

Das checkComplete-Content-Plugin (eingeführt in V1.2.0) wurde erweitert um die Möglichkeit, das Häkchen bei Erreichen der 100%-Marke animiert zu zeichnen. Außerdem kann es für Werte unter 100% an ein sekundäres Content-Plugin delegieren, so lange einen anderen Inhalt zu zeichnen.

V1.2.0

Support für Content-Plugins eingeführt, also Plugins für das jQuery-Plugin ProgressPieSVG, die weitere Inhalte zu den Grafiken hinzufügen können.

Mitgeliefert sind bereits Content-Plugins für Wertanzeigen im Inneren der Grafik, Steuerungs-Icons (Play, Pause, Stop) sowie ein Häkchen bei Erreichen des 100%-Werts. Siehe neue Beispielseite.

Natürlich können Sie aber auch Ihre eigenen Content-Plugins schreiben, siehe Dokumentation.

^