So erstellen Sie ein responsives Säulendiagramm mit dem CSS-Rasterlayout

Ich spiele jetzt schon eine Weile mit Diagrammen herum und möchte aus Neugier eine bessere Möglichkeit finden, Diagramme mit CSS zu erstellen. Ich habe angefangen, mich mit Online-Open-Source-Diagrammbibliotheken zu beschäftigen, was mir dabei geholfen hat, neue und unbekannte Front-End-Technologien zu erlernen, wie zum Beispiel diese: CSS Grid.

Heute möchte ich mit Ihnen teilen, was ich gelernt habe: Wie man mit dem CSS-Rasterlayout ein normales, responsives Balkendiagramm erstellt. Zunächst das Effektbild:

Das Beispiel in diesem Artikel ist nur ein Experiment, um das CSS-Rasterlayout zu lernen. Ich lerne auch im Laufe der Zeit, daher hat der Code in diesem Artikel keinen großen Referenzwert.

Erste einfache Version

Es kann anfangs etwas verwirrend sein, konzentrieren wir uns also auf die Erstellung einer einfachen Version. Zuerst müssen wir das HTML-Markup für das Diagramm schreiben:

<div Klasse="Diagramm">
  <div Klasse="bar-1"></div>
  <div Klasse="bar-2"></div>
  <div Klasse="bar-3"></div>
  <div Klasse="bar-4"></div>
  <!-- Bis Takt-12 -->
</div>

Diese Div-Tags, die mit bar- beginnen, entsprechen einer Spalte im Balkendiagramm. Das ist alles HTML, das für den gesamten Artikel benötigt wird.

Folgen Sie nun meinen Schritten und einfachen Erklärungen, um mit CSS Schritt für Schritt den allgemeinen Stil des Balkendiagramms zu zeichnen. Machen Sie sich nicht zu viele Gedanken über die CSS-Semantik, die Ihnen möglicherweise unbekannt ist. Wir werden uns später auf die Einführung in das Wissen über CSS Grid konzentrieren.

Okay, fangen wir jetzt an, unseren CSS-Stil zu schreiben. Fügen wir zunächst einige notwendige Stile zum übergeordneten Element hinzu:

* {
  Box-Größe: Rahmenbox;
}

html,
Körper {
  Rand: 0;
  Hintergrundfarbe: #eee;
  Anzeige: Flex;
  Inhalt ausrichten: zentriert;
}

.diagramm {
  Höhe: 100vh;
  Breite: 70vw;
}

Wir benötigen 12 Balken im Diagramm mit 5 Pixel Abstand dazwischen. Um diese Anforderung zu erfüllen, können wir die folgenden Grid-bezogenen Stile für die übergeordnete Klasse .chart schreiben:

.diagramm {
  Anzeige: Raster;
  Raster-Vorlagenspalten: Wiederholung (12, 1fr);
  Raster-Vorlagenzeilen: Wiederholung (100, 1fr);
  Rasterspaltenabstand: 5px;
}

Für diejenigen, die mit dem Rasterlayout vertraut sind, ist dies ziemlich unkompliziert. Der obige Code besagt: „Ich möchte 12 Spalten, jede mit der gleichen Breite (1fr = 1 Bruchteil), deren Höhe in 100 gleiche Teile unterteilt ist, 1 gleich großer Teil in einer Zeile (damit es einfacher zu berechnen ist) und mit 5 Pixeln Abstand zwischen ihnen.“

An diesem Punkt ist unser Diagramm noch leer, da wir unseren untergeordneten Elementen nicht mitgeteilt haben, wie sie den Platz im Raster einnehmen sollen. Wir verwenden grid-row-start und grid-row-end um den vertikalen Raum im Raster zu füllen, und definieren dann die Höhe jedes untergeordneten Elements, indem wir diese beiden Eigenschaften ändern. Fügen Sie dem untergeordneten Element, beginnend mit der Stilklasse bar , Folgendes hinzu:

[Klasse*='Bar'] {
  Rasterzeilenstart: 1;
  Gitterzeilenende: 101;
  Rahmenradius: 5px 5px 0 0;
  Hintergrundfarbe: #ff4136;
}

