Skapa ett stapeldiagram med CSS Nätet

0
11

Om du letar efter mer hanterbart sätt att skapa stapeldiagram, eller i sökandet av användningsfall för att öva CSS Grid layout, jag fick dig!

Innan vi börjar arbeta på den graf, som jag vill tala om kodning av barer, när Nätet är en bra metod för grafer, och vi kommer även att omfatta vissa koden val du kan tänka på innan komma igång.

Förord

Baren är en ganska grundläggande form: du kan kontrollera dess dimensioner med CSS bredd, höjd, antal ikoner eller celler, etc. beroende på hur man har kodat det. Så långt som grafer gå, det viktigaste vi vill kontrollera höjden på staplarna i diagrammet.

Kontrollera höjd med rutorna (som här) är bekvämt för konstruktioner där höjden är stegvis genom ett fast värde — inga mellanhänder. Till exempel, signal barer i telefoner eller när du inte har något emot att ställa en hel del av rutnätet rader för att bättre styra bar höjd ner till dess minsta värde, som IRL rutat papper.

För min graf, jag vill lutning barer samt vertikala och horisontella axlarna etiketter. Så, för att göra det enkelt har jag beslutat mig för att styra bar höjd med lutning dimensionering och bestämma antalet nätet rader baserat på antal vertikala etiketter för kategoriaxel jag vill.

Även andra än innehållet för grafen — barer, axlar etiketter och bildtexter — det blir inga data som finns i HTML, liksom data om färger och dimensioner.

data -* – attribut används för att ge denna typ av information i HTML. Men jag ville inte att växla fram och tillbaka mellan HTML och CSS även kodning, och bestämde sig för att helt separera innehåll från design. Det är helt upp till dig. Om du känner för att använda data-* kan dra nytta av ditt projekt, gå för det.

Jag har skapat en diagrammet nedan som du kan ha nytta av att se och läsa koden. Det visar diagram och rutnät som innehåller det. Siffrorna representerar linjerna.

Låt kod här sak.

HTML –

Rutnätet automatiskt kan placera objekt i topp-botten och vänster-höger riktning. För att dra fördel av det, jag kommer att lägga grafen innehållet i för y-axeln etiketter (uppifrån-ned), barer, och x-axeln etiketter (vänster-höger). På detta sätt, jag behöver bara skriva HTML-kod och CSS kommer att placera pinnarna för mig!

<figur aria-hidden=”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>med CSS Grid &#x1f49b;</figcaption>
</bild>

<span class=”talsyntes-text”>Leende ansikte kisar med ögonen: 10%, grinande ansikte med ihopknipna ögon: 65%, leende ansikte: 52%, grinande ansikte med leende ögon: 100%, och grinande ansikte: 92%.</span>

Obs: Om du är intresserad av tillgängligheten, vet att jag inte är en tillgänglighet expert. Men när jag försökte göra barer tillgänglig, skärmläsare upplevelse helt enkelt suger. Med aria-labelledby var inte så bra heller. Så, jag lade till en text-beskrivning av graf och gömde den från den visuella displayen. Det gjorde att läsa mycket mer naturligt.

CSS

Det är där det magiska händer.

/* Rutnätet behållaren */
.diagram {
display: nätet.
rutnät: upprepa(10, auto) max-content / max-innehåll upprepa(5, auto);
/* … */
}

Vi har definierat elva rader och sex kolumner i vårt nät med dessa två små rader CSS: tio automatiskt storlek rader och en storlek till sitt “högsta halt”, en kolumn storlek till sitt “högsta halt” och fem automatiskt storlek. CSS-Nätet är en vacker sak.

Grafen barer behöver för att täcka nätet från första raden till den näst sista raden eftersom vi använder oss av den sista för x-axeln etiketter. Jag gav barer 100% höjd, och grid-rad: 1 / -2, vilket betyder “span objekt från första horisontella grid linje tills den näst sista.”

/* Ett rutnät objekt */
.graphBar{
höjd: 100%;
grid-rad: 1 / -2;
}

Barer har också linjär gradient går uppåt. Storleken på den färgade delen av gradienten är den indikator på bar höjd, som i sin tur är hämtade från varje stapel egen CSS-regel som en egen variabel.

/* Ett rutnät objekt */
.graphBar{
/* Samma som innan */
bakgrund: palegoldenrod linear-gradient(till toppen, guld var(–h), öppet var(–h));
}

För att styra bredden på staplarna och utrymmet mellan dem, jag använder en fast bredd och centrerad dem med motivera-self: center;. Du kan istället använda grid-kolumn-gap för att skapa klyftor mellan kolumner om du vill. Här en ” fullständig kod som drar allt för pinnarna tillsammans:

/* Ett rutnät objekt */
.graphBar{
höjd: 100%;
grid-rad: 1 / -2;
bakgrund: palegoldenrod linear-gradient(till toppen, guld var(–h), öppet var(–h));
bredd: 45px;
motivera-self: center;
}

Märkte du CSS-variabel (var(–h)) i det? Vi behöver ange exakta höjden på varje stapel och kan vi använda en variabel för att bestämma höjden på bakgrunden gradient i termer av procent:

.graphBar:n: te-av-typ(1) {
grid-kolumn: 2;
–h: 10%;
}
.graphBar:n: te-av-typ(2) {
grid-kolumn: 3;
–h: 65%;
}
.graphBar:n: te-av-typ(3) {
grid-kolumn: 4;
–h: 52%;
}
/* och så vidare… */

Det är det! efter styling, grafen ser ut så här:

Se Pennan CSS stapeldiagram med Rutnät av Preethi (@rpsthecoder) på CodePen.

Det är några demo-specifika stilar i här, men allt vi har täckt så långt får du den grundläggande ramen för ett stapeldiagram. Y-axeln etiketter skapade jag är placerade på toppen av linjerna för en snyggare layout. Jag fick cylindrisk form och tvärsnitt kanterna av barer med hjälp av border-radius och elliptiska pseudo-element, respektive. Utan dem, kommer du att få en rakt upp rektangulärt bar.

Jetpack WordPress plugin som körs på denna webbplats, driver inte bara relaterade inlägg nedan, men säkerhet och backup, Wiki-stöd, sök på sajten, kommentera form, sociala nätverk, och mycket mer!