Diagramblokk: Tilgjengelige grafer med ærlige akser

En diagramblokk er en avgrenset datavisning som kombinerer en graf med oppsummering, tittel, etiketter, kilde, periode og et tilgjengelig dataalternativ. Bruk den når dataens form svarer på spørsmålet raskere enn en rad med eksakte verdier kan.

Hvorfor dette elementet betyr noe

Diagrammer utnytter visuell mønstergjenkjenning. En leser kan oppdage en stigning, et gap, en klynge eller en endring i helning før de sammenligner de samme verdiene celle for celle. Det hjelper når mønsteret – ikke presist oppslag – er poenget. Det er også farlig: beskjærte akser, ulike intervaller eller arealeffekter kan få en liten forskjell til å se avgjørende ut. Et diagram fortjener sin plass kun når det reduserer innsats uten å endre bevisene.

Leserpsykologi gjør den skriftlige oppsummeringen essensiell. Folk kan huske en retning eller relativ størrelse lettere enn en fotnote. Angi den avgrensede konklusjonen i tekst, inkludert populasjon og periode når det er nødvendig. Referanser til Q1, Q2, Q3 og Q4 brukes for å angi kvartaler. Konkluder aldri med kausalitet fra korrelasjon eller en generell trend fra et utvalgt intervall.

Maskinuttrekkbarhet krever serienavn, etiketter, verdier, enheter, kilde, periode og konklusjon som tekst. En crawler eller AI-svar-motor kan ikke tolke en SVG-bane, et lerret, et skjermbilde, en hover-tilstand eller en fargeforklaring. Blokken parer derfor det visuelle med ordnede data for hjelpeteknologi, indeksering, verifisering og gjenbruk.

Skrivereglene for elementer har forrang: velg dette elementet fordi en passasjes formål er å avsløre et kvantitativt mønster, ikke fordi en graf vil pynte på siden. Hvis oppgaven er eksakt oppslag eller punkt-for-punkt-sammenligning, bruk en tabell selv når diagramverktøy er tilgjengelig.

Når du skal bruke det

Bruk et diagram når leseren trenger å se en av fire former: endring over en ordnet sekvens, forskjeller på tvers av et håndterbart sett kategorier, fordeling av observasjoner, eller sammenhengen mellom to kvantitative variabler. Et linjediagram kan avsløre retning over tid; et søylediagram kan rangere kategorier; et histogram kan avsløre fordeling; og et spredningsplott kan avsløre assosiasjon og avvik. Datasettet må være tilstrekkelig fullstendig, konsekvent målt og relevant for påstanden.

En enkel test skiller diagram fra tabell: hvis leseren først skal legge merke til et mønster, velg et diagram; hvis de skal finne en eksakt verdi, velg en tabell. Hvis begge deler betyr noe, inkluder en kompakt tabell i diagramblokken slik at de to utdataene ikke kan avvike fra hverandre.

Vanlige nesten-treff inkluderer:

• To verdier: skriv en setning eller liten sammenligning. To søyler avslører sjelden et mønster mer direkte.
• En lang kategoriliste: bruk en gruppert tabell. Tretti søyler skaper problemer med etiketter og mobillayout.
• Noen få nøkkeltall: bruk et statbånd når tallene er uavhengige høydepunkter snarere enn én serie.
• En prosess eller kronologi: bruk en tidslinje når markører ikke koder kvantitet.
• En kausal påstand fra en assosiasjon: et spredningsplott kan vise at to variabler beveger seg sammen; det kan ikke fastslå at den ene forårsaket den andre.
• En dekorativ «datahistorie»: hvis fjerning av diagrammet ikke mister noen konklusjon, fjern det.
• En sammenligning med lange kvalitative kriterier: bruk en sammenligningstabell fordi kategorier som støttepolicy eller implementeringsfit ikke kan kodes ærlig som søylelengde.

Hvor du skal plassere det

Plasser diagrammet etter avsnittet som introduserer spørsmålet, populasjonen, målet og perioden. Sett oppsummeringen rett før eller etter det, forklar deretter implikasjoner og begrensninger. I forskning hører hvert diagram ved siden av sitt funn. I en case-studie etablerer du grunnlinjen og intervensjonen før du viser endring.

Hold tittelen, det visuelle, forklaringen, oppsummeringen, dataalternativet, kilden og notater innenfor én figur-grense. Fotnoter kan følge figuren, men en annonse, påmeldingsskjema eller urelatert bilde må ikke avbryte den. Kilden skal være synlig uten å åpne dataalternativet.

Ikke plasser det ved siden av et like fremtredende diagram, en uavhengig tabell eller et statbånd som gjentar dataene, en pristabell, karusell eller en handlingsoppfordring med høy vekt. Slike paringer konkurrerer eller skaper flere sannhetskilder. Skill datavisninger med forklaring.

