Erstellen Sie ein Balkendiagramm mit CSS Grid

0
44

Wenn Sie auf der Suche nach mehr überschaubaren Möglichkeiten zum erstellen von Balkendiagrammen, oder auf der Suche nach Anwendungsfällen der Praxis CSS-Grid-layout, ich hab dich!

Bevor wir mit der Arbeit beginnen auf die Grafik, ich möchte reden über die Kodierung der Balken, wenn Grid ist ein guter Ansatz für Graphen, und wir werden auch noch einige code-Entscheidungen, die Sie könnte prüfen, bevor Sie beginnen.

Vorwort

Die bar ist ein hübsches basic Form: Sie können die Kontrolle Ihrer Abmessungen mit CSS Breite, Höhe, Anzahl der raster oder Tabelle-Zellen, etc. je nachdem, wie Sie codiert haben. So weit wie Grafiken gehen, die Hauptsache, die wir kontrollieren möchten, ist die Höhe der Balken im Diagramm.

Controlling-Höhe mit Gitter-Zellen (wie hier) ist zweckmäßig für Konstruktionen, bei denen die Höhe stufenweise von einem festen Wert — keine in-betweens. Zum Beispiel, die signal bars in Handys oder, wenn Sie nichts dagegen haben, die Einstellung einer Menge von grid-Zeilen, um eine bessere Kontrolle der bar Höhe bis zu seinen kleinsten Wert, wie IRL Millimeterpapier.

Für meine Grafik, ich will gradient bars sowie vertikale und horizontale Achsenbeschriftungen. Also, machen Sie es einfach, ich habe beschlossen, die Kontrolle der bar Höhe mit Farbverlauf-Größe, und bestimmen Sie die Anzahl der raster-Zeilen auf der Grundlage der Anzahl der vertikalen Achsenbeschriftungen ich will.

Auch andere als der Inhalt für die Grafik — Balken, Achsen, Beschriftungen und Untertitel — es werden keine Daten im HTML –, wie Daten über bar Farben und Abmessungen.

data -* – Attribute werden verwendet, um diese Art von Informationen in HTML. Aber ich wollte nicht hin und her wechseln zwischen HTML und CSS, während die Kodierung und beschlossen, komplett zu trennen, den Inhalt vom design. Es ist völlig bis zu Ihnen. Wenn Sie fühlen, wie mithilfe von data-* profitieren könnten, Ihr Projekt, gehen Sie für es.

Ich habe ein Diagramm erstellt unten, dass Sie vielleicht nützlich finden, zu finden, während Sie Lesen den code. Es zeigt den graph und raster, die es enthält. Die zahlen repräsentieren den Rasterlinien ein.

Let ‘ s code diese Sache.

HTML

Das raster kann automatisch Gegenstände in oben-unten und Links-rechts-Richtungen. Um die Vorteile der, dass, ich werde die graph-Inhalte in der Reihenfolge y-Achsen-Beschriftungen (oben-unten), bars, und x-Achsen-Beschriftungen (Links-rechts). Auf diese Weise brauche ich nur zu schreiben, das HTML-markup und CSS setzen Sie die Stangen für mich!

<Abbildung aria-hidden=”true”>
<div class=”Grafik”>
<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>mit CSS-Grid &#x1f49b;</figcaption>
</figure>

<span class=”screenreader-text”>Lächelndes Gesicht mit schielenden Augen: 10%, grinsende Gesicht mit schielenden Augen: 65%, lächelndes Gesicht: 52%, grinsendes Gesicht mit lächelnden Augen: 100%, und das grinsende Gesicht: 92%.</span>

Hinweis: Wenn Sie Interesse an der Zugänglichkeit, der weiß, dass ich bin nicht ein accessibility-Experte. Aber wenn ich versuchte, die bars zugänglich, screen-reader-Erfahrung einfach gesaugt. Mit aria-labelledby war nicht so gut. So, ich habe eine text-Beschreibung der Graphik und versteckte es von der visuellen Darstellung. Das machte das Lesen viel natürlicher.

Die CSS

Dies ist, wo die Magie passiert.

/* Der grid-container */
.graph {
display: grid;
grid: repeat(10, auto) – max-Inhalt / max-Inhalte wiederholen(5, auto);
/* … */
}

Wir haben den vorgegebenen elf Zeilen und sechs Spalten , die in unser raster mit diesen zwei kleinen Zeilen CSS: zehn automatisch die Größe von Zeilen und einer Größe, um seine “maximale Inhalt”; eine Spalte, die Größe seiner “maximalen Inhalt” und fünf automatisch angepasst werden. CSS Grid ist eine schöne Sache.

Die Diagramm-Balken abdecken müssen das Gitter von der ersten Zeile an, die zweite-to-Letzte Reihe da sind wir mit die letzten, die für die x-Achsen-Beschriftungen. Ich gab den bars 100% Höhe, und ” grid-row: 1 / -2; was bedeutet “umfassen die Elemente von der ersten horizontalen Linie, bis auf die vorletzte.”

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

Die bars haben auch linearen Gradienten nach oben. Die Größe des farbigen Teil des Gradienten ist die Anzeige von bar – Höhe, die wiederum aus jeder bar eine eigene CSS-Regel wie eine benutzerdefinierte variable.

/* Eine grid-Elements */
.graphBar{
/* Das gleiche wie vorher */
hintergrund: palegoldenrod linear-gradient(top, gold-var(–h), transparent, var(–h));
}

Zur Steuerung der Breite der Balken und der Raum zwischen Ihnen ist, verwende ich eine Feste Breite und zentriert Sie mit rechtfertigen-self: center;. Sie können stattdessen grid-column-gap zu erstellen, die Lücken zwischen den Spalten, wenn Sie wollen. Hier der vollständige code, der zieht alles für die bars zusammen:

/* Eine grid-Elements */
.graphBar{
height: 100%;
grid-row: 1 / -2;
hintergrund: palegoldenrod linear-gradient(top, gold-var(–h), transparent, var(–h));
width: 45px;
rechtfertigen-self: center;
}

Haben Sie bemerkt, die CSS-Variablen (var(–h))? Wir müssen angeben, dass die exakte Höhe der einzelnen Balken und wir können diese variable verwenden, um zu bestimmen, die Höhe des hintergrund-Farbverlauf in Prozent:

.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%;
}
/* und so weiter… */

Das ist es! nach dem styling, der graph sieht wie folgt aus:

Finden Sie den Stift CSS-Bar-Graph mit Raster von Preethi (@rpsthecoder) auf CodePen.

Es gibt ein paar demo-styles in hier, aber alles haben wir bisher behandelt, bekommen Sie das Grundgerüst für ein Balkendiagramm. Die y-Achsenbeschriftungen ich erstellt, positioniert auf der Oberseite der Gitter-Linien für ein etwas übersichtlicheres layout. Ich habe die zylindrische Form und der Querschnitt Kanten der Balken durch die Verwendung von border-radius und elliptic pseudo-Elemente, jeweils. Ohne Sie, Sie erhalten eine gerade, rechteckige bar.

Das Jetpack WordPress-plugin läuft auf dieser Website, indem Sie nicht nur die verwandten Beiträge unten, aber die Sicherheit und backups, Markdown-support, site-Suche, Kommentar-Formularen, social-network-verbindungen und vieles mehr!