Átfedő oszlopdiagramok

Ahogy a neve is sugallja, az egymást átfedő diagramok két különböző adatkészletet jelenítenek meg egyetlen diagramban. Az ötlet az, hogy az átfedő sávok lehetővé teszik az adatok összehasonlítását, mondjuk, évről évre. Hasznosak olyan esetekben is, mint például a cél előrehaladásának követése, ahol az egyik oszlop a célt, a másik pedig az aktuális összeget mutatja.

De szépek is!

Valószínűleg a te elméd olyan, mint az enyém, és már kezdi kitalálni, hogyan tudnád ezt megtenni és kódolni. Így kezeltem.

A HTML

A jelöléssel kezdjük, mert hát ebből tudjuk, hogy mit igényel a stílus.

<div class="container">
  <div class="chart">
    <dl class="numbers">
      <dd><span>100%</span></dd>
      <!-- all the way to 0% -->
    </dl>
    <dl class="bars">
      <div>
          <dt>2018</dt>
          <dd>
            <div class="bar" data-percentage="50"></div>
            <div class="bar overlap" data-percentage="53"></div>
          </dd>
        </div>
      <div>
      <!-- more bars -->
    </dl>
  </div>
</div>

Leíró listákat fogunk használni (<dl>), mivel ez egy sokkal szemantikusabb megközelítés a szokásos rendezett és rendezetlen listákhoz képest. Egy másik ok az, hogy minden sávban elhelyezünk egy címkét. A normál listákon a definíciós listákkal ellentétben nincs címke vagy leírás hozzáadására. Egyszerűen fogalmazva, sokkal értelmesebb és olvashatóbb is.

Az első leírás lista, .numbers, az y tengely. A .bars itt jelennek meg az adatok, és készítettem egy definíciós listát az x-tengely felépítéséhez is. Minden listaelem tartalmaz egy .bar a címke pedig leíró kifejezésként (dt).

És mi a helyzet az adatokkal tulajdonság? A data-percentage A sáv magasságának megadására szolgál, amely végső soron az értékét jelenti az y tengelyen. Manuálisan beállíthatjuk a CSS-ben minden sávhoz, de ez ismétlődő, és sok extra kódot tartalmaz, amelyet néhány soros CSS-sel helyettesíthetünk.

Az alapvető diagramstílusok

Sok kétdimenziós iránnyal dolgozunk, így a flexbox a barátunk lesz, hogy mindent összerakjunk. El tudjuk készíteni a .chart elem egy rugalmas tároló, amely az y-tengely címkéit és a diagramot egymás mellé helyezi a row irány.

.chart {
  display: flex;
}

Még az irányt sem kell megadnunk, mivel a flexbox alapértelmezés szerint az row. Tegyük ezt meg, majd adjuk hozzá a flexboxot a címkék listájához az y tengely mentén, miközben már itt tartunk, mivel tudjuk, hogy ezek az column irány.

.numbers {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0 15px 0 0;
  padding: 0;
}

Akár hiszi, akár nem, a rudaknál ismét használhatjuk a flexboxot, mivel ezek is a-ban futnak row irány.

.bars {
  display: flex;
  flex: auto; /* fill up the rest of the `.chart` space */
  gap: 60px;
}

Ezt úgy állítottam be, hogy a .bars automatikusan elfoglalja a megmaradt helyet y-axis .numbers.

Valószínűleg észrevetted a HTML-ben, de a „sáv” valójában két sáv, ahol az egyik átfedi a másikat. Ezeket generikusba csomagoltam <div> hogy egy újabb rugalmas tárolót használhatunk, amely tartalmazza a definíciós kifejezést (<dt>) címkeként használjuk és a leírás részleteit (<dd>), amely mindkét oszlopértéket tartalmazza:

.bars > div {
  align-items: center;
  display: flex;
  flex-direction: column;
  flex: 1;
  position: relative;
}

