Mit JavaScript zum SVG Kreisdiagramm

svg-pie-chart-800

In diesem Beispiel zeige ich dir, wie du mit ein wenig Mathematik und JavaScript ein SVG Kreisdiagramm erstellen kannst.

Die Anzahl der Kreisstücke ist die Grundlage zur Ermittlung der Winkel für jedes einzelne Kreisstück. Bei vier Kreisstücken hat jedes Stück einen Winkel von 90° oder bei acht Kreisstücken einen Winkel von 45°. Der Winkel der Kreisstücke wird durch die Division eines Vollkreises (360°) durch die Anzahl der Teilstücke errechnet.

Formel für Teilkreise

Hinweis: Die Kreisstücke in diesem Beispiel sind alle gleich groß. Wenn du das Beispiel durchgearbeitet hast, kannst du aber auch recht einfach Kreisdiagramme mit unterschiedlich großen Stücken erstellen.

Beispiel auf Codepen

See the Pen Calculated SVG pie chart by Norbert Mesch (@itsnorbat) on CodePen.

Mit Hilfe der Sinus- und Cosinus-Funktionen kannst du die Positionen der Koordinaten auf dem Kreisumfang errechnen. Das Kreisstück wird in SVG über ein path-Element konstruiert. Beachte bitte, dass JavaScript die Bogenmaße als Werte für die WInkelfunktionen benötigt. „Mit JavaScript zum SVG Kreisdiagramm“ weiterlesen