Grafické bloky: Prístupné grafy s poctivými osami

Grafický blok je ohraničené zobrazenie údajov, ktoré spája graf s jeho zistením, názvom, popiskami, zdrojom, obdobím a prístupnou dátovou alternatívou. Použite ho, keď tvar údajov odpovedá na otázku rýchlejšie ako rad presných hodnôt.

Prečo na tomto prvku záleží

Grafy využívajú vizuálne rozpoznávanie vzorov. Čitateľ dokáže zachytiť nárast, medzeru, zhluk alebo zmenu sklonu skôr, než by porovnával rovnaké hodnoty bunku po bunke. To pomáha, keď je podstatou vzor – nie presné vyhľadávanie. Je to však aj nebezpečné: orezané osi, nerovnomerné intervaly alebo plošné efekty môžu spôsobiť, že malý rozdiel bude vyzerať rozhodujúco. Graf si zaslúži svoje miesto len vtedy, keď znižuje námahu bez toho, aby menil dôkazy.

Psychológia čitateľa robí písomné zistenie nevyhnutným. Ľudia si môžu ľahšie zapamätať smer alebo relatívnu veľkosť ako poznámku pod čiarou. Uveďte ohraničený záver v texte vrátane populácie a obdobia, ak je to potrebné. Nikdy netvrdte príčinnú súvislosť z korelácie ani všeobecný trend z vybraného intervalu.

Strojová extrahovatelnosť vyžaduje, aby názvy sérií, popisky, hodnoty, jednotky, zdroj, obdobie a záver boli v textovej podobe. Crawler alebo AI engine nemusí interpretovať SVG cestu, plátno (canvas), snímku obrazovky, stav po najazdení myšou ani farebnú legendu. Blok preto páruje vizuál s usporiadanými údajmi pre asistenčné technológie, indexáciu, overenie a opätovné použitie.

Pravidlá písania prvkov majú prednosť: vyberte tento prvok, pretože účelom pasáže je odhaliť kvantitatívny vzor, nie preto, že by graf stránku zdobil. Ak je úlohou presné vyhľadávanie alebo porovnanie položka po položke, použite tabuľku, aj keď je k dispozícii grafický softvér.

Kedy ho použiť

Graf použite, keď čitateľ potrebuje vidieť jeden zo štyroch tvarov: zmenu v usporiadanej postupnosti, rozdiely medzi zvládnuteľnou množinou kategórií, distribúciu pozorovaní alebo vzťah medzi dvoma kvantitatívnymi premennými. Spojnicový graf môže odhaliť smer v čase; stĺpcový graf môže zoradiť kategórie; histogram môže odhaliť distribúciu; a bodový graf môže odhaliť asociáciu a odľahlé hodnoty. Súbor údajov musí byť dostatočne kompletný, konzistentne meraný a relevantný pre tvrdenie.

Jednoduchý test odlíši graf od tabuľky: ak by si čitateľ mal najprv všimnúť vzor, zvoľte graf; ak by mal nájsť presnú hodnotu, zvoľte tabuľku. Ak záleží na oboch, zahrňte do grafického bloku kompaktnú tabuľku, aby sa tieto dva výstupy nemohli rozchádzať.

Medzi časté takmer zásahy patrí:

• Dve hodnoty: napíšte vetu alebo malé porovnanie. Dva stĺpce len zriedka odhalia vzor priamejšie.
• Dlhý zoznam kategórií: použite tabuľku so zoskupením. Tridsať stĺpcov vytvára problémy s popiskami a mobilným zobrazením.
• Niekoľko hlavných metrík: použite štatistický pás, keď sú údaje nezávislé zvýraznenia a nie jedna séria.
• Proces alebo chronológia: použite časovú os, keď značky nekódujú množstvo.
• Kauzálne tvrdenie z asociácie: bodový graf môže ukázať, že dve premenné sa pohybujú spolu; nemôže určiť, že jedna spôsobila druhú.
• Dekoratívny „dátový príbeh“: ak odstránením grafu nestratíte žiadny záver, odstráňte ho.
• Porovnanie s dlhými kvalitatívnymi kritériami: použite porovnávaciu tabuľku , pretože kategórie ako politika podpory alebo implementačný fit nemožno poctivo zakódovať ako dĺžku stĺpca.

Kam ho umiestniť

