Het maken van een Grafiek met CSS Grid

0
9

Als u op zoek bent naar meer beheerbare manieren te maken staafdiagrammen, of op zoek naar use cases om te oefenen CSS Grid lay-out, ik heb je!

Voordat we beginnen met het werken op de grafiek, ik wil om te praten over het coderen van de bars, bij het Raster is een goede benadering voor de grafieken, en we zullen ook enkele code keuzes die je zou kunnen overwegen voordat u aan de slag.

Inleiding

De bar is een vrij fundamentele vorm: u kunt de controle van de afmetingen met CSS breedte, de hoogte, het aantal raster of tabel cellen, enz. afhankelijk van hoe je hebt gecodeerd. Zo ver als grafieken gaan, de belangrijkste ding dat we willen controle is de hoogte van de staven in de grafiek.

Besturen met een hoogte van Raster cellen (zoals hier) is handig voor het ontwerpen waar de hoogte is van incrementele door een vaste waarde — geen in-betweens. Bijvoorbeeld, signaal bars in telefoons of als je het niet erg instelling veel van raster rijen om een betere controle van de bar hoogte naar beneden naar de kleinste waarde, zoals IRL grafiek papier.

Voor mijn grafiek, ik wil gradiënt bars evenals verticale en horizontale assen labels. Dus, om het makkelijk te maken, heb ik besloten om de controle van de bar, met een hoogte van verloop lijmen, en het bepalen van het aantal van raster van rijen, op basis van het aantal verticale as labels die ik wil.

Ook andere dan de inhoud van de grafiek — bars, assen labels en bijschriften — er zal geen data aanwezig in de HTML-code, zoals gegevens over de bar kleuren en afmetingen.

gegevens-* kenmerken worden gebruikt om dat soort informatie in HTML. Maar dat wilde ik niet heen en weer schakelen tussen HTML en CSS tijdens het computeren, en besloot om volledig te scheiden van de inhoud van het ontwerp. Het is helemaal aan u. Als u het gevoel dat het gebruik van data-* zou kunnen profiteren van uw project, ga er voor.

Ik heb een diagram hieronder die u wellicht nuttig vindt om te verwijzen naar tijdens het lezen van de code. Het toont de grafiek en het raster bevat. De getallen geven het aantal rasterlijnen.

Laat de code van dit ding.

De HTML

Grid kan automatisch items in boven-onder en links-rechts routebeschrijvingen. Om te profiteren van dat, ik ga voeg de grafiek van de inhoud in de volgorde van de y-as etiketten (top-bottom), bars, en de x-as etiketten (links-rechts). Op deze manier, ik hoef alleen maar in te schrijven voor de HTML-markup en CSS plaats de staven voor mij!

<figuur aria-hidden=”true”>
<div class=”grafiek”>
<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>Gemaakt met CSS Grid &#x1f49b;</figcaption>
</figure>

<span class=”schermleessoftware-text”>Lachende gezicht met ogen loensen: 10%, grijnzend gezicht met ogen loensen: 65%, lachende gezicht: 52%, grijnzend gezicht met lachende ogen: 100%, en grijnzend gezicht: 92%.</span>

Opmerking: Als u geïnteresseerd bent in de toegankelijkheid, weten dat ik niet de toegankelijkheid expert. Maar toen ik probeerde te maken van de bars toegankelijk, schermlezer ervaring gewoon gezogen. Met aria-labelledby was dat niet goed. Zo, ik heb een beschrijving van de grafiek en de hid van de visuele weergave. Dat maakte het lezen van veel meer natuurlijk.

Het CSS

Dit is waar de magie gebeurt.

/* Het raster container */
.grafiek {
display: grid;
raster: herhaal(10, auto) max-content / max-inhoud herhalen(5, auto);
/* … */
}

We hebben gedefinieerd elf rijen en zes kolommen in onze raster met deze twee lijnen van CSS: tien automatisch het formaat van rijen en één formaat naar de “maximale inhoud”; een kolom aangepast aan de “maximale inhoud” en vijf automatisch aangepast. CSS Grid is een mooi ding.

De grafiek bars nodig om het rooster van de eerste rij naar de tweede naar de laatste rij sinds we gebruik van de laatste voor de x-as labels. Ik gaf de bars 100% height, en raster-rij: 1 / -2; wat betekent “span de items van de eerste horizontale rasterlijnen tot de een na laatste.”

/* Een rooster item */
.graphBar{
height: 100%;
grid-rij: 1 / -2;
}

De bars hebben ook lineair verloop gaat omhoog. De grootte van het gekleurde deel van de gradiënt is de indicator van de bar de hoogte, die op zijn beurt wordt van elke bar een eigen CSS-regel als een aangepaste variabele.

/* Een rooster item */
.graphBar{
/* Hetzelfde als voorheen */
achtergrond: palegoldenrod linear-gradient(top, goud var(–h), transparant (var–h));
}

Om de controle van de breedte van de staven en de ruimte tussen hen, ik gebruik een vaste breedte en gecentreerd ze met rechtvaardigen-zelf: center;. U kunt in plaats daarvan grid-column-gap te maken van de openingen tussen de kolommen als u wilt. Hier de volledige code die trekt alles voor de bars samen:

/* Een rooster item */
.graphBar{
height: 100%;
grid-rij: 1 / -2;
achtergrond: palegoldenrod linear-gradient(top, goud var(–h), transparant (var–h));
width: 45px;
rechtvaardiging-zelf: center;
}

Heb je de CSS variabele (var(–h) er? We moeten de exacte hoogte van elke staaf en kunnen we gebruik maken van de variabele te bepalen van de hoogte van het verloop van de achtergrond in termen van percentage:

.graphBar:nth-of-type(1) {
grid-kolom: 2;
–h: 10%;
}
.graphBar:nth-of-type(2) {
grid-kolom: 3;
–h: 65%;
}
.graphBar:nth-of-type(3) {
grid-kolom: 4;
–h: 52%;
}
/* en ga zo maar door… */

Dat is het! na de styling, de grafiek ziet er zo uit:

Zie de Pen CSS Balk met Raster door Preethi (@rpsthecoder) op CodePen.

Er zijn een paar demo-specifieke stijlen in hier, maar alles wat we tot dusver hebben besproken krijgt u de basis voor een staafgrafiek. De y-as labels die ik gemaakt worden geplaatst op de top van de rasterlijnen voor een iets schoner lay-out. Ik heb de cilindrische vorm en de doorsnede van de randen van de balken met behulp van border-radius en elliptisch pseudo-elementen, respectievelijk. Zonder hen, krijg je een straight up rechthoekige bar.

De Jetpack WordPress plugin draait op deze site, het voeden niet alleen de gerelateerde berichten hieronder, maar de beveiliging en de back-ups, Markdown ondersteuning, site search, reactieformulier, sociale netwerk-verbindingen, en meer!