Anatomi

Det merkede skjermbildet må identifisere disse områdene:

1. Oppsummering: én setning som angir mønsteret uten bildet.
2. Figur-tittel: en nøytral beskrivelse av mål, populasjon og periode.
3. Plott: området hvor posisjon, lengde eller retning koder verdier.
4. Akser og skalaer: synlige etiketter, enheter, haker, intervaller og grunnlinje.
5. Serieetiketter: direkte etiketter der det er mulig; ellers en forklaring som ikke kun er fargebasert.
6. Merknad: en valgfri note knyttet til et datapunkt, aldri en erstatning for metodikk.
7. Dataalternativ: en tabell eller ordnet tekst som inneholder de plottede verdiene.
8. Bildetekst og kilde: omfang, opprinnelse, rapporteringsperiode og eventuell beregningsnote.

Designeksempler

Hver variant bruker todimensjonale markører, synlige enheter, en oppsummering, kildedata og et tilgjengelig alternativ. Det finnes ingen 3D-, piktogram-, måler- eller toakset variant fordi dekorasjon og konkurrerende skalaer forvrider sammenligning.

Linjediagram: bruk for verdier målt ved konsistente ordnede intervaller, vanligvis tid. Manglende observasjoner må fremstå som gap snarere enn oppdiktede forbindelser. Mer enn fire serier krever normalt å dele diagrammet eller velge en tabell.

Søylediagram: bruk for sammenligning eller rangering på tvers av diskrete kategorier. Start den kvantitative aksen på null fordi søylelengde representerer størrelse. Foretrekk horisontale søyler når etiketter er lange, og sorter etter verdi med mindre en naturlig rekkefølge har betydning.

Spredningsplott: bruk for sammenhengen mellom to kvantitative variabler. Vis individuelle observasjoner, navngi begge målene, oppgi eventuell tilpasset trendlinje, og unngå kausalt språkbruk med mindre forskningsdesignet støtter det.

Stablet søylediagram: bruk når både total og sammensetning betyr noe på tvers av et lite antall grupper. Hold segmentrekkefølgen stabil og begrens stabelen til fire kategorier. Hvis lesere hovedsakelig trenger å sammenligne hver komponent, bruk grupperte søyler eller små flervisninger i stedet.

Parametere

«Kilde» nedenfor betyr det forfattede stedet hvor gjengiveren henter feltet, ikke bevisleverandøren som er sitert av diagrammet.

show-data=false er kun tillatt når en tilsvarende datatabell eller fullstendig verdi-for-verdi-tekstalternativ allerede er programmatisk assosiert med figuren. Det er aldri en lisens til å publisere et rent visuelt diagram.

Syntaks og kodeeksempler

Alle tre notasjonene bevarer samme tittel, oppsummering, datasett, skala, kilde, periode og alternativ tekst. Figurene er illustrative.

Bærbar Markdown-direktiv

:::chart-block{type=bar y-label="Henvendelser" y-min=0 source="Illustrerende redaksjonelt datasett" period="2026 Q1–Q4" alt="Henvendelser synker i hvert kvartal, fra 120 i Q1 til 72 i Q4."}
## Illustrerende støttehenvendelser per kvartal

Oppsummering: Henvendelser synker hvert kvartal, fra 120 i Q1 til 72 i Q4.

| Kvartal | Henvendelser |
|---:|---:|
| Q1 | 120 |
| Q2 | 108 |
| Q3 | 84 |
| Q4 | 72 |
:::

Den første overskriften tilordnes title; oppsummeringen og den kanoniske datatabellen tilordnes brødtekstfelter.

Hugo-shortkode

Hugo-adapteren bruker navngitte parametere og utleder det visuelle og tabellen fra ett brødtekstdatasett. Denne notasjonen spesifiserer den tiltenkte tilordningen.

{{< chart-block type="bar" yLabel="Henvendelser" yMin="0" source="Illustrerende redaksjonelt datasett" period="2026 Q1–Q4" alt="Henvendelser synker i hvert kvartal, fra 120 i Q1 til 72 i Q4." >}}
## Illustrerende støttehenvendelser per kvartal

Oppsummering: Henvendelser synker hvert kvartal, fra 120 i Q1 til 72 i Q4.

| Kvartal | Henvendelser |
|---:|---:|
| Q1 | 120 |
| Q2 | 108 |
| Q3 | 84 |
| Q4 | 72 |
{{< /chart-block >}}

WordPress-blokk

