Erstellung eines Balkendiagramms mit CSS Grid

Wenn du nach übersichtlicheren Wegen suchst, Balkendiagramme zu erstellen, oder nach Anwendungsfällen suchst, um CSS Grid Layout zu üben, dann bist du hier richtig!

Bevor wir mit der Arbeit am Diagramm beginnen, möchte ich über die Codierung der Balken sprechen, wann Grid ein guter Ansatz für Diagramme ist, und wir werden auch einige Codeoptionen behandeln, die Sie vor dem Start in Betracht ziehen könnten.

Vorwort

Der Balken ist eine ziemlich einfache Form: Sie können seine Abmessungen mit CSS width, height, der Anzahl der Grid- oder Tabellenzellen usw. steuern, je nachdem, wie Sie ihn codiert haben. Was Diagramme angeht, so ist die wichtigste Sache, die wir steuern wollen, die Höhe der Balken im Diagramm.

Die Steuerung der Höhe mit Grid-Zellen (wie hier) ist praktisch für Designs, bei denen die Höhe inkrementell um einen festen Wert ist – keine Zwischenwerte. Zum Beispiel Signalbalken in Handys oder wenn es Ihnen nichts ausmacht, viele Grid-Zeilen festzulegen, um die Balkenhöhe bis zu ihrem kleinsten Wert besser zu kontrollieren, wie echtes IRL kariertes Papier.

Für mein Diagramm möchte ich gradientenfarbene Balken sowie vertikale und horizontale Achsenbeschriftungen. Um es einfach zu machen, habe ich beschlossen, die Balkenhöhe durch Gradientengrößen zu steuern und die Anzahl der Grid-Zeilen basierend auf der Anzahl der gewünschten vertikalen Achsenbeschriftungen zu bestimmen.

Außerdem werden, abgesehen von den Inhalten für das Diagramm – Balken, Achsenbeschriftungen und Bildunterschriften – keine Daten im HTML vorhanden sein, wie Daten zu Balkenfarben und -abmessungen.

data-* Attribute werden verwendet, um diese Art von Informationen in HTML bereitzustellen. Aber ich wollte beim Codieren nicht zwischen HTML und CSS wechseln und habe beschlossen, den Inhalt vollständig von dem Design zu trennen. Das liegt ganz bei Ihnen. Wenn Sie der Meinung sind, dass die Verwendung von data-* Ihrem Projekt zugute kommen könnte, tun Sie es.

Ich habe unten ein Diagramm erstellt, das Sie möglicherweise hilfreich finden, um beim Lesen des Codes darauf zu verweisen. Es stellt das Diagramm und das Grid, das es enthält, dar. Die Zahlen stellen Gitterlinien dar.

Lassen Sie uns das Ding codieren.

Das HTML

Grid kann Elemente automatisch in Ober-Unter- und Links-Rechts-Richtung platzieren. Um dies zu nutzen, werde ich die Diagramminhalte in der Reihenfolge der y-Achsenbeschriftungen (oben-unten), der Balken und der x-Achsenbeschriftungen (links-rechts) hinzufügen. Auf diese Weise muss ich nur das HTML-Markup schreiben und das CSS wird die Balken für mich platzieren!

<figure aria-hidden="true">
    <div class="graph">
        <span class="graphRowLabel">100</span>
        <span class="graphRowLabel">90</span>
        <span class="graphRowLabel">80</span>
        <span class="graphRowLabel">70</span>
        <span class="graphRowLabel">60</span>
        <span class="graphRowLabel">50</span>
        <span class="graphRowLabel">40</span>
        <span class="graphRowLabel">30</span>
        <span class="graphRowLabel">20</span>
        <span class="graphRowLabel">10</span>
        <div  class="graphBar"></div>
        <div  class="graphBar"></div>
        <div  class="graphBar"></div>
        <div  class="graphBar"></div>
        <div  class="graphBar"></div>
        <span><sup>Y </sup>&frasl;<sub> X</sub></span>
        <span class="graphColumnLabel">&#x1f60a;</span>
        <span class="graphColumnLabel">&#x1f604;</span>
        <span class="graphColumnLabel">&#x263a;&#xfe0f;</span>
        <span class="graphColumnLabel">&#x1f601;</span>
        <span class="graphColumnLabel">&#x1f600;</span>
    </div>
    <figcaption>Made with CSS Grid &#x1f49b;</figcaption>