Jetzt können Sie den folgenden Effekt erzielen:

Wir sagen jedem Balken, dass er oben im Raster (1) beginnen und unten (101) enden soll. Oben haben wir das Raster in 100 Zeilen unterteilt. Warum verwenden wir 101 als Wert für diese Eigenschaft? Wenn Sie diese Rastereigenschaften verwirren, ist das in Ordnung! Bevor wir fortfahren, wollen wir dies ein wenig untersuchen.

Gitternetzlinien verstehen

Eine Besonderheit des Grid-Layouts ist das Konzept der Gitterlinien, das für das Verständnis dieses neuen Layout-Tools sehr wichtig ist. Hier sehen Sie ein Diagramm, das zeigt, wie die Gitternetzlinien in einem Gitternetz mit vier Zeilen und vier Spalten gezeichnet werden:

Die entsprechenden Stile dieser vier Zeilen und vier Spalten sind wie folgt ( special-col ):

.Netz {
  Gitterabstand: 5px;
  Raster-Vorlagenspalten: Wiederholung (4, 1fr);
  Raster-Vorlagenzeilen: Wiederholung (4, 1fr);
}

.Sonderspalte {
  Gitterzeile: 2 / 4;
  Hintergrundfarbe: #333;
}

grid-row ist eine Abkürzung für grid-row-start und grid-row-end . Erstere gibt die Startposition eines Elements im Raster an, letztere die Endposition eines Elements im Raster. Beachten Sie, dass der schwarze Block an Rasterlinie 2 beginnt und an Rasterlinie 4 endet (nicht an Zeile 4). Wenn wir möchten, dass die schwarze Box alle 4 Zeilen ausfüllt, müssen wir an der 5. Gitterlinie enden, also bei 1/5. Es ist wichtig, dies zu verstehen.

Mit anderen Worten sollten wir uns untergeordnete Elemente nicht so vorstellen, dass sie ganze Zeilen oder Spalten in einem Raster einnehmen, sondern nur so, dass sie sich über diese Rasterlinien erstrecken. Es hat eine Weile gedauert, bis ich das Konzept verstanden und mich daran gewöhnt hatte, da ich mich kürzlich intensiver mit dem Tutorial von Jen Simmons zu diesem Thema beschäftigt habe.

Zurück zum Beispiel

Aus diesem Grund enden in unserem Beispieldiagramm oben alle Spalten beim Wert 101, da 101 die 101. Netzwerklinie und nicht die 100. Zeile darstellt.

Da unsere .chart nun vw/vh-Einheiten verwendet, verfügen wir über ein reaktionsfähiges Diagramm, ohne dass wir zusätzliche Arbeit zur Unterstützung der Reaktionsfähigkeit leisten müssen. Wenn Sie die Größe des Browsers ändern, werden Sie feststellen, dass er sich problemlos komprimieren oder strecken lässt und dabei immer den gesamten Ansichtsbereich einnimmt.

Nachdem wir das Konzept der Netzwerklinien verstanden haben, können wir die Höhe der Spalten ganz einfach anpassen. Wir müssen die Spaltenhöhen unterschiedlich gestalten.

.bar-1 {
  Rasterzeilenstart: 55;
}
.bar-2 {
  Rasterzeilenstart: 1;
}
...(leicht);

Zum Schluss färben wir die Spalten mit geraden Zahlen noch unterschiedlich ein:

[Klasse*='Balken']:n-tes-Kind(ungerade) {
  Hintergrundfarbe: #ff4136;
}

[Klasse*='Bar']:n-tes Kind(gerade) {
  Hintergrundfarbe: #0074d9;
}

Wirkung:

Auf diese Weise haben wir ein ansprechendes Balkendiagramm erstellt. Natürlich ist dieses Beispiel nur ein Anfang und bis zur praktischen Anwendung bleibt noch viel zu tun. Beispielsweise das Zeichnen von Anmerkungen und Achsen, das Einbinden realer Geschäftsdaten über JS usw.

Dies ist das Ende dieses Artikels zum Erstellen eines responsiven Balkendiagramms mithilfe des CSS-Rasterlayouts. Weitere relevante Inhalte zu CSS-Raster-Balkendiagrammen finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!