Frage zu Kreisdiagrammen im Wiki-Artikel „Balken-_und_Kreisdiagramme“

[Rolf B]

Hallo Matthias,

da steckt einiges an Hirnschmalz drin.

Ein konischer Gradient ist am allereinfachsten und braucht vor allem überhaupt kein SVG, hat aber zwei Nachteile:

• Keine Randlinie, die man je Slice unterschiedlich färben kann
• Chrome und Firefox antialiasen nicht, d.h. die Übergänge sind auf einem non-retina Display stufig.

Das Thema Randlinie kann man beheben, indem man das Diagramm zweimal übereinander zeichnet. Einmal mit der Farbe für die Randlinien, darüber dann, etwas kleiner, die Farbe für die Füllflächen.

Die dasharray-Idee ist ebenfalls clever, aber mathematisch obskur. Man braucht den Radius des Kreises und muss daraus die Länge des Umfangs berechnen. Dann muss man die Pie-Größen darauf umrechnen und kennt nun die Längen für den sichtbaren Strichanteil. Die unsichtbare Strichlänge kann man einfach auf den Umfang setzen. Hier erhebt das Wiki den gleichen Einwand wie bei conic-gradient: Keine individuellen Randfarben möglich. Lösung wie dort: zwei Pies übereinander. Die Platzierung der Slices würde ich mit dashoffset machen, das ist am einfachsten.

Malt man die Pies explizit mit path d="A...", hat man aber, was die Randfarben angeht, das gleiche Problem. Ein Stroke umrundet nämlich die ganze Slice, nicht nur den Außenrand. Entweder muss man mit dasharray nachhelfen, oder man zeichnet die Randlinie separat. Das ist also auch kein "it just works". Bei Arcs kommt hinzu, dass man die Koordinaten berechnen muss. Zumindest die des Arc-Endpunkts. Und man muss aufpassen, ob das Slice mehr als 50% des Pie einnimmt, weil man dann nämlich das large-arc Flag im A Befehl setzen muss. Um den Arc richtig zu positionieren, sollte man das tun, was Du überlegt hast: um den benötigten Winkel rotieren. Was bei Pies blöd ist: Man kann das d-Attribut nicht per CSS zusammenrechnen. Man kann es zwar im CSS festlegen, aber var() wird darin nicht verstanden. Man muss also per JS die jeweils benötigte d-Eigenschaft komplett zusammenstoppeln.

Ich stell noch was in meinen User-Space im Wiki

Rolf