</figure>

<span class="screenreader-text">Smiling face with squinting eyes: 10%, grinning face with squinting eyes: 65%, smiling face: 52%, grinning face with smiling eyes: 100%, and grinning face: 92%.</span>

Hinweis: Wenn Sie sich für Barrierefreiheit interessieren, wissen Sie, dass ich kein Experte für Barrierefreiheit bin. Aber als ich versuchte, die Balken zugänglich zu machen, war die Erfahrung mit Screenreadern einfach schlecht. Die Verwendung von aria-labelledby war auch nicht besonders gut. Also habe ich eine Textbeschreibung des Diagramms hinzugefügt und sie visuell ausgeblendet. Das machte das Lesen viel natürlicher.

Das CSS

Hier passiert die Magie.

/* The grid container */
.graph {
  display: grid;
  grid:  repeat(10, auto) max-content / max-content repeat(5, auto);
  /* ... */
}

Wir haben mit diesen beiden kleinen Zeilen CSS elf Zeilen und sechs Spalten in unserem Grid definiert: zehn automatisch dimensionierte Zeilen und eine, die auf ihren „maximalen Inhalt“ dimensioniert ist; eine Spalte, die auf ihren „maximalen Inhalt“ dimensioniert ist, und fünf automatisch dimensionierte.

Die Diagrammbalken müssen das Grid von der ersten Zeile bis zur vorletzten Zeile abdecken, da wir die letzte für die x-Achsenbeschriftungen verwenden. Ich habe den Balken eine Höhe von 100 % gegeben, und grid-row: 1 / -2;, was bedeutet „spanne die Elemente von der ersten horizontalen Gitterlinie bis zur vorletzten.“

/* A grid item */
.graphBar{
  height: 100%;
  grid-row: 1 / -2;
}

Die Balken haben auch einen linearen Gradienten nach oben. Die Größe des farbigen Teils des Gradienten ist der Indikator für die Balkenhöhe, die wiederum aus der eigenen CSS-Regel jedes Balkens als benutzerdefinierte Variable übernommen wird.

/* A grid item */
.graphBar{
  /* Same as before */
  background: palegoldenrod linear-gradient(to top, gold var(--h), transparent var(--h));
}

Um die Breite der Balken und den Abstand zwischen ihnen zu steuern, verwende ich eine feste Breite und zentriere sie mit justify-self: center;. Sie können stattdessen grid-column-gap verwenden, um Abstände zwischen Spalten zu erzeugen, wenn Sie möchten. Hier ist der vollständige Code, der alles für die Balken zusammenfügt.

/* A grid item */
.graphBar{
  height: 100%;
  grid-row: 1 / -2;
  background: palegoldenrod linear-gradient(to top, gold var(--h), transparent var(--h));
  width: 45px;
  justify-self: center;
}

Haben Sie die CSS-Variable (var(--h)) darin bemerkt? Wir müssen die genaue Höhe jedes Balkens angeben und können die Variable verwenden, um die Höhe des Hintergrundgradienten in Prozent zu bestimmen.

.graphBar:nth-of-type(1) {
  grid-column: 2;
  --h: 10%;
}
.graphBar:nth-of-type(2) {
  grid-column: 3;
  --h: 65%;
}
.graphBar:nth-of-type(3) {
  grid-column: 4;
  --h: 52%;
}
/* and so on... */

Das ist alles! Nach dem Styling sieht das Diagramm so aus:

Siehe den Pen CSS Balkendiagramm mit Grid von Preethi (@rpsthecoder) auf CodePen.

Hier gibt es ein paar Demo-spezifische Stile, aber alles, was wir bisher behandelt haben, liefert Ihnen das grundlegende Framework für ein Balkendiagramm. Die von mir erstellten y-Achsenbeschriftungen sind für ein etwas saubereres Layout über den Gitterlinien positioniert. Die zylindrische Form und die Querschnittskanten der Balken habe ich durch die Verwendung von border-radius und elliptischen Pseudoelementen erhalten. Ohne sie erhalten Sie einen geradlinigen rechteckigen Balken.