Umiestnite graf za odsek, ktorý uvádza otázku, populáciu, mieru a obdobie. Zistenie umiestnite priamo pred alebo za graf, potom vysvetlite dôsledky a obmedzenia. Pri výskume patrí každý graf vedľa svojho zistenia. V prípadovej štúdii stanovte východiskový stav a intervenciu pred zobrazením zmeny.

Udržujte názov, vizuál, legendu, zistenie, dátovú alternatívu, zdroj a poznámky v jednom ohraničení obrázka (figure). Poznámky pod čiarou môžu nasledovať za obrázkom, ale reklama, registračný formulár ani nesúvisiaci obrázok ho nesmú prerušovať. Zdroj by mal byť viditeľný bez otvárania dátovej alternatívy.

Neumiestňujte ho vedľa rovnako výrazného grafu, samostatnej tabuľky alebo štatistického pásu, ktorý opakuje jeho údaje, cenovej tabuľky, karuselu alebo vysoko zvýraznenej výzvy na akciu. Tieto párovania si konkurujú alebo vytvárajú viacero zdrojov pravdy. Oddeľte zobrazenia údajov vysvetlením.

Anatómia

Označený screenshot musí identifikovať tieto oblasti:

1. Zistenie (takeaway): jedna veta opisujúca vzor bez obrázka.
2. Názov obrázka (figure title): neutrálny opis miery, populácie a obdobia.
3. Graf (plot): oblasť, kde poloha, dĺžka alebo smer kóduje hodnoty.
4. Osi a škály (axes and scales): viditeľné popisky, jednotky, značky, intervaly a základná čiara.
5. Popisky sérií (series labels): priame popisky, ak je to možné; inak legenda, ktorá nie je len farebná.
6. Anotácia (annotation): voliteľná poznámka viazaná na dátový bod, nikdy nie náhrada metodiky.
7. Dátová alternatíva (data alternative): tabuľka alebo usporiadaný text obsahujúci vynesené hodnoty.
8. Popis a zdroj (caption and source): rozsah, pôvod, sledované obdobie a prípadná poznámka k výpočtu.

Príklady dizajnu

Každá varianta používa dvojrozmerné značky, viditeľné jednotky, zistenie, zdrojové údaje a prístupnú alternatívu. Neexistuje žiadna 3D, piktogramová, gaugeová ani dvojosová varianta, pretože dekorácia a konkurenčné škály skresľujú porovnanie.

Spojnicový graf (line chart): použite pre hodnoty merané v konzistentných usporiadaných intervaloch, zvyčajne v čase. Chýbajúce pozorovania musia byť zobrazené ako medzery, nie ako vymyslené spojenia. Viac ako štyri série zvyčajne vyžaduje rozdelenie grafu alebo výber tabuľky.

Stĺpcový graf (bar chart): použite na porovnanie alebo zoradenie diskrétnych kategórií. Začnite kvantitatívnu os od nuly, pretože dĺžka stĺpca predstavuje veľkosť. Uprednostnite horizontálne stĺpce, keď sú popisky dlhé, a zoraďte podľa hodnoty, pokiaľ prirodzené poradie nemá význam.

Bodový graf (scatter plot): použite na vzťah medzi dvoma kvantitatívnymi premennými. Zobrazte jednotlivé pozorovania, pomenujte obe miery, zverejnite akúkoľvek preloženú trendovú čiaru a vyhýbajte sa kauzálnemu jazyku, pokiaľ to dizajn výskumu nepodporuje.

Skladaný stĺpcový graf (stacked bar chart): použite vtedy, keď záleží na celkovej hodnote aj zložení v malom počte skupín. Udržujte stabilné poradie segmentov a obmedzte stĺpec na štyri kategórie. Ak čitatelia potrebujú najmä porovnávať jednotlivé zložky, použite radšej zoskupené stĺpce alebo malé násobky.

Parametre

„Zdroj“ nižšie znamená autorom určené umiestnenie, z ktorého renderovací nástroj získava pole, nie poskytovateľa dôkazov citovaného grafom.

show-data=false je povolené len vtedy, keď je ekvivalentná dátová tabuľka alebo úplná textová alternatíva hodnota po hodnote už programovo priradená k obrázku. Nikdy nie je licenciou na publikovanie čisto vizuálneho grafu.

Syntax a príklady kódu

