Chart-block: Tillgängliga diagram med ärliga axlar

Ett chart-block är en begränsad datavisning som kombinerar ett diagram med dess sammandrag, titel, etiketter, källa, period och tillgängligt dataalternativ. Använd det när datans form svarar på frågan snabbare än en rad exakta värden kan.

Varför detta element är viktigt

Diagram utnyttjar visuellt mönsterigenkänning. En läsare kan upptäcka en ökning, ett gap, en klusterbildning eller en förändring i lutning innan hen jämför samma värden cell för cell. Det hjälper när mönstret – inte exakt uppslagning – är poängen. Det är också farligt: beskurna axlar, ojämna intervall eller areaeffekter kan få en liten skillnad att se avgörande ut. Ett diagram förtjänar sin plats endast när det minskar ansträngningen utan att förändra bevisen.

Läsarens psykologi gör det skriftliga sammandraget väsentligt. Människor kan komma ihåg en riktning eller relativ storlek lättare än en fotnot. Ange den avgränsade slutsatsen i text, inklusive population och period vid behov. Påstå aldrig kausalitet från korrelation eller en generell trend från ett valt intervall.

Maskinextraherbarhet kräver serienamn, etiketter, värden, enheter, källa, period och slutsats som text. En crawler eller AI-svarsmotor kan inte tolka en SVG-bana, canvas, skärmdump, hover-tillstånd eller färgförklaring. Blocket parar därför det visuella med ordnad data för hjälpmedelsteknik, indexering, verifiering och återanvändning.

Skrivreglerna för element har företräde: välj detta element för att ett avsnitts syfte är att visa ett kvantitativt mönster, inte för att ett diagram skulle pryda sidan. Om uppgiften är exakt uppslagning eller punkt-för-punkt-jämförelse, använd en tabell även när diagramprogramvara finns tillgänglig.

När du ska använda det

Använd ett diagram när läsaren behöver se en av fyra former: förändring över en ordnad sekvens, skillnader mellan en hanterbar uppsättning kategorier, fördelningen av observationer, eller relationen mellan två kvantitativa variabler. Ett linjediagram kan visa riktning över tid; ett stapeldiagram kan rangordna kategorier; ett histogram kan visa fördelning; och ett punktdiagram kan visa samband och avvikande värden. Datamängden måste vara tillräckligt fullständig, konsekvent uppmätt och relevant för påståendet.

Ett enkelt test skiljer diagram från tabell: om läsaren först ska lägga märke till ett mönster, välj ett diagram; om de ska hitta ett exakt värde, välj en tabell. Om båda spelar roll, inkludera en kompakt tabell inom chart-blocket så att de två utdatan inte kan glida isär.

Vanliga nära misstag inkluderar:

• Två värden: skriv en mening eller liten jämförelse. Två staplar visar sällan ett mönster mer direkt.
• En lång kategorilista: använd en grupperad tabell. Trettio staplar skapar problem med etiketter och mobillayout.
• Några få nyckeltal: använd ett statistikfält när siffrorna är oberoende höjdpunkter snarare än en serie.
• En process eller kronologi: använd en tidslinje när markörer inte kodar kvantitet.
• Ett kausalt påstående från ett samband: ett punktdiagram kan visa att två variabler rör sig tillsammans; det kan inte fastställa att den ena orsakade den andra.
• En dekorativ »databerättelse«: om borttagning av diagrammet inte förlorar någon slutsats, ta bort det.
• En jämförelse med långa kvalitativa kriterier: använd en jämförelsetabell eftersom kategorier som supportpolicy eller implementeringslämplighet inte kan kodas ärligt som staplängd.

Var du ska placera det

Placera diagrammet efter stycket som introducerar frågan, populationen, måttet och perioden. Placera sammandraget direkt före eller efter det, förklara sedan implikationer och begränsningar. I forskning hör varje diagram hemma bredvid sitt resultat. I en fallstudie, etablera baslinjen och interventionen innan du visar förändring.

Håll titel, visualisering, förklaring, sammandrag, dataalternativ, källa och anteckningar inom en figurram. Fotnoter kan följa figuren, men en annons, registreringsformulär eller orelerad bild får inte avbryta den. Källan ska vara synlig utan att öppna dataalternativet.

Placera det inte bredvid ett lika framträdande diagram, en oberoende tabell eller statistikfält som upprepar dess data, en pristabell, karusell eller en högemfatsuppmaning till handling. Dessa parningar konkurrerar eller skapar flera sanningskällor. Separera datavisningar med förklaring.

