The Gauge: Kreisbogendiagramm mit HTML/CSS

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!