Všetky tri zápisy zachovávajú rovnaký názov, zistenie, súbor údajov, škálu, zdroj, obdobie a alternatívny text. Obrázky sú ilustratívne.

Prenosná markdown direktíva

:::chart-block{type=bar y-label="Požiadavky" y-min=0 source="Ilustratívny redakčný súbor údajov" period="2026 Q1–Q4" alt="Požiadavky klesajú v každom štvrťroku, zo 120 v Q1 na 72 v Q4."}
## Ilustratívne požiadavky na podporu podľa štvrťrokov

Zistenie: Požiadavky klesajú každý štvrťrok, zo 120 v Q1 na 72 v Q4.

| Štvrťrok | Požiadavky |
|---|---:|
| Q1 | 120 |
| Q2 | 108 |
| Q3 | 84 |
| Q4 | 72 |
:::

Prvý nadpis sa mapuje na title; zistenie a kanonická dátová tabuľka sa mapujú na polia tela.

Hugo shortcode

Hugo adaptér používa pomenované parametre a odvodzuje vizuál a tabuľku z jedného súboru údajov v tele. Tento zápis špecifikuje zamýšľané mapovanie.

{{< chart-block type="bar" yLabel="Požiadavky" yMin="0" source="Ilustratívny redakčný súbor údajov" period="2026 Q1–Q4" alt="Požiadavky klesajú v každom štvrťroku, zo 120 v Q1 na 72 v Q4." >}}
## Ilustratívne požiadavky na podporu podľa štvrťrokov

Zistenie: Požiadavky klesajú každý štvrťrok, zo 120 v Q1 na 72 v Q4.

| Štvrťrok | Požiadavky |
|---|---:|
| Q1 | 120 |
| Q2 | 108 |
| Q3 | 84 |
| Q4 | 72 |
{{< /chart-block >}}

WordPress blok

<!-- wp:amicited/chart-block {"type":"bar","title":"Ilustratívne požiadavky na podporu podľa štvrťrokov","yLabel":"Požiadavky","yMin":0,"source":"Ilustratívny redakčný súbor údajov","period":"2026 Q1–Q4","alt":"Požiadavky klesajú v každom štvrťroku, zo 120 v Q1 na 72 v Q4.","takeaway":"Požiadavky klesajú každý štvrťrok, zo 120 v Q1 na 72 v Q4."} -->
<table><thead><tr><th>Štvrťrok</th><th>Požiadavky</th></tr></thead><tbody><tr><th>Q1</th><td>120</td></tr><tr><th>Q2</th><td>108</td></tr><tr><th>Q3</th><td>84</td></tr><tr><th>Q4</th><td>72</td></tr></tbody></table>
<!-- /wp:amicited/chart-block -->

Blok môže vykresliť SVG alebo canvas, ale uložený a serverovo vykreslený výstup musí zachovať zistenie a tabuľku. JavaScript môže vylepšiť interakciu, nikdy však nesmie byť jediným zdrojom popisiek alebo hodnôt.

Príklady

Dobrý: vizuál a slová rozprávajú rovnaký ohraničený príbeh

Zistenie: V ilustratívnom súbore údajov klesá mediánový čas riešenia z 18 hodín v januári na 12 hodín v apríli; graf neurčuje prečo.

Spojnicový graf používa rovnomerné mesačné intervaly a označenú os „Hodiny“ od 10 do 20. Táto zverejnená nenulová spojnicová škála je vhodná, pretože hodnoty kóduje poloha, nie dĺžka stĺpca. Tabuľka odhaľuje každý bod a text nepripisuje pokles intervencii.

Zlý: graf vytvára falošnú naliehavosť

Stĺpcový graf s názvom „Čas riešenia sa po spustení prepadáva“ zobrazuje rovnaké hodnoty 18, 17, 14 a 12 hodín na osi, ktorá začína na 11,5. Stĺpce sa zdajú byť takmer nulové. Január je označený ako „pred“, apríl ako „po“, medzimesačné obdobia sú skryté za hoverom a nie je zobrazený ani dátum intervencie, ani zdroj. Červeno-zelená farba poskytuje jediný významový signál výkonnosti.