Anatomi

Det etiketterade skärmfotot måste identifiera dessa regioner:

1. Sammandrag: en mening som anger mönstret utan bilden.
2. Figurtitel: en neutral beskrivning av mått, population och period.
3. Plot: regionen där position, längd eller riktning kodar värden.
4. Axlar och skalor: synliga etiketter, enheter, tickmarkeringar, intervall och baslinje.
5. Serieetiketter: direkta etiketter där möjligt; annars en förklaring som inte endast bygger på färg.
6. Annotering: en valfri anteckning kopplad till en datapunkt, aldrig en ersättning för metodik.
7. Dataalternativ: en tabell eller ordnad text som innehåller de plottade värdena.
8. Bildtext och källa: omfattning, härkomst, rapporteringsperiod och eventuell beräkningsanteckning.

Designexempel

Varje variant använder tvådimensionella markörer, synliga enheter, ett sammandrag, källdata och ett tillgängligt alternativ. Det finns ingen 3D-, piktogram-, mätar- eller dubbelaxlig variant eftersom dekoration och konkurrerande skalor förvränger jämförelser.

Linjediagram: använd för värden uppmätta vid konsekventa ordnade intervall, vanligtvis tid. Saknade observationer måste visas som luckor snarare än påhittade kopplingar. Fler än fyra serier kräver normalt att diagrammet delas upp eller att en tabell väljs.

Stapeldiagram: använd för jämförelse eller rangordning över diskreta kategorier. Starta den kvantitativa axeln vid noll eftersom staplängd representerar storlek. Föredra horisontella staplar när etiketter är långa, och sortera efter värde om inte en naturlig ordning bär mening.

Punktdiagram: använd för relationen mellan två kvantitativa variabler. Visa individuella observationer, namnge båda måtten, redovisa eventuell anpassad trendlinje och undvik kausalt språk om inte forskningsdesignen stödjer det.

Staplat stapeldiagram: använd när både total och sammansättning spelar roll över ett litet antal grupper. Håll segmentordningen stabil och begränsa stacken till fyra kategorier. Om läsare främst behöver jämföra varje komponent, använd istället grupperade staplar eller små multiplar.

Parametrar

“Källa” nedan avser den författade plats från vilken renderaren hämtar fältet, inte den bevisleverantör som diagrammet citerar.

show-data=false är endast tillåten när en motsvarande datatabell eller fullständigt värde-för-värde-textalternativ redan är programmatiskt associerat med figuren. Det är aldrig en licens att publicera ett enbart visuellt diagram.

Syntax och kodexempel

Alla tre noteringarna bevarar samma titel, sammandrag, datamängd, skala, källa, period och alternativ text. Figurerna är illustrativa.

Bärbar Markdown-direktiv

:::chart-block{type=bar y-label="Förfrågningar" y-min=0 source="Illustrativ redaktionell datamängd" period="2026 Q1–Q4" alt="Förfrågningar minskar varje kvartal, från 120 i Q1 till 72 i Q4."}
## Illustrativa supportförfrågningar per kvartal

Sammandrag: Förfrågningarna minskar varje kvartal, från 120 i Q1 till 72 i Q4.

| Kvartal | Förfrågningar |
|---|---:|
| Q1 | 120 |
| Q2 | 108 |
| Q3 | 84 |
| Q4 | 72 |
:::

Den första rubriken mappar till title; sammandraget och den kanoniska datatabellen mappar till brödtextfält.

Hugo-shortcode

Hugo-adaptrar använder namngivna parametrar och härleder det visuella och tabellen från en brödtextdatamängd. Denna notation anger den avsedda mappningen.

{{< chart-block type="bar" yLabel="Förfrågningar" yMin="0" source="Illustrativ redaktionell datamängd" period="2026 Q1–Q4" alt="Förfrågningar minskar varje kvartal, från 120 i Q1 till 72 i Q4." >}}
## Illustrativa supportförfrågningar per kvartal

Sammandrag: Förfrågningarna minskar varje kvartal, från 120 i Q1 till 72 i Q4.

| Kvartal | Förfrågningar |
|---|---:|
| Q1 | 120 |
| Q2 | 108 |
| Q3 | 84 |
| Q4 | 72 |
{{< /chart-block >}}

WordPress-block

<!-- wp:amicited/chart-block {"type":"bar","title":"Illustrativa supportförfrågningar per kvartal","yLabel":"Förfrågningar","yMin":0,"source":"Illustrativ redaktionell datamängd","period":"2026 Q1–Q4","alt":"Förfrågningar minskar varje kvartal, från 120 i Q1 till 72 i Q4.","takeaway":"Förfrågningarna minskar varje kvartal, från 120 i Q1 till 72 i Q4."} -->
<table><thead><tr><th>Kvartal</th><th>Förfrågningar</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 -->