Ezért minden sáv azonos szélességű lesz flex: 1. Viszonylag pozícionáljuk az elemet, miközben éppen dolgozunk, mert minden egyes rudat abszolút pozicionálni fogunk, és biztosítani akarjuk, hogy a tartályukban maradjanak.

Minden sávnak van egy százalékos magassága, amely megfelel a függőleges y-tengely mentén lévő értékeknek. Arra is emlékszel, hogy minden rúdnak adtunk a data-percentage attribútum — egy kis JavaScriptet fogunk beleszórni, amely ezen értékek alapján beállítja az egyes sávok magasságát.

var bars = document.querySelectorAll("dd .bar");
bars.forEach((bar) => {
  var height = bar.getAttribute("data-percentage");
  bar.style.height = height + "%";
});

Ez az alaptáblázatunk!

Azt akarjuk elérni, hogy a sávok átfedik egymást. Ez a következő!

Átfedő rudak

Vicces az a trükk, hogy az egyik sáv átfedje a másikat, mert gyakran próbálkozunk ezzel megakadályozása hogy a dolgok vizuálisan átfedjenek a CSS-ben. De ebben az esetben valójában azt akarjuk, hogy ez megtörténjen.

A rudak már átfedik egymást; csak nehéz megmondani. Figyeljük meg a HTML-ben, hogy a második .bar minden készletben van egy további .overlap osztály. Használjuk ezt a sávok megkülönböztetésére. Teljesen szabadon választhatja meg saját stílusát ehhez. Hozzáteszek egy kis párnázást a .overlap úgy, hogy szélesebbek legyenek, mint a többi rúd. Ezután módosítom a halmozási sorrendet a segítségével z-index hogy a .overlap bárok ülnek a többi rúd alatt.

Adjunk hozzá egy legendát

Legenda. Olyan nagyszerű szó, nem? Tele mindenféle jelentéssel. Ebben az esetben ez több mint kellemes érintés, mert vizuálisan két sávot zavarunk olyan helyeken, amelyek jellemzően egy ütem számára vannak fenntartva. A jelmagyarázat kontextust biztosít, amely elmagyarázza, hogy az egyes sávok mit jelentenek.

<figure class="legend">
  <div class="type1">Estimate</div>
  <div class="type2">Actual</div>
</figure>

Egy <figure> helyesnek érzem magam. Gyakran használják a képek burkolására, de a specifikáció azt mondja, „illusztrációk, diagramok, fotók, kódlisták stb. megjegyzésére használják”. és diagrammal dolgozunk. Valószínűleg használhatnánk egy rendezetlen listát a tételek tárolására, de én egy szemantikustól eltérőt választottam <div>. Ha valakinek van véleménye arról, hogy mi a legjobb módja ennek a megjelölésnek, szívesen fogadom a megjegyzéseket!

A stílus ismét csak Önön múlik:

Hozzáférhetőségi szempontok

Erőfeszítéseink nagy részét arra fordítottuk, hogy döntéseket hozzunk az átfedő oszlopdiagramunk jelölésével és stílusával kapcsolatban. Eddig nagyszerű, de még biztosan nem végeztünk, mert még többet tehetünk azért, hogy ez még több legyen hozzáférhető tapasztalat. Nem mindenki látó internetes szörfölő, ezért további munkát kell végezni a tartalom ilyen kontextusban való közvetítése érdekében.

Konkrétan a következőkre van szükségünk:

1. ellenőrizze, hogy a színeink között nagy a kontraszt,
2. lehetővé teszi a billentyűzet felhasználók számára, hogy minden átfedő sávon tabuláljanak, és
3. győződjön meg arról, hogy a képernyőolvasók bejelentik a tartalmat.

Színkontrasztok

Kellő kontrasztra van szükségünk a következők között:

• az egymást átfedő rudak
• a sávok és a diagram háttere
• a címke szövegét és hátterét