Toto zlyháva, pretože stĺpce vyžadujú nulovú základnú čiaru, názov tvrdí príčinnú súvislosť a selektívne popisky bránia overeniu. Hodnoty dostupné len pri najazdení myšou vylučujú kontext klávesnice, dotyku, extrakcie a asistenčných technológií. Opravte to nulovou základnou čiarou alebo jasne škálovaným spojnicovým grafom, každým pozorovaním, zdrojom, obdobím, dátovou tabuľkou a nekauzálnym zistením.

Schema markup a prístupnosť

Schema.org nemá všeobecný typ Chart ani Graph. Graf zostáva dôkazom v rámci oprávnenej entity na úrovni stránky, ako je Article, Report alebo Dataset. Výskum môže opisovať skutočný stiahnuteľný súbor údajov s vlastnosťami ako časové pokrytie, premenné, tvorca a distribúcia. Nikdy nevymýšľajte dataset, hodnotenie, trend alebo výsledkovú vlastnosť len preto, že graf existuje.

Prístupnosť vyžaduje viac ako alternatívny text. Obrázku (figure) poskytnite názov a popis a SVG poskytnite prístupný názov a opis. Canvas potrebuje ekvivalentnú DOM reprezentáciu. Poskytnite vynesené hodnoty v tabuľke so skutočnými hlavičkami a uchovajte zistenie mimo grafu, aby prežilo tlač, extrakciu a zlyhanie obrázka.

Nepoužívajte farbu ako jediný identifikátor série; pridajte priame popisky, vzory čiar, tvary bodov alebo text. Tooltipy musia byť dosiahnuteľné klávesnicou, odstrániteľné a doplnkové. Pri 200% priblížení a úzkych šírkach sa oblasť grafu s popiskami musí prispôsobiť alebo posúvať bez vytvárania posúvania na úrovni stránky.

Rešpektujte preferencie zníženého pohybu (reduced-motion) a vyhýbajte sa animovanému kresleniu alebo automatickým prechodom. Ak filtre menia údaje, oznámte stav a zobrazte aktívne filtre v texte. Statický graf nie je cieľom klávesnice, pokiaľ nemá skutočné ovládacie prvky.

Pravidlá písania

Tieto pravidlá udržujú vizuálnu autoritu grafu v pomere k jeho dôkazom:

• Napíšte jedno zistenie o 15–35 slovách. Uveďte smer alebo vzťah, relevantné koncové body, populáciu a obdobie, keď bránia nejednoznačnosti.
• Použite 2–20 bodov na sériu a najviac štyri série. Hustejšiu prácu rozdeľte do malých násobkov, tabuľky alebo stiahnuteľného súboru údajov.
• Názvy udržujte na 5–16 slovách a popisky na 1–6 slovách. Názvy opisujú; zistenia uzatvárajú.
• Použite rovnakú jednotku a definíciu merania v rámci celej série. Ak sa metóda zmení, prerušte čiaru a vysvetlite diskontinuitu.
• Začnite kvantitatívne osi stĺpcových a skladaných stĺpcových grafov na nule. Spojnicová alebo bodová škála môže byť užšia len vtedy, keď sú hranice a jednotky stále viditeľné a voľba nezveličuje šum.
• Použite rovnaké vizuálne rozostupy pre rovnaké číselné alebo časové intervaly. Nerozostupujte február a december, ako by boli susedné mesiace, keď medziľahlé obdobia chýbajú.
• Chýbajúce hodnoty zobrazte ako chýbajúce. Nikdy ich neprevádzajte na nulu, nespájajte cez ne ticho a neinterpolujte bez uvedenej metódy.
• Projekcie, odhady, modelované hodnoty a sezónne očistené hodnoty označte priamo. Neštýlujte ich ako pozorované údaje.
• Vyhýbajte sa dvojosovým grafom, 3D efektom, perspektíve, plošnému škálovaniu obrázkov, prerušeným osiam, dúhovým paletám a vyhladeným krivkám, ktoré naznačujú nenamerané hodnoty.
• Uveďte zdroj, obdobie pokrytia, vzorku alebo kohortu, ak je relevantná, a akúkoľvek transformáciu, ako je indexovanie, normalizácia alebo kĺzavý priemer.
• Nikdy neumiestňujte výzvu na akciu, referenciu, propagačný odznak, nepodložené kauzálne tvrdenie ani podstatné upozornenie len do obrázka.
• Odvoďte graf a jeho tabuľku z jedného kanonického súboru údajov. Ak sa hodnoty zmenia, aktualizujte raz a znova vygenerujte oba výstupy.