Blocket kan rendera SVG eller canvas, men sparad och server-renderad utdata måste behålla sammandraget och tabellen. JavaScript kan förbättra interaktion, men aldrig tillhandahålla de enda etiketterna eller värdena.

Exempel

Bra: det visuella och orden berättar samma avgränsade historia

Sammandrag: I den illustrativa datamängden sjunker medianlösningstiden från 18 timmar i januari till 12 timmar i april; diagrammet fastställer inte varför.

Linjediagrammet använder jämna månadsintervall och en etiketterad “Timmar”-axel från 10 till 20. Denna redovisade icke-noll linjeskala är lämplig eftersom position, inte staplängd, kodar värden. Tabellen visar varje punkt, och texten tillskriver inte minskningen till en intervention.

Dålig: diagrammet skapar brådska

Ett stapeldiagram med titeln “Lösningstid kollapsar efter lansering” visar samma 18-, 17-, 14- och 12-timmarsvärden på en axel som börjar vid 11,5. Staplarna ser ut att krympa nästan till ingenting. Januari är märkt “före”, april “efter”, mellanliggande månader är dolda bakom hover, och varken interventionsdatum eller källa visas. Röd-till-grön färg ger den enda prestandabetydelsen.

Detta misslyckas eftersom staplar kräver en nollbaslinje, titeln hävdar kausalitet, och selektiva etiketter förhindrar verifiering. Endast-hover-värden utesluter tangentbord, pek, extrahering och hjälpmedelstekniksammanhang. Åtgärda med en nollbaslinje eller tydligt skalat linjediagram, varje observation, källa, period, datatabell och ett icke-kausalt sammandrag.

Schema-markup och tillgänglighet

Schema.org har ingen generell typ för “Chart” eller “Graph”. Ett diagram förblir bevis inom en berättigad sidnivåenhet såsom “Article”, “Report” eller “Dataset”. Forskning kan beskriva en verklig nedladdningsbar datamängd med egenskaper som tidsmässig täckning, variabler, skapare och distribution. Uppfinn aldrig en datamängd, ett betyg, en trend eller ett resultat för att ett diagram existerar.

Tillgänglighet kräver mer än alt-text. Ge figuren en titel och bildtext och en SVG ett tillgängligt namn och beskrivning. Canvas behöver en motsvarande DOM-representation. Tillhandahåll plottade värden i en tabell med riktiga rubriker och håll sammandraget utanför grafiken så att det överlever utskrift, extrahering och bildfel.

Använd inte färg som enda serieidentifierare; lägg till direkta etiketter, linjemönster, punktformer eller text. Tooltips måste vara tangentbordsnåbara, avvisningsbara och kompletterande. Vid 200 % zoom och smala bredder, omflöda eller rulla en etiketterad diagramregion utan att skapa sidnivåscrollning.

Respektera inställningar för minskad rörelse och undvik animerad ritning eller automatiska övergångar. Om filter ändrar data, ange tillståndet och visa aktiva filter i text. Ett statiskt diagram är inte ett tangentbordsmål om det inte har verkliga kontroller.

Skrivregler

Dessa regler håller diagrammets visuella auktoritet proportionell mot dess bevis:

• Skriv ett sammandrag på 15–35 ord. Ange riktning eller relation, relevanta slutpunkter, population och period när de förhindrar tvetydighet.
• Använd 2–20 punkter per serie och högst fyra serier. Dela upp tätare arbete i små multiplar, en tabell eller en nedladdningsbar datamängd.
• Håll titlar på 5–16 ord och etiketter på 1–6 ord. Titlar beskriver; sammandrag drar slutsatser.
• Använd samma enhet och måttdefinition genom en serie. Om en metod ändras, bryt linjen och förklara avbrottet.
• Starta kvantitativa axlar för staplar och staplade staplar vid noll. En linje- eller punktskala får vara smalare endast när gränser och enheter förblir synliga och valet inte överdriver brus.
• Använd lika visuellt avstånd för lika numeriska eller tidsintervall. Placera inte februari och december som om de vore intilliggande månader när mellanliggande perioder saknas.
• Visa saknade värden som saknade. Konvertera dem aldrig till noll, koppla inte över dem tyst, och interpolera inte utan en angiven metod.
• Märk prognoser, uppskattningar, modellerade värden och säsongsjusterade värden direkt. Styla dem inte som observerad data.
• Undvik dubbla axlar, 3D-effekter, perspektiv, bildbaserad areaskalning, brutna axlar, regnbågspaletter och utjämnade kurvor som antyder omätta värden.
• Ange källan, täckningsperioden, urvalet eller kohorten där det är relevant, och eventuell transformation såsom indexering, normalisering eller glidande medelvärde.
• Lägg aldrig en uppmaning till handling, ett vittnesmål, en reklammärkning, ett ostödd kausal påstående eller en väsentlig varning endast inuti bilden.
• Härled diagrammet och dess tabell från en kanonisk datamängd. Om värden ändras, uppdatera en gång och återskapa båda utdatan.

