Kennst du schon unsere UX-Academy?

Zeigt her!
Close

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“.

14. Juni 2022, von Lukas
E

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!

Lukas Kindermann

Meine Rolle bei Liechtenecker: Omnom-Fanboy Wenn es weder IT noch Digitalisierung gäbe, wäre mein Beruf: Handwerker Mein Herz schlägt für: Sachen machen und Erdäpfel essen
2 Kommentare.
Kommentar verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
christof
14. Juni 2022 um 09:09

sehr cool gelöst, großer fan von pure html/css lösungen 👏🏼

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
    Lukas Kindermann
    14. Juni 2022 um 12:49

    danke dir!

11 Tipps für UX Designer:innen
UX/UI Design – Blogbeitrag

11 Tipps für Junior UX Designer:innen

5. August 2022, von Blumi

11 Tipps für dich als Junior UX Designer:in, die du womöglich nicht in der Ausbildung oder im Bootcamp gelernt hast.

Jetzt lesen
Liechtenecker Leseliste #62 mit Susanne Liechtenecker
Inspiration – Podcasts

Folge #62 mit Susanne Liechtenecker

27. November 2020

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
Close