CSS stĺpcové grafy s použitím moderných funkcií

Nové CSS funkcie môžu niekedy uľahčiť a zefektívniť kódovanie dizajnov, ktoré sme už vedeli vytvoriť. Táto efektivita môže vyplývať zo zníženého množstva kódu alebo hackov, alebo zo zlepšenej čitateľnosti vďaka novým funkciám.

V tomto duchu poďme obnoviť to, co sa nachádza pod kapotou stĺpcového grafu.

<ul class="chart" tabindex="0" role="list" aria-labelledby="chart-title"> <li class="chart-bar" data-value="32" tabindex="0" role="img" aria-label="32 percentage">32%</li> <!-- etc. -->
</ul>

Začneme vytvorením mriežky.

.chart { display: grid; grid-template-rows: repeat(100, 1fr); /* atď. */
}

Metrika grafu je založená na percentách, teda "nejaké číslo zo 100". Povedzme, že pracujeme s mriežkou obsahujúcou 100 riadkov. To by ju malo poriadne otestovať, však?

Ďalej pridáme stĺpce do mriežky pomocou vlastností grid-column a grid-row:

.chart-bar { grid-column: sibling-index(); grid-row: span attr(data-value number); /* atď. */
}

Hneď na úvod chcem poznamenať niekoľko vecí. Po prvé je to funkcia sibling-index(). Je úplne nová a v čase písania tohto článku má neúplnú podporu prehliadačov (poďme na to, Firefox!), hoci je momentálne podporovaná v najnovších verziách Chrome a Safari (ale zjavne nie na iOS). Po druhé je to funkcia attr(). Máme ju už nejaký čas, ale nedávno bola vylepšená a teraz prijíma data-atribúty. Takže keď máme jeden z nich v našom kóde — ako data-value="32" — je to niečo, čo funkcia dokáže prečítať.

S týmito funkciami na mieste je to vlastne všetko, čo potrebujeme na vytvorenie celkom pekného stĺpcového grafu v čistom CSS! Nasledujúca ukážka má záložné riešenia, takže môžete vidieť konečný výsledok aj v prípade, že váš prehliadač tieto nové funkcie ešte neprijal:

Áno, bolo to jednoduché, ale je najlepšie vedieť presne prečo to funguje. Takže si to rozoberme.

Automatické vytváranie stĺpcov mriežky

Deklarovaním funkcie sibling-index() na vlastnosti grid-column explicitne umiestňujeme položky zoznamu do po sebe idúcich stĺpcov. Hovorím "explicitne", pretože mriežke presne hovoríme, kam má umiestniť každú položku podľa jej atribútu data-value v kóde. Prvý <li> ide do prvého stĺpca, druhý <li> do druhého stĺpca a tak ďalej.

To je sila sibling-index() — mriežka inteligentne generuje poradie za nás bez toho, aby sme to museli robiť manuálne pomocou CSS premenných.

/* Prvý stĺpec: sibling-index() = 1 */
grid-column: sibling-index(); /* ...výsledkom je: */
grid-column: 1;
grid-column-start: 1; grid-column-end: auto; /* Druhý stĺpec: sibling-index() = 2 */
grid-column: sibling-index(); /* ...výsledkom je: */
grid-column: 2;
grid-column-start: 2; grid-column-end: auto; /* atď. */

Automatické vytváranie riadkov mriežky

Je to v podstate to isté! Ale v tomto prípade každý stĺpec zaberá určitý počet riadkov na základe percenta, ktoré reprezentuje. Mriežka získava tieto hodnoty z atribútu data-value v kóde, čím efektívne hovorí mriežke, aká vysoká by mala byť každá tyč v grafe.

/* Prvý stĺpec: data-value="32" */
grid-row: span attr(data-value number); /* ...výsledkom je: */
grid-row: span 32 /* Druhý stĺpec: data-value="46" */
grid-row: span attr(data-value number); /* ...výsledkom je: */
grid-row: span 46

Funkcia attr(), keď je poskytnutá s parametrom dátového typu (hodnota parametra number v našom prípade), prevedie hodnotu získanú funkciou attr() na tento konkrétny typ. V našom príklade funkcia attr() vracia hodnotu data-value ako typ <number>, ktorý sa potom použije na určenie počtu riadkov, ktoré majú zaberať jednotlivé stĺpce.

Vytvorme rôzne grafy!

Keďže máme základy tohto prístupu, rozhodol som sa veci trochu posunúť a ukázať, ako môžeme aplikovať rovnaké techniky na všetky druhy grafov len v CSS.

Napríklad môžeme použiť hodnoty grid-row na úpravu vertikálneho smeru stĺpcov:

Alebo môžeme vynechať stĺpce úplne a použiť namiesto nich značky:

Môžeme tiež vymeniť stĺpce a riadky pre horizontálne stĺpcové grafy:

Záver

Celkem vzrušujúce, však? Len sa pozrite na všetky spôsoby, ktorými sme to zvykli robiť pred dobou sibling-index() a vylepšenej funkcie attr():

• Making Charts with CSS (Robin Rendle, 2015)
• Making A Bar Chart with CSS Grid (Robin Rendle, 2017)
• More CSS Charts, with Grid & Custom Properties (Miriam Suzanne, 2017)
• Overlapping Bar Charts (Saleh Mubasher, 2022)