Detaljerad metodik och källhänvisningar kan fortsätta i ett närliggande källblock , men diagrammet behöver fortfarande en synlig källa och period för sig själv.

Inläggstyper som använder det

Fältet postTypes i front matter definierar de godkända relationerna nedan. Inkludering tillåter ett diagram när ett verkligt kvantitativt mönster finns; det kräver inte att författare skapar ett diagram för varje sida.

QA-checklista

• Läsarens primära uppgift är att se ett mönster; enbart exakt uppslagning skulle bättre betjänas av en tabell.
• Sammandraget är en fullständig mening i HTML-text, överensstämmer med den plottade datan och håller sig inom bevisen.
• Titeln anger det mått, den population och den period som behövs för att förstå figuren.
• Diagramtypen matchar den analytiska uppgiften: sekvens, kategori-jämförelse, fördelning eller relation.
• Stapelbaslinjer börjar vid noll; varje annan skala är synlig, motiverad och icke-vilseledande.
• Intervall, enheter, nämnare, beräkningar och saknade värden representeras ärligt.
• Serier är direkt etiketterade eller särskiljbara utan enbart färg.
• Varje väsentligt värde är tillgängligt utan hover, JavaScript, animation eller bildtolkning.
• En datatabell eller fullständigt textalternativ använder riktiga rubriker och matchar det visuella exakt.
• Källan, täckningsperioden, kohorten eller urvalet och transformationer är synliga bredvid diagrammet.
• Diagrammet och det tillgängliga alternativet härrör från en kanonisk datamängd.
• Blocket sitter inte bredvid en duplicerad datavisning, konverteringsmodul eller konkurrerande högemfatsvisuell.
• Diagrammet fungerar med tangentbordsinmatning, högkontrastlägen, 200 % zoom, smala skärmar och minskad rörelse.
• Ingen 3D-effekt, dubbel axel, bruten axel, bildskalning, ostött kausalt påstående eller dekorativ serie finns kvar.
• Eventuell strukturerad data på sidnivå är berättigad och konsekvent med de synliga bevisen.
• Den valda inläggstypen inkluderar chart-blocket i sitt innehållskontrakt.

FAQ

När ska jag använda ett diagram istället för en tabell?

Använd ett diagram när den första uppgiften är att se en trend, fördelning, rangordning eller relation. Använd en tabell när läsare behöver exakt uppslagning över många fält. När båda uppgifterna spelar roll, håll en kompakt tabell inuti chart-blocket som dess tillgängliga dataalternativ.

Måste ett stapeldiagram börja vid noll?

Ja. Stapellängd representerar storlek från en baslinje, så att beskära den baslinjen ändrar det skenbara förhållandet. Ett linjediagram kan använda en skala som inte börjar på noll när det synliga intervallet och enheterna är explicita och den snävare vyn är analytiskt nödvändig.

Räcker alt-text för att göra ett diagram tillgängligt?

Vanligtvis inte. Alt-text bör identifiera visningen och sammanfatta dess huvudmönster. Ett diagram med flera värden behöver också en närliggande datatabell eller motsvarande text som innehåller etiketter, värden, enheter, källa och period.

Kan sammandraget endast finnas i diagrammets titel?

Nej. En titel identifierar vad figuren visar; ett sammandrag anger vad läsaren bör lägga märke till. Håll sammandraget som en fullständig mening utanför grafiken så att det förblir tillgängligt när bilden inte uppfattas eller extraheras.

Skapar ett chart-block Schema.org-markup?

Nej. Använd giltig markup på sidnivå såsom “Article”, “Report” eller “Dataset” endast när sidan oberoende kvalificerar sig. Diagrammet skapar inte en ny schemaberättigande eller rättfärdigar strukturerade påståenden som saknas i synliga bevis.