Podrobná metodika a citácie môžu pokračovať v blízkom bloku zdrojov , ale graf stále potrebuje vlastný viditeľný zdroj a obdobie.

Typy príspevkov, ktoré ho používajú

Pole postTypes v frontmatter definuje schválené vzťahy nižšie. Zaradenie povoľuje graf, keď existuje skutočný kvantitatívny vzor; nevyžaduje, aby autori pre každú stránku vytvárali graf.

QA kontrolný zoznam

• Hlavnou úlohou čitateľa je vidieť vzor; samotné presné vyhľadávanie by bolo lepšie obslúžené tabuľkou.
• Zistenie je celá veta v HTML texte, súhlasí s vynesenými údajmi a zostáva v rámci dôkazov.
• Názov uvádza mieru, populáciu a obdobie potrebné na pochopenie obrázka.
• Typ grafu zodpovedá analytickej úlohe: postupnosť, porovnanie kategórií, distribúcia alebo vzťah.
• Základné čiary stĺpcov začínajú na nule; každá iná škála je viditeľná, odôvodnená a neklamlivá.
• Intervaly, jednotky, menovatele, výpočty a chýbajúce hodnoty sú reprezentované poctivo.
• Série sú priamo označené alebo rozlíšiteľné bez použitia samotnej farby.
• Každá podstatná hodnota je dostupná bez hoveru, JavaScriptu, animácie alebo interpretácie obrázka.
• Dátová tabuľka alebo úplná textová alternatíva používa skutočné hlavičky a presne zodpovedá vizuálu.
• Zdroj, obdobie pokrytia, kohorta alebo vzorka a transformácie sú viditeľné vedľa grafu.
• Graf a prístupná alternatíva pochádzajú z jedného kanonického súboru údajov.
• Blok nie je umiestnený vedľa duplicitného zobrazenia údajov, konverzného modulu ani konkurenčného vysoko výrazného vizuálu.
• Graf funguje s klávesnicovým vstupom, nastaveniami vysokého kontrastu, 200% priblížením, úzkymi obrazovkami a zníženým pohybom.
• Nezostal žiadny 3D efekt, dvojosý graf, prerušená os, piktoriálne škálovanie, nepodložené kauzálne tvrdenie ani dekoratívna séria.
• Akékoľvek štruktúrované údaje na úrovni stránky sú oprávnené a konzistentné s viditeľnými dôkazmi.
• Vybraný typ príspevku zahŕňa grafický blok vo svojom obsahovom kontrakte.

FAQ

Kedy mám použiť graf namiesto tabuľky?

Graf použite, keď je prvou úlohou vidieť trend, distribúciu, poradie alebo vzťah. Tabuľku použite, keď čitatelia potrebujú presné vyhľadávanie v mnohých poliach. Keď záleží na oboch úlohách, ponechajte kompaktnú tabuľku v rámci grafického bloku ako jeho prístupnú dátovú alternatívu.

Musí stĺpcový graf začínať od nuly?

Áno. Dĺžka stĺpca predstavuje veľkosť od základnej čiary, takže orezanie tejto základnej čiary mení zdanlivý pomer. Spojnicový graf môže použiť nenulovú škálu, keď sú viditeľný rozsah a jednotky explicitné a užší pohľad je analyticky nevyhnutný.

Stačí alternatívny text (alt text) na sprístupnenie grafu?

Zvyčajne nie. Alternatívny text by mal identifikovať zobrazenie a zhrnúť jeho hlavný vzor. Viacbodový graf tiež potrebuje blízku dátovú tabuľku alebo ekvivalentný text obsahujúci popisky, hodnoty, jednotky, zdroj a obdobie.

Môže byť zistenie uvedené len v názve grafu?

Nie. Názov identifikuje, čo obrázok zobrazuje; zistenie uvádza, čo by si mal čitateľ všimnúť. Uchovajte zistenie ako celú vetu mimo grafu, aby zostalo k dispozícii, keď obrázok nie je vnímaný alebo extrahovaný.

Vytvára grafický blok značky Schema.org?

Nie. Používajte platné značky na úrovni stránky, ako sú Article, Report alebo Dataset, len keď stránka samostatne spĺňa podmienky. Graf nevytvára nový nárok na schema ani neoprávňuje štruktúrované tvrdenia, ktoré chýbajú vo viditeľných dôkazoch.