Å lage et søylediagram med CSS Rutenett

0
8

Hvis du er på utkikk etter mer overkommelige måter å lage søylediagrammer, eller i søk i bruk saker til praksis CSS Grid layout, jeg har deg!

Før vi begynner å arbeide på grafen, jeg ønsker å snakke om koding barer, når nettet er en god tilnærming for grafer, og vi vil også dekke noen etiske valg du bør vurdere før du setter i gang.

Forord

Baren er en ganske grunnleggende form: du kan kontrollere sine mål med CSS bredde, høyde, antall rutenett eller tabellceller, etc. avhengig av hvordan du har kodet det. Så langt som grafer gå, det viktigste vi ønsker å kontrollere, er høyden på stolpene i diagrammet.

Kontrollere høyde med Grid celler (som her) er praktisk for design hvor høyden er inkrementell av en fast verdi — ingen i betweens. For eksempel, signal barer i telefoner eller når du ikke har noe imot innstillingen mye av rutenettet rader til bedre kontroll på bar høyde ned til sin minste verdi, som IRL millimeterpapir.

For min graf, jeg vil gradient barer samt vertikale og horisontale akser etiketter. Så, for å gjøre det enkelt, jeg har bestemt meg for å kontrollere bar høyde med gradert dimensjonering og bestemme antall rutenett rader basert på antall vertikale aksen etiketter som jeg vil.

Også andre enn innholdet for graf — barer, akser etiketter, og teksten — det vil være ingen data som finnes i HTML-koden, som data om bar farger og dimensjoner.

data-* attributter brukes til å gi denne typen informasjon i HTML. Men jeg hadde ikke lyst til å bytte frem og tilbake mellom HTML og CSS mens koding, og bestemte seg for å fullstendig skille innhold fra design. Det er helt opp til deg. Hvis du føler for å bruke data-* kan være til nytte for prosjektet ditt, gå for det.

Jeg har laget et diagram som du kan finne nyttig å se mens du leser koden. Det viser grafen og et rutenett som inneholder det. Tallene representerer rutenett linjer.

La oss koden denne saken.

HTML

Rutenettet kan automatisk plassere elementer i topp-bunn og venstre-høyre-retningene. For å dra nytte av det, jeg kommer til å legge grafen innholdet i for y-aksen etiketter (øvre-nedre), barer, og x-aksen etiketter (venstre-høyre). Denne måten, trenger jeg bare å skrive HTML-koder og CSS skal plassere barer for meg!

<figur aria-skjult=”true”>
<div class=”graf”>
<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>Laget med CSS Grid &#x1f49b;</figcaption>
</figure>

<span class=”screenreader-text”>Smilende ansikt med skjeling øyne: 10%, smilende ansikt med skjeling øyne: 65%, smilende ansikt: 52%, smilende ansikt med smilende øyne: 100%, og flirer ansikt: 92%.</span>

Merk: Hvis du er interessert i tilgjengelighet, vet at jeg er ikke en tilgjengelighet ekspert. Men når jeg prøvde å gjøre barer tilgjengelig, skjermleseren opplevelse rett og slett sugd. Med aria-labelledby var ikke så bra heller. Så, jeg har lagt til en tekst-beskrivelse av grafen og gjemte det fra visual display. Som gjorde lesing mye mer naturlig.

CSS

Det er her magien skjer.

/* Rutenett-container */
.grafen {
visning: rutenett;
rutenett: repeat(10, auto) max-content / max-innhold gjenta(5, auto);
/* … */
}

Vi har definert elleve rader og seks kolonner i vårt rutenett med disse to små linjer med CSS: ti automatisk størrelse rader og én størrelse til sin “maksimalt innhold”; en kolonne størrelse til sin “maksimalt innhold” og fem automatisk størrelse. CSS-Grid er en vakker ting.

Grafen barer trenger for å dekke den rutenett fra den første raden til den nest siste rad siden vi bruker den siste for x-aksen etiketter. Jeg ga barer 100% høyde, og grid-rad: 1 / -2, som betyr “span elementene fra første vannrett rutenett linje til den nest siste.”

/* Et rutenett elementet */
.graphBar{
høyde: 100%;
grid-rad: 1 / -2;
}

Barene har også lineær gradient som går oppover. Størrelsen på den fargede delen av gradienten er indikatoren på bar høyde, som i sin tur er tatt fra hver bar sin egen CSS-regel som en tilpasset variabel.

/* Et rutenett elementet */
.graphBar{
/* Samme som før */
bakgrunn: palegoldenrod linear-gradient(til toppen, gull var(–h), transparent var(–h));
}

For å kontrollere bredden av barer og avstanden mellom dem, jeg bruker en fast bredde og sentrert dem med rettferdiggjøre selv: center;. Du kan i stedet bruke grid-kolonne-gap for å lage mellomrom mellom kolonner hvis du vil. Her’ full koden som trekker alt for barer sammen:

/* Et rutenett elementet */
.graphBar{
høyde: 100%;
grid-rad: 1 / -2;
bakgrunn: palegoldenrod linear-gradient(til toppen, gull var(–h), transparent var(–h));
bredde: 45px;
rettferdiggjøre selv: center;
}

La du merke til CSS-variabel (var(–h)) i det? Vi trenger å angi den nøyaktige høyden av hver stolpe, og vi kan bruke variabelen for å bestemme høyden på bakgrunnen gradient i form av prosentandel:

.graphBar:nth-of-type(1) {
grid-kolonnen: 2;
–h: 10%;
}
.graphBar:nth-of-type(2) {
grid-kolonnen: 3;
–h: 65%;
}
.graphBar:nth-of-type(3) {
grid-kolonnen: 4;
–h: 52%;
}
/* og så videre… */

Det er det! etter styling, grafen ser ut som dette:

Se Penn CSS stolpediagram med Rutenett av Preethi (@rpsthecoder) på CodePen.

Det er et par demo-bestemte stiler her, men alt vi har dekket så langt, får du et grunnleggende rammeverk for et søylediagram. Y-aksen etiketter opprettet jeg er plassert på toppen av rutenettet linjer for en litt renere layout. Jeg fikk den sylindriske formen og tverrsnitt kantene av barer ved hjelp av border-radius og elliptiske pseudo elementer, henholdsvis. Uten dem, vil du få en rett opp rektangulære bar.

Jetpack WordPress plugin går på dette nettstedet, slår ikke bare relaterte innlegg nedenfor, men sikkerhet og sikkerhetskopiering, Markdown-støtte, søk nettstedet, kommentar form, sosiale nettverk-tilkoblinger, og mer!