The Gauge: Kreisbogendiagramm mit HTML/CSS
Warum ich es liebe, Frontend-Dev zu sein? Weil einem das Leben – sprich: die Designer:innen – immer wieder kleine Rätsel stellen, die man lösen will. Heute ganz frisch auf der Karte: ein Kreisbogendiagramm, auch bekannt unter dem Namen „Gauge-Chart“.
Ein Halbkreisbogen, gefüllt mit einem Farbverlauf und je nach Prozentwert des dahinterliegenden Datums opak und der Rest halbtransparent. Klingt vielleicht etwas sperrig, sieht aber eigentlich recht schön aus:
Soweit so gut, wir wissen, wie es aussehen soll. Aber wie setzen wir das um? Im ersten Moment rattern ein paar mögliche Ansätze durchs Hirn: Als svg lösen? Im Canvas zeichnen? Oder eine fix-fertige JavaScript-Library verwenden?
Die schnellste Variante wäre wohl die Library. Aber ist das auch notwendig? Svg und Canvas könnte man vermutlich irgendwie hinbekommen, aber gerade beim Canvas ist dabei sicherlich einiges an Client-Rechnerei und -Repaint nötig, was man ja eigentlich nicht braucht. Wie wär’s also mit klassischem HTML und CSS?
HTML und CSS sind die basalsten Werkzeuge, die uns Frontend-Devs zur Verfügung stehen. Deshalb nutze ich lieber diese, bevor ich mir eine 3rd-Party-Library reinhole, die erstens viele Sachen kann, die ich gar nicht brauche, und zweitens Client-Performance frisst, die an anderer Stelle nötiger gebraucht wird.
HTML/CSS it is
Gut, dann gehen wir es an. Da ich hauptberuflich nicht nur Charts und Diagramme erstelle, muss ich etwas recherchieren, wie ich das für den konkreten Fall am besten angehe. Das wohl wichtigste CSS-Property wird wohl image-mask werden, dazu aber später mehr. Außerdem sei hier bereits erwähnt, dass wir SASS verwenden, das macht es uns dann später ein bisschen einfacher. Außerdem ist ein CSS-Preprocessor sowieso (so gut wie) immer eine fabelhafte Idee.
Ein Kreis, der von links (-90°) bis rechts (90°) – also in der oberen Kreishälfte – den gewünschten Farbverlauf hat, bildet die Grundlage des Diagramms. Um den unteren Halbkreis – also der zwischen 90° und 270°, der derzeit einfach nur grün ist – kümmern wir uns später.
Ein kleiner weißer Kreis mittig darüber sorgt schon mal für den gewünschten Kreisrand, es soll ja kein Tortendiagramm werden.
Die Maske
Und jetzt kommt eigentlich schon der wichtigste Teil: die Maske. Diese erlaubt uns, Teile des Kreises, in unserem Fall die untere Hälfte, komplett auszublenden. Der restliche Teil kann halbtransparent bzw. opak angezeigt werden. Dazu können wir das Property mask-image verwenden, das einen conic-gradient – also einen konischen, kegelförmigen Verlauf – als Maske erlaubt. Für einen vollen Halbkreis sieht die Maske etwa so aus:
Der obere Halbkreis, der sichtbar sein soll, ist komplett opak schwarz, der untere Halbkreis, der nicht sichtbar sein soll, ist transparent. Wird diese Maske auf den Kreis angewandt, entsteht folgender Kreisbogen:
Das Diagramm gibt ja Prozentwerte wieder, der volle Halbkreis stellt also 100% dar. Für 50% sähe die Maske so aus:
Im Vergleich sieht man schon, was passiert: Der konische Verlauf beginnt wieder bei -90° und ist schwarz. Doch nun spannt sich dieser schwarze Bereich nur über die folgenden 90°. Danach folgt ein halbtransparenter Kegel, der den Halbkreis abschließt. Der Halbkreis unten bleibt wie vorher transparent. Das ergibt dann einen Kreisbogen, der so aussieht:
Ein bisschen SASS
Gut, jetzt wissen wir, wie wir 100% bzw. 50% darstellen. Aber wir wollen ja alle Prozentwerte anzeigen können?!
Ganz recht, und da benutzen wir SASS, bzw. die For-Schleifen und Variablen von SASS. Wir wissen, wir haben ein 180°-Stück zur Verfügung, das wir in 100 gleichmäßige Stücke unterteilen wollen. Also entspricht 1% einem Kreissegment von 1,8°. Wir legen nun einen CSS-Eintrag für jeden Prozentwert an:
Dadurch wird jeder Prozentwert definiert und kann per Klasse – „percent-{Wert}“, also etwa „percent-40“ – , angesprochen werden. Wenn beispielsweise das Backend, bzw das Template, den Prozentwert als Klasse ausgibt, benötigen wir für das Kreisbogendiagramm keine einzige Zeile JavaScript. Aber wir können natürlich direkt mit JavaScript Klassen hinzufügen und entfernen und so auch simpel Wertveränderungen visualisieren.
Der Pfeil in der Mitte wird ganz ähnlich erzeugt: Ein kleines <span>-Element, wird per Skew und Border-Radius zu einem abgerundeten Deltoid transformiert. Mit Hilfe der Klassen für die Prozente rotiert das Deltoid entsprechend.
Zu finden ist das Ganze im folgenden Codepen-Link, angereichert mit einer repräsentativen Grafik, wie die Maske mit den jeweiligen Prozentklassen aussieht. Mit Hilfe eines Sliders kann der gewünschte Wert verändert werden:
So, und damit sind wir ja schon am Ende angekommen – ich hoffe, es hat euch Spaß gemacht, die Genesis dieses kleinen Kreisbogendiagramms mitzuerleben. Hättet ihr es anders gelöst und wenn ja, wie und warum? Habt ihr Fragen oder spielt euch euch jetzt schon seit Minuten am Kreisbogendiagramm auf Codepen rum? Dann schreibt uns gern in die Kommentare!
Ich werd mich in der Zwischenzeit ans nächste Rätsel machen. Bis dahin, macht’s gut!
Du willst mit jemanden über das Thema plaudern?
Einen kostenlosen Termin mit CEO Susanne vereinbaren!Vom Projekt zur Partnerschaft Alles über unser UX Abo
Stefan Blumauer, Head of UX Design, erzählt uns über die Vorteile des UX Abos und wie es unseren Kunden hilft, ihre digitalen Produkte kosteneffizient zu optimieren und auf Kurs zu halten.
Jetzt lesenFolge #62 mit Susanne Liechtenecker
In Folge 62 besinnt sich Susanne auf die Anfänge dieses Podcasts und begrüßt keinen Gast, sondern erzählt über das Buch "Jäger, Hirten, Kritiker" von Richard David Precht und warum es sie inspiriert hat.
Jetzt anhören