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

[Robert B.]

Hallo Forum,

in o.g. genannten Abschnitt des Artikels ist ein Beispiel für ein Kreisdiagramm gegeben, das mir nicht einleuchtet:

<svg class="chart" width="420" height="150" aria-labelledby="chartinfo" >
  <desc id="chartinfo">Ein Diagramm unserer Ernte</desc>
  <defs>
  </defs>

<svg class="pie" width="200" height="200" viewBox="-100 -100 200 200" style="transform: rotate(-0.25turn)">     

  <circle id="background" r="50" />

  <g class="slice" tabindex="0">
    <path d="M 1 0 A 1 1 0 0 1 0.8 0.59 L 0 0 Z" />
    <text x="45" y="9.5">4 apples</text>
  </g>
</svg>
</svg>

Da ist erst einmal ein svg in einem svg – was soll das denn?

Weiterhin:

1. Wenn ich das richtig sehe, muss ich die Koordinaten für den Kreisbogen/die weiteren Tortenstücke aus den Anteilen (prozentual zur Basis 360° bzw. 2π) berechnen.
2. Die Vorschau des Kreisdiagramm-Beispiels „existiert nicht“.

Viele Grüße
Robert

[Matthias Scharwies]

Servus!

Hallo Forum,

in o.g. genannten Abschnitt des Artikels ist ein Beispiel für ein Kreisdiagramm gegeben, das mir nicht einleuchtet:

<svg class="chart" width="420" height="150" aria-labelledby="chartinfo" >
  <desc id="chartinfo">Ein Diagramm unserer Ernte</desc>
  <defs>
  </defs>

<svg class="pie" width="200" height="200" viewBox="-100 -100 200 200" style="transform: rotate(-0.25turn)">     

  <circle id="background" r="50" />

  <g class="slice" tabindex="0">
    <path d="M 1 0 A 1 1 0 0 1 0.8 0.59 L 0 0 Z" />
    <text x="45" y="9.5">4 apples</text>
  </g>
</svg>
</svg>

Da ist erst einmal ein svg in einem svg – was soll das denn?

Weiterhin:

1. Wenn ich das richtig sehe, muss ich die Koordinaten für den Kreisbogen/die weiteren Tortenstücke aus den Anteilen (prozentual zur Basis 360° bzw. 2π) berechnen.
2. Die Vorschau des Kreisdiagramm-Beispiels „existiert nicht“.

Ja, das ist leider steckengeblieben.

Da wollte ich mal einen kompletten Diagramm-Generator bauen, bei dem man dann das fertig generierte SVG als Grafik oder als eigene Datei (siehe deinen Osterei-Generator) ausgeben kann.

Ich hoffe, dass ich Weihnachten dazu komme. :-(

Herzliche Grüße

Matthias Scharwies

[Robert B.]

Moin Matthias,

Ja, das ist leider steckengeblieben.

ich bin ja nicht ohne eine Idee über die Seite gestolpert … 😉 Mir würde es fürs erste Verständnis reichen, wenn ich Antworten auf die folgenden Frage finde:

Da ist erst einmal ein svg in einem svg – was soll das denn?

Weiterhin:

1. Wenn ich das richtig sehe, muss ich die Koordinaten für den Kreisbogen/die weiteren Tortenstücke aus den Anteilen (prozentual zur Basis 360° bzw. 2π) berechnen.

Daraus ergäben sich Teile meiner Idee, die dann hierher zurückfließen könnten:

Da wollte ich mal einen kompletten Diagramm-Generator bauen, bei dem man dann das fertig generierte SVG als Grafik oder als eigene Datei (siehe deinen Osterei-Generator) ausgeben kann.

Viele Grüße
Robert

[Matthias Scharwies]

Servus!

Moin Matthias,

Ja, das ist leider steckengeblieben.

ich bin ja nicht ohne eine Idee über die Seite gestolpert … 😉 Mir würde es fürs erste Verständnis reichen, wenn ich Antworten auf die folgenden Frage finde:

Da ist erst einmal ein svg in einem svg – was soll das denn?

Weiterhin:

Das war mein Versuch, den Kreis, der skaliert werden muss, mit einer viewbox passend zu skalieren. Bei g geht das nicht.

Irgendwie muss man sowohl den path mit dem Segment und dann den text (class="slice" ist blöd; besser wäre wohl label?) in das Diagramm kriegen.

1. Wenn ich das richtig sehe, muss ich die Koordinaten für den Kreisbogen/die weiteren Tortenstücke aus den Anteilen (prozentual zur Basis 360° bzw. 2π) berechnen.

Ja, genau! Und da war für mich die Frage,

1. wie ich den Bogen berechne (meine Idee Umfang des Kreises berechnen, dort dann den Prozentwert des Anteils dazu und dann den Endpunkt des Bogens draufsetzen.

2. ob ich alle Kreissegmente oben zeichne und dann entsprechend der bisherigen Anteile rotiere

Daraus ergäben sich Teile meiner Idee, die dann hierher zurückfließen könnten:

Da wollte ich mal einen kompletten Diagramm-Generator bauen, bei dem man dann das fertig generierte SVG als Grafik oder als eigene Datei (siehe deinen Osterei-Generator) ausgeben kann.

vielen Dank im Voraus!!!

Herzliche Grüße

Matthias Scharwies

--

[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

[Robert B.]

Moin Matthias,

1. Wenn ich das richtig sehe, muss ich die Koordinaten für den Kreisbogen/die weiteren Tortenstücke aus den Anteilen (prozentual zur Basis 360° bzw. 2π) berechnen.

Ja, genau! Und da war für mich die Frage,

1. wie ich den Bogen berechne (meine Idee Umfang des Kreises berechnen, dort dann den Prozentwert des Anteils dazu und dann den Endpunkt des Bogens draufsetzen.
2. ob ich alle Kreissegmente oben zeichne und dann entsprechend der bisherigen Anteile rotiere

Also nach meiner kurzen Feierabend-Spielerei (und -Geometrie) ist es gar nicht so kompliziert:

• Koordinatenursprung in der Mitte des umrandenden circle definieren (entsprechende viewBox mit negativen x- und y-Koordinaten nötig).
• Tortenstück als Pfad vom Ursprung ausgehend nach oben und dann den Kreisbogen entsprechend des Winkels entlang; Pfad schließen.
• Tortenstücke entsprechend des summierten Winkels der Vorgänger rotieren.

Das habe ich in https://www.robertbienert.de/self/torte.html einmal ausprobiert es macht fürs Erste einen guten Eindruck. Mit einer Beispieleingabe wie

#39f .5
#93f .3
#f39 .25
#f93 1
#3f9 .4
#9f3 .5

kann man auch gleich einmal hübsche Farbpaletten ausprobieren.

Neben dem Hinweis von @Rolf B mit dem large-arc sweep für Winkel > 180° habe ich auch eine Sonderbehandlung für Winkel = 180° enthalten, weil das ein einfacher Halbkreis ist, für den ich kein Dreieck der rechten Ecke berechnen könnte.

Ich denke, dass wir darauf aufbauen können 😀

Knifflig wird es noch beim Beschriften der Tortenstücke, weil die Beschriftung ja nicht mit-rotiert werden sollte.

Viele Grüße
Robert