Blok wykresu: Dostępne wykresy z uczciwymi osiami
Zbuduj blok wykresu, który ujawnia prawdziwy wzór z uczciwymi osiami, jawnym wnioskiem, danymi źródłowymi i dostępną alternatywą dla każdego czytelnika online.
Blok wykresu to ograniczony wyświetlacz danych, który łączy grafikę z jej wnioskiem, tytułem, etykietami, źródłem, okresem i dostępną alternatywą danych. Użyj go, gdy kształt danych odpowiada na pytanie szybciej niż rząd dokładnych wartości.
Ilustracyjne zgłoszenia pomocy technicznej według kwartału
Wniosek: W tym ilustracyjnym zbiorze danych liczba zgłoszeń spada każdego kwartału, ze 120 w Q1 do 72 w Q4.
Zobacz dane wykresu
| Kwartał | Zgłoszenia |
|---|---|
| Q1 | 120 |
| Q2 | 108 |
| Q3 | 84 |
| Q4 | 72 |
Dlaczego ten element jest ważny
Wykresy wykorzystują wizualne rozpoznawanie wzorców. Czytelnik może wykryć wzrost, lukę, skupisko lub zmianę nachylenia szybciej niż porównując te same wartości komórka po komórce. Pomaga to, gdy wzór — a nie precyzyjne wyszukiwanie — jest sednem sprawy. Jest to również niebezpieczne: przycięte osie, nierówne odstępy lub efekty powierzchniowe mogą sprawić, że niewielka różnica będzie wyglądać na decydującą. Wykres zasługuje na swoje miejsce tylko wtedy, gdy zmniejsza wysiłek bez zmiany dowodów.
Psychologia czytelnika sprawia, że pisemny wniosek jest niezbędny. Ludzie mogą zapamiętać kierunek lub względną wielkość łatwiej niż przypis. Podaj ograniczony wniosek w tekście, w tym populację i okres, gdy jest to potrzebne. Nigdy nie wyciągaj wniosków o przyczynowości z korelacji ani ogólnego trendu z wybranego przedziału.
Ekstrahowalność maszynowa wymaga nazw serii, etykiet, wartości, jednostek, źródła, okresu i wniosku jako tekstu. Robot indeksujący lub silnik AI odpowiedzi może nie interpretować ścieżki SVG, canvas, zrzutu ekranu, stanu najechania ani legendy kolorów. Blok łączy zatem wizualizację z uporządkowanymi danymi dla technologii asystujących, indeksowania, weryfikacji i ponownego użycia.
Zasady pisania elementów mają pierwszeństwo: wybierz ten element, ponieważ celem fragmentu jest ujawnienie ilościowego wzorca, a nie dlatego, że grafika ozdobiłaby stronę. Jeśli zadaniem jest dokładne wyszukanie lub porównanie element po elemencie, użyj tabeli, nawet jeśli dostępne jest oprogramowanie do tworzenia wykresów.
Kiedy go używać
Użyj wykresu, gdy czytelnik musi zobaczyć jeden z czterech kształtów: zmianę w uporządkowanej sekwencji, różnice w zarządzalnym zestawie kategorii, rozkład obserwacji lub związek między dwiema zmiennymi ilościowymi. Wykres liniowy może ujawnić kierunek w czasie; wykres słupkowy może rankingować kategorie; histogram może ujawnić rozkład; a wykres punktowy może ujawnić zależność i wartości odstające. Zbiór danych musi być wystarczająco kompletny, konsekwentnie mierzony i istotny dla twierdzenia.
Prosty test oddziela wykres od tabeli: jeśli czytelnik powinien najpierw zauważyć wzór, wybierz wykres; jeśli powinien znaleźć dokładną wartość, wybierz tabelę. Jeśli oba mają znaczenie, dołącz zwartą tabelę w bloku wykresu, aby te dwa wyniki nie mogły się rozjechać.
Typowe sytuacje graniczne obejmują:
- Dwie wartości: napisz zdanie lub małe porównanie. Dwa słupki rzadko ujawniają wzór bardziej bezpośrednio.
- Długa lista kategorii: użyj grupowanej tabeli. Trzydzieści słupków stwarza problemy z etykietami i układem na urządzeniach mobilnych.
- Kilka kluczowych wskaźników: użyj bloku statystyk, gdy dane są niezależnymi punktami, a nie jedną serią.
- Proces lub chronologia: użyj osi czasu, gdy znaczniki nie kodują ilości.
- Twierdzenie o przyczynowości na podstawie zależności: wykres punktowy może pokazać, że dwie zmienne poruszają się razem; nie może ustalić, że jedna spowodowała drugą.
- Dekoracyjna „historia danych": jeśli usunięcie wykresu nie powoduje utraty żadnego wniosku, usuń go.
- Porównanie z długimi kryteriami jakościowymi: użyj tabeli porównawczej , ponieważ kategorie takie jak polityka wsparcia czy dopasowanie wdrożenia nie mogą być uczciwie zakodowane jako długość słupka.
Gdzie go umieścić
Umieść wykres po akapicie, który wprowadza pytanie, populację, miarę i okres. Umieść wniosek bezpośrednio przed lub za nim, a następnie wyjaśnij implikacje i ograniczenia. W badaniach każdy wykres znajduje się obok swojego odkrycia. W studium przypadku ustal punkt wyjścia i interwencję przed pokazaniem zmiany.
Zachowaj tytuł, wizualizację, legendę, wniosek, alternatywę danych, źródło i notatki w jednym obszarze figury. Przypisy mogą następować po figurze, ale reklama, formularz zapisu lub niepowiązany obraz nie mogą jej przerywać. Źródło powinno być widoczne bez otwierania alternatywy danych.
Nie umieszczaj wykresu obok równie widocznego wykresu, niezależnej tabeli lub bloku statystyk powtarzającego jego dane, tabeli cenowej, karuzeli ani wezwania do działania o wysokim priorytecie. Takie zestawienia konkurują ze sobą lub tworzą wiele źródeł prawdy. Oddzielaj wyświetlacze danych wyjaśnieniem.
Anatomia
Oznaczony zrzut ekranu musi identyfikować następujące obszary:
- Wniosek: jedno zdanie opisujące wzór bez obrazka.
- Tytuł figury: neutralny opis miary, populacji i okresu.
- Obszar wykresu: obszar, w którym położenie, długość lub kierunek koduje wartości.
- Osie i skale: widoczne etykiety, jednostki, znaczniki, odstępy i wartość bazowa.
- Etykiety serii: bezpośrednie etykiety tam, gdzie to możliwe; w przeciwnym razie legenda, która nie opiera się tylko na kolorze.
- Adnotacje: opcjonalna notatka powiązana z punktem danych, nigdy substytut metodologii.
- Alternatywa danych: tabela lub uporządkowany tekst zawierający wykreślone wartości.
- Podpis i źródło: zakres, pochodzenie, okres raportowania i ewentualna uwaga o obliczeniach.
Przykłady projektowe
Każdy wariant wykorzystuje dwuwymiarowe znaczniki, widoczne jednostki, wniosek, dane źródłowe i dostępną alternatywę. Nie ma wariantów 3D, piktogramowych, wskaźnikowych ani dwuosiowych, ponieważ dekoracja i konkurujące ze sobą skale zniekształcają porównanie.
Wykres liniowy: użyj do wartości mierzonych w stałych, uporządkowanych odstępach, zazwyczaj czasu. Brakujące obserwacje muszą pojawiać się jako luki, a nie jako wymyślone połączenia. Więcej niż cztery serie zwykle wymaga podziału wykresu lub wyboru tabeli.
Wykres słupkowy: użyj do porównania lub rankingu w obrębie odrębnych kategorii. Rozpocznij oś ilościową od zera, ponieważ długość słupka reprezentuje wielkość. Preferuj słupki poziome, gdy etykiety są długie, i sortuj według wartości, chyba że naturalny porządek ma znaczenie.
Wykres punktowy: użyj do zależności między dwiema zmiennymi ilościowymi. Pokaż poszczególne obserwacje, nazwij obie miary, ujawnij dopasowaną linię trendu i unikaj języka przyczynowego, chyba że projekt badawczy go wspiera.
Wykres słupkowy skumulowany: użyj, gdy zarówno suma, jak i skład mają znaczenie w ramach niewielkiej liczby grup. Utrzymuj stałą kolejność segmentów i ogranicz stos do czterech kategorii. Jeśli czytelnicy muszą głównie porównywać poszczególne składniki, użyj zamiast tego słupków grupowanych lub małych wielu wykresów.
Parametry
„Źródło" poniżej oznacza autorską lokalizację, z której renderer pobiera pole, a nie dostawcę dowodów cytowanego przez wykres.
| Nazwa | Typ | Wymagany | Min/maks | Domyślny | Źródło |
|---|---|---|---|---|---|
| title | Ciąg znaków | Tak | 5–16 słów; 110 znaków | Brak | Pierwsze nagłówek w treści |
| type | Enum: line, bar, scatter, stacked-bar | Tak | Jedna wartość | Brak | Atrybut |
| takeaway | Pojedyncze zdanie | Tak | 15–35 słów | Brak | Treść po pierwszym nagłówku |
| data | Uporządkowany zbiór danych tabelarycznych | Tak | 2–20 punktów na serię; 1–4 serii | Brak | Treść |
| x-label | Ciąg znaków | Warunkowo | 1–6 słów | Nazwa pola kategorii lub okresu | Atrybut |
| y-label | Ciąg znaków | Tak | 1–6 słów, w tym jednostka | Brak | Atrybut |
| y-min | Liczba | Nie; zero wymagane dla słupków | W udokumentowanej domenie pomiarowej | 0 dla typów słupkowych; obliczane dla liniowego i punktowego | Atrybut |
| y-max | Liczba | Nie | Większa niż największa wartość | Granica znacznika wybrana przez renderer | Atrybut |
| source | Zwykły tekst z opcjonalnym URL | Tak | 1–3 główne źródła | Brak | Atrybut |
| period | Data, zakres lub ciąg okresu | Tak | Jeden dokładny okres pokrycia | Brak | Atrybut |
| alt | Ciąg znaków | Tak | 20–60 słów | Brak | Atrybut |
| show-data | Boolean | Nie | true lub false | true | Atrybut |
show-data=false jest dozwolone tylko wtedy, gdy równoważna tabela danych lub kompletna tekstowa alternatywa wartość po wartości jest już programowo powiązana z figurą. Nigdy nie jest to pozwolenie na publikację wykresu wyłącznie wizualnego.
Składnia i przykłady kodu
Wszystkie trzy notacje zachowują ten sam tytuł, wniosek, zbiór danych, skalę, źródło, okres i tekst alternatywny. Figury są ilustracyjne.
Przenośna dyrektywa Markdown
:::chart-block{type=bar y-label="Zgłoszenia" y-min=0 source="Ilustracyjny zbiór danych redakcyjnych" period="2026 Q1–Q4" alt="Zgłoszenia maleją w każdym kwartale, ze 120 w Q1 do 72 w Q4."}
## Ilustracyjne zgłoszenia pomocy technicznej według kwartału
Wniosek: Zgłoszenia maleją każdego kwartału, ze 120 w Q1 do 72 w Q4.
| Kwartał | Zgłoszenia |
|---|---:|
| Q1 | 120 |
| Q2 | 108 |
| Q3 | 84 |
| Q4 | 72 |
:::
Pierwszy nagłówek mapuje się na title; wniosek i kanoniczna tabela danych mapują się na pola treści.
Shortcode Hugo
Adapter Hugo używa nazwanych parametrów i wyprowadza wizualizację oraz tabelę z jednego zbioru danych w treści. Ta notacja określa zamierzone mapowanie.
{{< chart-block type="bar" yLabel="Zgłoszenia" yMin="0" source="Ilustracyjny zbiór danych redakcyjnych" period="2026 Q1–Q4" alt="Zgłoszenia maleją w każdym kwartale, ze 120 w Q1 do 72 w Q4." >}}
## Ilustracyjne zgłoszenia pomocy technicznej według kwartału
Wniosek: Zgłoszenia maleją każdego kwartału, ze 120 w Q1 do 72 w Q4.
| Kwartał | Zgłoszenia |
|---|---:|
| Q1 | 120 |
| Q2 | 108 |
| Q3 | 84 |
| Q4 | 72 |
{{< /chart-block >}}
Blok WordPress
<!-- wp:amicited/chart-block {"type":"bar","title":"Ilustracyjne zgłoszenia pomocy technicznej według kwartału","yLabel":"Zgłoszenia","yMin":0,"source":"Ilustracyjny zbiór danych redakcyjnych","period":"2026 Q1–Q4","alt":"Zgłoszenia maleją w każdym kwartale, ze 120 w Q1 do 72 w Q4.","takeaway":"Zgłoszenia maleją każdego kwartału, ze 120 w Q1 do 72 w Q4."} -->
<table><thead><tr><th>Kwartał</th><th>Zgłoszenia</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 może renderować SVG lub canvas, ale zapisane i renderowane po stronie serwera dane wyjściowe muszą zachować wniosek i tabelę. JavaScript może ulepszać interakcję, ale nigdy nie może dostarczać jedynych etykiet lub wartości.
Przykłady
Dobrze: wizualizacja i słowa opowiadają tę samą ograniczoną historię
Wniosek: W ilustracyjnym zbiorze danych mediana czasu rozwiązania spada z 18 godzin w styczniu do 12 godzin w kwietniu; wykres nie ustala przyczyny.
| Miesiąc | Mediana czasu rozwiązania |
|---|---|
| Styczeń | 18 godzin |
| Luty | 17 godzin |
| Marzec | 14 godzin |
| Kwiecień | 12 godzin |
Wykres liniowy używa równych odstępów miesięcznych i oznaczonej osi „Godziny" od 10 do 20. Ta ujawniona niezerowa skala liniowa jest odpowiednia, ponieważ położenie, a nie długość słupka, koduje wartości. Tabela ujawnia każdy punkt, a tekst nie przypisuje spadku interwencji.
Źle: grafika tworzy sztuczną pilność
Wykres słupkowy zatytułowany „Czas rozwiązania załamuje się po uruchomieniu" pokazuje te same wartości 18, 17, 14 i 12 godzin na osi rozpoczynającej się od 11,5. Słupki wydają się kurczyć niemal do zera. Styczeń jest oznaczony jako „przed", kwiecień jako „po", miesiące pośrednie są ukryte za najechaniem, a ani data interwencji, ani źródło nie są pokazane. Kolorystyka od czerwonego do zielonego stanowi jedyne znaczenie dotyczące wydajności.
To podejście jest nieprawidłowe, ponieważ słupki wymagają zerowej wartości bazowej, tytuł sugeruje przyczynowość, a selektywne etykiety uniemożliwiają weryfikację. Wartości tylko po najechaniu wykluczają klawiaturę, dotyk, ekstrakcję i konteksty technologii asystujących. Napraw to, używając zerowej wartości bazowej lub jasno wyskalowanej linii, każdej obserwacji, źródła, okresu, tabeli danych i nieprzyczynowego wniosku.
Znaczniki Schema i dostępność
Schema.org nie ma ogólnego typu Chart ani Graph. Wykres pozostaje dowodem w kwalifikującej się encji na poziomie strony, takiej jak Article, Report lub Dataset. Badania mogą opisywać rzeczywisty, możliwy do pobrania zbiór danych z właściwościami, takimi jak zakres czasowy, zmienne, twórca i dystrybucja. Nigdy nie wymyślaj zbioru danych, oceny, trendu ani właściwości wyniku tylko dlatego, że istnieje wykres.
Dostępność wymaga czegoś więcej niż tekstu alternatywnego. Nadaj figurze tytuł i podpis, a SVG dostępną nazwę i opis. Canvas wymaga równoważnej reprezentacji DOM. Dostarcz wykreślone wartości w tabeli z prawdziwymi nagłówkami i trzymaj wniosek poza grafiką, aby przetrwał drukowanie, ekstrakcję i awarię obrazu.
Nie używaj koloru jako jedynego identyfikatora serii; dodaj bezpośrednie etykiety, wzory linii, kształty punktów lub tekst. Etykiety narzędziowe muszą być osiągalne klawiaturą, możliwe do odrzucenia i uzupełniające. Przy powiększeniu 200% i wąskich szerokościach, przekształć lub przewiń oznaczony obszar wykresu bez tworzenia przewijania na poziomie strony.
Respektuj preferencje ograniczonego ruchu i unikaj animowanego rysowania lub automatycznych przejść. Jeśli filtry zmieniają dane, ogłoś stan i pokaż aktywne filtry w tekście. Statyczny wykres nie jest celem klawiatury, chyba że ma rzeczywiste elementy sterujące.
Zasady pisania
Te zasady utrzymują proporcjonalność autorytetu wizualnego wykresu do jego dowodów:
- Napisz jeden wniosek składający się z 15–35 słów. Wymień kierunek lub zależność, istotne punkty końcowe, populację i okres, gdy zapobiegają one niejednoznaczności.
- Używaj 2–20 punktów na serię i nie więcej niż cztery serie. Podziel gęstszą pracę na małe wiele wykresów, tabelę lub możliwy do pobrania zbiór danych.
- Utrzymuj tytuły w granicach 5–16 słów, a etykiety 1–6 słów. Tytuły opisują; wnioski podsumowują.
- Używaj tej samej jednostki i definicji pomiaru w całej serii. Jeśli metoda się zmienia, przerwij linię i wyjaśnij nieciągłość.
- Rozpoczynaj osie ilościowe wykresów słupkowych i skumulowanych słupkowych od zera. Skala wykresu liniowego lub punktowego może być węższa tylko wtedy, gdy granice i jednostki pozostają widoczne, a wybór nie wyolbrzymia szumu.
- Używaj równych odstępów wizualnych dla równych odstępów liczbowych lub czasowych. Nie rozmieszczaj lutego i grudnia tak, jakby były sąsiednimi miesiącami, gdy brakuje okresów pośrednich.
- Pokazuj brakujące wartości jako brakujące. Nigdy nie zamieniaj ich na zero, nie łącz przez nie w milczeniu ani nie interpoluj bez podanej metody.
- Oznaczaj bezpośrednio prognozy, szacunki, wartości modelowane i wartości skorygowane sezonowo. Nie stylizuj ich jako zaobserwowanych danych.
- Unikaj podwójnych osi, efektów 3D, perspektywy, skalowania obrazkowego, złamanych osi, tęczowych palet i wygładzonych krzywych, które sugerują niemierzone wartości.
- Podaj źródło, okres pokrycia, próbę lub kohortę tam, gdzie to istotne, oraz wszelkie przekształcenia, takie jak indeksowanie, normalizacja lub średnia krocząca.
- Nigdy nie umieszczaj wezwania do działania, referencji, odznaki promocyjnej, niepopartego twierdzenia o przyczynowości ani istotnego zastrzeżenia tylko wewnątrz obrazu.
- Wyprowadzaj wykres i jego tabelę z jednego kanonicznego zbioru danych. Jeśli wartości się zmieniają, zaktualizuj raz i wygeneruj ponownie oba wyniki.
Szczegółowa metodologia i cytowania mogą być kontynuowane w pobliskim bloku źródeł , ale wykres nadal potrzebuje własnego widocznego źródła i okresu.
Typy postów, które go używają
Pole postTypes w metadanych definiuje zatwierdzone zależności poniżej. Włączenie pozwala na użycie wykresu, gdy istnieje prawdziwy ilościowy wzór; nie wymaga od autorów tworzenia grafiki dla każdej strony.
| Typ posta | Zastosowanie | Preferowana pozycja | Wykres zasługuje na miejsce, gdy |
|---|---|---|---|
| Badania oryginalne | Zalecane, gdy główne odkrycie ma charakter ilościowy | Obok odkrycia, po kontekście metody i próby | Ujawnia trend, rozkład, porównanie lub zależność wspierającą ograniczony wniosek badania. |
| Podsumowanie statystyk | Opcjonalne | Po danych liczbowych ze wspólną definicją i okresem | Wybrane źródła można porównać na zgodnych miarach; niepowiązane statystyki nie mogą być wymuszane w jednej serii. |
| Raport benchmarkowy | Zalecane | Po zdefiniowaniu kohorty, metryki i okresu | Sprawia, że rozkład lub luka segmentowa są wyraźniejsze niż lista wartości benchmarkowych. |
| Studium przypadku | Warunkowo, przy zweryfikowanych danych podłużnych | Po punkcie wyjścia i interwencji; przed interpretacją | Powtarzane pomiary pokazują zmianę bez przesadzania z atrybucją lub ukrywania okna pomiarowego. |
Lista kontrolna QA
- Podstawowym zadaniem czytelnika jest dostrzeżenie wzorca; dokładne wyszukiwanie byłoby lepiej obsłużone przez tabelę.
- Wniosek jest pełnym zdaniem w tekście HTML, zgadza się z wykreślonymi danymi i mieści się w granicach dowodów.
- Tytuł podaje miarę, populację i okres potrzebne do zrozumienia figury.
- Typ wykresu odpowiada zadaniu analitycznemu: sekwencja, porównanie kategorii, rozkład lub zależność.
- Wartości bazowe słupków zaczynają się od zera; każda inna skala jest widoczna, uzasadniona i niezwodnicza.
- Odstępy, jednostki, mianowniki, obliczenia i brakujące wartości są przedstawione uczciwie.
- Serie są bezpośrednio oznaczone lub rozróżnialne bez samego koloru.
- Każda istotna wartość jest dostępna bez najechania, JavaScript, animacji lub interpretacji obrazu.
- Tabela danych lub kompletna alternatywa tekstowa używa prawdziwych nagłówków i dokładnie odpowiada wizualizacji.
- Źródło, okres pokrycia, kohorta lub próba oraz przekształcenia są widoczne obok wykresu.
- Wykres i dostępna alternatywa pochodzą z jednego kanonicznego zbioru danych.
- Blok nie sąsiaduje z duplikatem wyświetlacza danych, modułem konwersji ani konkurującą wizualizacją o wysokim priorytecie.
- Wykres działa z wprowadzaniem klawiaturowym, ustawieniami wysokiego kontrastu, powiększeniem 200%, wąskimi ekranami i ograniczonym ruchem.
- Żaden efekt 3D, podwójna oś, złamana oś, skalowanie obrazkowe, niepoparte twierdzenie o przyczynowości ani dekoracyjna seria nie pozostają.
- Wszelkie ustrukturyzowane dane na poziomie strony są kwalifikowalne i zgodne z widocznymi dowodami.
- Wybrany typ posta zawiera blok wykresu w swoim kontrakcie treści.
FAQ
Kiedy należy użyć wykresu zamiast tabeli?
Użyj wykresu, gdy pierwszym zadaniem jest dostrzeżenie trendu, rozkładu, rankingu lub zależności. Użyj tabeli, gdy czytelnicy potrzebują precyzyjnego wyszukiwania w wielu polach. Gdy oba zadania mają znaczenie, przechowuj zwartą tabelę wewnątrz bloku wykresu jako jego dostępną alternatywę danych.
Czy wykres słupkowy musi zaczynać się od zera?
Tak. Długość słupka reprezentuje wielkość względem wartości bazowej, więc jej przycięcie zmienia pozorny stosunek. Wykres liniowy może używać niezerowej skali, gdy widoczny zakres i jednostki są wyraźne, a węższy widok jest analitycznie niezbędny.
Czy tekst alternatywny wystarczy, aby wykres był dostępny?
Zwykle nie. Tekst alternatywny powinien identyfikować wyświetlacz i podsumowywać jego główny wzór. Wykres z wieloma wartościami wymaga również pobliskiej tabeli danych lub równoważnego tekstu zawierającego etykiety, wartości, jednostki, źródło i okres.
Czy wniosek może pojawić się tylko w tytule wykresu?
Nie. Tytuł identyfikuje, co figura pokazuje; wniosek określa, co czytelnik powinien zauważyć. Zachowaj wniosek jako pełne zdanie poza grafiką, aby pozostał dostępny, gdy obraz nie jest postrzegany lub wyodrębniany.
Czy blok wykresu tworzy znaczniki Schema.org?
Nie. Używaj prawidłowych znaczników na poziomie strony, takich jak Article, Report lub Dataset, tylko wtedy, gdy strona samodzielnie się kwalifikuje. Wykres nie tworzy nowego uprawnienia schematu ani nie uzasadnia ustrukturyzowanych twierdzeń, które są nieobecne w widocznych dowodach.
Więcej samouczków w tej sekcji
Gotowy, aby zastosować to w praktyce?
Bezpłatne sprawdzenie · 7-dniowy okres próbny · bez karty kredytowej