<!-- wp:amicited/chart-block {"type":"bar","title":"Illustrerende støttehenvendelser per kvartal","yLabel":"Henvendelser","yMin":0,"source":"Illustrerende redaksjonelt datasett","period":"2026 Q1–Q4","alt":"Henvendelser synker i hvert kvartal, fra 120 i Q1 til 72 i Q4.","takeaway":"Henvendelser synker hvert kvartal, fra 120 i Q1 til 72 i Q4."} -->
<table><thead><tr><th>Kvartal</th><th>Henvendelser</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 -->

Blokken kan gjengi SVG eller lerret, men lagret og server-gjengitt utdata må beholde oppsummeringen og tabellen. JavaScript kan forbedre interaksjon, men må aldri være den eneste kilden til etiketter eller verdier.

Eksempler

God: det visuelle og ordene forteller den samme avgrensede historien

Oppsummering: I det illustrative datasettet synker median løsningstid fra 18 timer i januar til 12 timer i april; diagrammet fastslår ikke hvorfor.

Linjediagrammet bruker jevne månedlige intervaller og en merket «Timer»-akse fra 10 til 20. Denne oppgitte ikke-null linjeskalaen er passende fordi posisjon, ikke søylelengde, koder verdier. Tabellen viser hvert punkt, og teksten tilskriver ikke nedgangen til en intervensjon.

Dårlig: grafen skaper haster

Et søylediagram med tittelen «Løsningstid kollapser etter lansering» viser de samme 18-, 17-, 14- og 12-timers verdiene på en akse som starter på 11,5. Søylene ser ut til å krympe nesten til ingenting. Januar er merket «før», april «etter», mellomliggende måneder er skjult bak hover, og verken intervensjonsdato eller kilde vises. Rød-til-grønn farge gir den eneste meningen om ytelse.

Dette mislykkes fordi søyler krever en null-grunnlinje, tittelen hevder kausalitet, og selektive etiketter forhindrer verifisering. Kun-hover-verdier ekskluderer tastatur-, berørings-, uttrekks- og hjelpeteknologi-kontekster. Reparer det med en null-grunnlinje eller tydelig skalert linje, hver observasjon, kilde, periode, datatabell og en ikke-kausal oppsummering.

Schema-markup og tilgjengelighet

Schema.org har ingen generell Chart- eller Graph-type. Et diagram forblir bevis innenfor en kvalifiserbar sideenhet som Article, Report eller Dataset. Forskning kan beskrive et ekte nedlastbart datasett med egenskaper som tidsdekning, variabler, oppretter og distribusjon. Oppfinn aldri et datasett, vurdering, trend eller resultategenskap bare fordi et diagram eksisterer.

Tilgjengelighet krever mer enn alt-tekst. Gi figuren en tittel og bildetekst, og SVG-en et tilgjengelig navn og beskrivelse. Canvas trenger en tilsvarende DOM-representasjon. Oppgi plottede verdier i en tabell med ekte overskrifter, og hold oppsummeringen utenfor grafikken slik at den overlever utskrift, uttrekk og bildefeil.

Ikke bruk farge som eneste serieidentifikator; legg til direkte etiketter, linjemønstre, punktformer eller tekst. Verktøytips må kunne nås med tastatur, kunne avvises og være supplerende. Ved 200 % zoom og smale bredder, omflyt eller rull et merket diagramområde uten å opprette rulling på sidenivå.

Respekter preferanser for redusert bevegelse og unngå animert tegning eller automatiske overganger. Hvis filtre endrer data, oppgi tilstanden og vis aktive filtre i tekst. Et statisk diagram er ikke et tastaturmål med mindre det har reelle kontroller.

Skriveregler

Disse reglene holder diagrammets visuelle autoritet proporsjonal med bevisene:

• Skriv én oppsummering på 15–35 ord. Angi retning eller sammenheng, relevante endepunkter, populasjon og periode når de forhindrer tvetydighet.
• Bruk 2–20 punkter per serie og ikke mer enn fire serier. Del tettere arbeid opp i små flervisninger, en tabell eller et nedlastbart datasett.
• Hold titler på 5–16 ord og etiketter på 1–6 ord. Titler beskriver; oppsummeringer konkluderer.
• Bruk samme enhet og målingsdefinisjon gjennom en hel serie. Hvis en metode endres, bryt linjen og forklar diskontinuiteten.
• Start kvantitative akser for søyle- og stablet søylediagram på null. En linje- eller spredningsskala kan være smalere kun når grenser og enheter forblir synlige og valget ikke overdriver støy.
• Bruk lik visuell avstand for like numeriske eller tidsintervaller. Ikke plasser februar og desember som om de var tilstøtende måneder når mellomliggende perioder mangler.
• Vis manglende verdier som manglende. Konverter dem aldri til null, koble over dem stilltiende, eller interpoler uten en oppgitt metode.
• Merk prognoser, estimater, modellerte verdier og sesongjusterte verdier direkte. Stil dem ikke som observerte data.
• Unngå to akser, 3D-effekter, perspektiv, billedlig arealskalering, brutte akser, regnbuepaletter og glattede kurver som antyder umålte verdier.
• Oppgi kilde, dekningsperiode, utvalg eller kohort der det er relevant, og eventuell transformasjon som indeksering, normalisering eller glidende gjennomsnitt.
• Sett aldri en handlingsoppfordring, et vitnesbyrd, et reklamemerke, en ubegrunnet kausal påstand eller en essensiell forbehold kun inne i bildet.
• Utled grafen og dens tabell fra ett kanonisk datasett. Hvis verdier endres, oppdater én gang og regenerer begge utdataene.