Előzetesen elkészítettem egy kis házi feladatot az eddig megvizsgált példákban használt színekkel kapcsolatban, ügyelve arra, hogy elegendő legyen kontraszt az előterek és a hátterek között a WCAG AA megfelelés elérése érdekében.

Íme, amit használok:

• Átfedő sávok: (#25DEAA és a #696969: 3.16:1 arány)
• Sávok és diagram háttere (#696969 és a #111: 3.43:1 arány)
• Y-tengely címke szövege és háttere (#fff és a #333: 12.63:1 arány)

Fülek a rudak között

Ennek eléréséhez a billentyűzet felhasználói az egyes sávokat a gombbal választhatják ki Tab kulcsot, elérhetjük a HTML-t tabindex tulajdonság. Használhatjuk a következő JavaScriptet a for-each függvényen belül, hogy hozzáadjuk ezt a tulajdonságot minden sávhoz (mindkettőhöz). A tabulátor indexét értékre állítjuk 0:

bar.setAttribute("tabindex", 0);

Hozzáadhatunk néhány CSS-t is, hogy javítsuk a körvonalat, amikor a sáv ki van jelölve, miközben itt vagyunk:

.bar:focus {
  outline: 1.5px solid #f1f1f1;
}

Tartalom bejelentése képernyőolvasókon

A kisegítő lehetőségek másik fontos szempontja, hogy a képernyőolvasók be tudják jelenteni a sávokat és azok százalékos arányát.

Két különböző diagrammal dolgozunk egyben: egy diagrammal, amely a „becsült” értékeket, a másikkal pedig a „tényleges” értékeket mutatja. Jó lenne, ha a felhasználó tudná, melyik sávot jelentik be, ezért címkézzük őket a aria-label tulajdonság:

<div class="bar" data-percentage="50" aria-label="Estimate">50%</div>

Figyeljük meg, hogy a sáv értéke közvetlenül a HTML-ben is megtalálható. Ezt bejelentjük, de továbbra is szeretnénk vizuálisan elrejteni. Használhatnánk transparent szöveget, de egy másik módszer a klasszikus .visually-hidden trükk az érték becsomagolásával span:

<div class="bar" data-percentage="50" aria-label="Estimate">
  <span class="visually-hidden">50%</span>
</div>

.visually-hidden {
  clip: rect(0 0 0 0); 
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; 
  width: 1px;
}

Amíg a tartalom bejelentéséről beszélünk, valószínűleg megakadályozhatjuk az y-tengely címkéinek beolvasását. Nem mintha a felhasználónak hiányozna az információ, mivel az egyes sávokhoz tartozó tényleges százalékok már elérhetőek és bejelentettek. Használhatjuk a aria-hidden attribútum ehhez:

<dl class="numbers" aria-hidden="true">
  <dd><span>100%</span></dd>
  <dd><span>80%</span></dd>
  <dd><span>60%</span></dd>
  <dd><span>40%</span></dd>
  <dd><span>20%</span></dd>
  <dd><span>0%</span></dd>
</dl>

Szerintem az is rendben van, hogy a képernyőolvasók figyelmen kívül hagyják a jelmagyarázatot, mivel ez egy vizuális segédeszköz:

<figure class="legend" aria-hidden="true">
  <div class="type1">Estimate</div>
  <div class="type2">Actual</div>
</figure>

Az utolsó demó

Ez egy pakolás!

Tessék, egy diagram átfedő sávokkal! Ez egy szép módja az adatok összehasonlításának, és remélem, hogy valamilyen projektben talál majd hasznot.

Megközelíthettük volna ezt más módon is? Természetesen! Minden, amiről itt szó volt, csupán végigvezeti a gondolatmenetemen. Gondolom, néhányan másképp közelítettek volna – ha Ön az, kérjük, ossza meg! Jó lenne látni más CSS-elrendezési technikákat és perspektívákat a kisegítő lehetőségek szögezésére.