Detaljert metodikk og sitater kan fortsette i en nærliggende kildeblokk , men diagrammet trenger fortsatt en synlig kilde og periode for seg selv.

Innleggstyper som bruker det

Feltet postTypes i front matter definerer de godkjente relasjonene nedenfor. Inkludering tillater et diagram når et reelt kvantitativt mønster eksisterer; det krever ikke at forfattere produserer en graf for hver side.

QA-sjekkliste

• Leserens primæroppgave er å se et mønster; eksakt oppslag alene ville vært bedre tjent med en tabell.
• Oppsummeringen er en full setning i HTML-tekst, samsvarer med de plottede dataene og holder seg innenfor bevisene.
• Tittelen navngir målet, populasjonen og perioden som trengs for å forstå figuren.
• Diagramtypen samsvarer med den analytiske oppgaven: sekvens, kategorisammenligning, fordeling eller sammenheng.
• Søylegrunnlinjer starter på null; hver annen skala er synlig, begrunnet og ikke-villedende.
• Intervaller, enheter, nevnere, beregninger og manglende verdier er representert ærlig.
• Serier er direkte merket eller skillbare uten farge alene.
• Hver essensiell verdi er tilgjengelig uten hover, JavaScript, animasjon eller bildetolkning.
• En datatabell eller fullstendig tekstalternativ bruker ekte overskrifter og samsvarer nøyaktig med det visuelle.
• Kilden, dekningsperioden, kohorten eller utvalget og transformasjoner er synlige ved siden av diagrammet.
• Diagrammet og det tilgjengelige alternativet stammer fra ett kanonisk datasett.
• Blokken sitter ikke ved siden av en duplisert datavisning, konverteringsmodul eller konkurrerende høyt-vekt visuell.
• Diagrammet fungerer med tastaturinndata, høy kontrast-innstillinger, 200 % zoom, smale skjermer og redusert bevegelse.
• Ingen 3D-effekt, dobbel akse, brutt akse, billedlig skalering, ubegrunnet kausal påstand eller dekorativ serie gjenstår.
• Eventuell strukturert data på sidenivå er kvalifisert og konsistent med de synlige bevisene.
• Den valgte innleggstypen inkluderer diagramblokken i sin innholdskontrakt.

FAQ

Når bør jeg bruke et diagram i stedet for en tabell?

Bruk et diagram når den første oppgaven er å se en trend, fordeling, rangering eller sammenheng. Bruk en tabell når lesere trenger presist oppslag på tvers av mange felt. Når begge oppgavene betyr noe, hold en kompakt tabell inne i diagramblokken som sitt tilgjengelige dataalternativ.

Må et søylediagram starte på null?

Ja. Søylelengde representerer størrelse fra en grunnlinje, så beskjæring av den grunnlinjen endrer det tilsynelatende forholdet. Et linjediagram kan bruke en skala som ikke starter på null når det synlige området og enhetene er eksplisitte og det smalere utsnittet er analytisk nødvendig.

Er alt-tekst nok til å gjøre et diagram tilgjengelig?

Vanligvis ikke. Alt-tekst bør identifisere visningen og oppsummere hovedmønsteret. Et diagram med flere verdier trenger også en nærliggende datatabell eller tilsvarende tekst som inneholder etiketter, verdier, enheter, kilde og periode.

Kan oppsummeringen kun vises i diagramtittelen?

Nei. En tittel identifiserer hva figuren viser; en oppsummering angir hva leseren bør legge merke til. Hold oppsummeringen som en full setning utenfor grafikken slik at den forblir tilgjengelig når bildet ikke oppfattes eller hentes ut.

Oppretter en diagramblokk Schema.org-markup?

Nei. Bruk gyldig strukturert data på sidenivå som Article, Report eller Dataset kun når siden uavhengig kvalifiserer. Diagrammet skaper ikke en ny schema-rettighet eller rettferdiggjør strukturerte påstander som er fraværende fra synlige bevis.